Qian
July 18, 2024, 6:14am
1
Hi everyone,
I am trying to create a ring in Axure based on the positions of three small circles (A, B, and C), with circle A as the center. I have made the basic code but it doesn’t seem to work. I would like to understand why the code is not producing the expected result and how to fix it.
As shown in the figure, the yellow area is the area I want to draw.
prototype.rp (53.5 KB)
javascript:(function() {
var circleA = document.getElementById($axure('@circleA').data('id')).getBoundingClientRect();
var circleB = document.getElementById($axure('@circleB').data('id')).getBoundingClientRect();
var circleC = document.getElementById($axure('@circleC').data('id')).getBoundingClientRect();
var A = { x: circleA.left + circleA.width / 2, y: circleA.top + circleA.height / 2 };
var B = { x: circleB.left + circleB.width / 2, y: circleB.top + circleB.height / 2 };
var C = { x: circleC.left + circleC.width / 2, y: circleC.top + circleC.height / 2 };
var distanceAB = Math.sqrt(Math.pow(B.x - A.x, 2) + Math.pow(B.y - A.y, 2));
var distanceAC = Math.sqrt(Math.pow(C.x - A.x, 2) + Math.pow(C.y - A.y, 2));
var angleBAC = Math.atan2(C.y - A.y, C.x - A.x) - Math.atan2(B.y - A.y, B.x - A.x);
var canvas = document.createElement('canvas');
canvas.id = 'ringCanvas';
canvas.style.position = 'absolute';
canvas.style.left = '0';
canvas.style.top = '0';
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var outerRadius = Math.max(distanceAB, distanceAC);
var innerRadius = Math.min(distanceAB, distanceAC);
var startAngle = 0;
var endAngle = angleBAC;
ctx.beginPath();
ctx.arc(A.x, A.y, outerRadius, startAngle, endAngle, false);
ctx.arc(A.x, A.y, innerRadius, endAngle, startAngle, true);
ctx.closePath();
ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fill();
})();
Jorkin
July 22, 2024, 2:10am
2
javascript:(function() {
var circleA = $axure('@circleA').$().get(0).getBoundingClientRect();
var circleB = $axure('@circleB').$().get(0).getBoundingClientRect();
var circleC = $axure('@circleC').$().get(0).getBoundingClientRect();
var A = { x: circleA.left + circleA.width / 2, y: circleA.top + circleA.height / 2 };
var B = { x: circleB.left + circleB.width / 2, y: circleB.top + circleB.height / 2 };
var C = { x: circleC.left + circleC.width / 2, y: circleC.top + circleC.height / 2 };
var distanceAB = Math.sqrt(Math.pow(B.x - A.x, 2) + Math.pow(B.y - A.y, 2));
var distanceAC = Math.sqrt(Math.pow(C.x - A.x, 2) + Math.pow(C.y - A.y, 2));
var angleBAC = Math.atan2(C.y - A.y, C.x - A.x) - Math.atan2(B.y - A.y, B.x - A.x);
var canvas = document.createElement('canvas');
canvas.id = 'ringCanvas';
canvas.style.position = 'absolute';
canvas.style.left = '0';
canvas.style.top = '0';
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var outerRadius = Math.max(distanceAB, distanceAC);
var innerRadius = Math.min(distanceAB, distanceAC);
var startAngle = 0;
var endAngle = angleBAC;
ctx.beginPath();
ctx.arc(A.x, A.y, outerRadius, startAngle, endAngle, false);
ctx.arc(A.x, A.y, innerRadius, endAngle, startAngle, true);
ctx.closePath();
ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fill();
})();
1 Like
Qian
July 22, 2024, 3:13am
4
Thank you! It’s so cool! One more question, how can I make it, if I want this generated area to coincide with the yellow area in the graph ?
javascript:(function() {
var circleA = $axure('@circleA').$().get(0).getBoundingClientRect();
var circleB = $axure('@circleB').$().get(0).getBoundingClientRect();
var circleC = $axure('@circleC').$().get(0).getBoundingClientRect();
var A = { x: circleA.left + circleA.width / 2, y: circleA.top + circleA.height / 2 };
var B = { x: circleB.left + circleB.width / 2, y: circleB.top + circleB.height / 2 };
var C = { x: circleC.left + circleC.width / 2, y: circleC.top + circleC.height / 2 };
var distanceAB = Math.sqrt(Math.pow(B.x - A.x, 2) + Math.pow(B.y - A.y, 2));
var distanceAC = Math.sqrt(Math.pow(C.x - A.x, 2) + Math.pow(C.y - A.y, 2));
var angleBAC = Math.atan2(C.y - A.y, C.x - A.x) - Math.atan2(B.y - A.y, B.x - A.x);
var angleAB = Math.atan2(B.y - A.y, B.x - A.x);
var angleAC = Math.atan2(C.y - A.y, C.x - A.x);
var canvas = document.createElement('canvas');
canvas.id = 'ringCanvas';
canvas.style.position = 'absolute';
canvas.style.left = '0';
canvas.style.top = '0';
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var outerRadius = Math.max(distanceAB, distanceAC);
var innerRadius = Math.min(distanceAB, distanceAC);
ctx.beginPath();
ctx.arc(A.x, A.y, outerRadius, angleAB, angleAC, false);
ctx.arc(A.x, A.y, innerRadius, angleAC, angleAB, true);
ctx.closePath();
ctx.fillStyle = 'rgba(0, 255, 0, 0.5)';
ctx.fill();
})();
Qian
July 22, 2024, 3:29am
5
In addition, why does changing ‘get(‘id’)’ to ‘get(‘0’)’ work properly? In this project, there is only one element for each element. Will the two functions be the same?
Qian
July 22, 2024, 4:59am
8
Qian
July 23, 2024, 2:01am
9
Qian
July 23, 2024, 2:58am
11
I figured out what the problem is, because I typed the wrong canvas id when I defined it. Excuse me.
system
Closed
August 6, 2024, 2:59am
13
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.