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

Qian · July 18, 2024, 6:14am

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

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

Qian · July 22, 2024, 3:13am

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

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?

Jorkin · July 22, 2024, 3:58am

Qian · July 22, 2024, 4:59am

Thank you. It was solved perfectly

Qian · July 23, 2024, 2:01am

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