문제

Take a look at this picture:

enter image description here

I know p1, p2, and center, which are 2d points. I also know the angle p1-center-p2 and the radius r.

How can I draw only the filled part of the arc using the canvas' function arc()?

EDIT

What I really need to do is, given 2 points and an angle, draw a curved line between these 2 points such that p1-center-p2 angle is the given angle.

What I do is calculate the center and the radius of the circunference that has those 2 points in it and now I need to draw the line that joins p1 and p2 and has the given angle. This is my function to calculate the center of the circunference (which works properly)

function getCenter(v0x, v0y, v1x, v1y, curve) {
    // result = p0
    resx = parseFloat(v0x);
    resy = parseFloat(v0y);

    // tmpvec = (p1 - p0) * .5
    tmpx = (v1x - v0x) / 2;
    tmpy = (v1y - v0y) / 2;

    // result += tmpvec
    resx = resx + tmpx;
    resy = resy + tmpy;

    // rotate 90 tmpvec
    tmptmpx = tmpx;
    tmptmpy = tmpy;
    tmpy = -tmptmpx;
    tmpx = tmptmpy;

    // tmpvec *= 1/tan(c/2)
    tmpx *= 1/Math.tan(curve/2);
    tmpy *= 1/Math.tan(curve/2);

    // return res + tmpvec
    return [resx+tmpx, resy+tmpy];
}

올바른 솔루션이 없습니다

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top