Как нарисовать только эту часть дуги? - PullRequest
Новая
       62

Как нарисовать только эту часть дуги?

6 голосов
/ 08 декабря 2011

Посмотрите на эту картинку:

enter image description here

Я знаю p1, p2 и центр, которые являются 2d точками. Я также знаю угол p1-center-p2 и радиус r.

Как нарисовать только заполненную часть дуги, используя функцию дуги canvas ()?

EDIT

Что мне действительно нужно, так это, учитывая 2 точки и угол, провести кривую линию между этими 2 точками так, чтобы угол p1-center-p2 был заданным углом.

Что я делаю, так это вычисляю центр и радиус окружности, в которой есть эти 2 точки, и теперь мне нужно нарисовать линию, которая соединяет р1 и р2 и имеет заданный угол. Это моя функция для расчета центра окружности (которая работает правильно) 

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];
}

Ответы [ 2 ]

2 голосов
/ 08 декабря 2011

Функция atan2 (y, x) полезна для вычисления угла к точкам на окружности. 

function drawArcPart(cx, cy, radius, p1x, p1y, angle) {

    var x = p1x - cx;
    var y = p1y - cy;

    var startAngle = Math.atan2(y,x);
    var endAngle = startAngle - angle;

    var ctx = document.getElementById('canvas').getContext('2d');
    ctx.fillStyle='black';
    ctx.beginPath();
    ctx.arc(cx, cy, radius, startAngle, endAngle, true);
    ctx.fill();
}

enter image description here

Я загрузил этот JavaScript в jsFiddle , с расширением, которое также рисует точки, и оба ваших примера.

1 голос
/ 08 декабря 2011

Попробуйте это 

<html>
    <head></head>
<body onload="drawShape();">
<div>
    <canvas id="tutorial" width="150" height="200"></canvas>
</div>
<SCRIPT type="text/javascript">
function drawShape(){
    // get the canvas element using the DOM
    var canvas = document.getElementById('tutorial');
    // Make sure we don't execute when canvas isn't supported
    if (canvas.getContext){
        var ctx = canvas.getContext('2d');

        ctx.beginPath();
        var x          = 100;               // x coordinate
        var y          = 100;               // y coordinate
        var radius     = 100;                    // Arc radius
        var startAngle = (Math.PI)-((Math.PI)/4);                     // Starting point on circle
        var endAngle   = (Math.PI)+((Math.PI)/4); // End point on circle
        ctx.arc(x,y,radius,startAngle,endAngle, false);    
        ctx.fill();
    } else {
        alert('You need Safari or Firefox 1.5+ to see this demo.');
    }
}
</SCRIPT>
</body>
</html>

Это модифицированный пример из Mozilla HTML5 tuts

И результат здесь

Это то, что вы хотите?

...