# How to create a ring in Axure based on the positions of three points ？

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();
})();

``````

``````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

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();
})();
``````

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?

1 Like

Thank you. It was solved perfectly

prototype_new.rp (48.4 KB)
Hello, in the process of making the prototype, I found another problem, that is, when I moved one of the circle to adjust the sector area, the previously generated area could not be deleted, how can I solve it

You typed a wrong name.

I figured out what the problem is, because I typed the wrong canvas id when I defined it. Excuse me.

yes. Thank you!