Jak narysować tylko tę część łuku?

Spójrz na to zdjęcie:Jak narysować tylko tę część łuku?

enter image description here

wiem, P1, P2, i centrum, które są 2d punktów. Znam również kąt p1-center-p2 i promień r.

Jak mogę narysować tylko wypełnioną część łuku, używając funkcji "Łuk"()?

EDIT

Co naprawdę trzeba zrobić, to, biorąc pod uwagę 2 punkty i kąt, narysować linię krzywą pomiędzy tymi 2 punkty takie, że kąt środkowy P1-P2 dany kąt.

To, co robię, to obliczyć środek i promień obwodu, który ma te 2 punkty, a teraz muszę narysować linię, która łączy p1 i p2 i ma podany kąt. To jest moja funkcja obliczyć środek circunference (które działa prawidłowo)

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

Źródło

2011-12-08 Ivan

Funkcja atan2(y,x) jest pomocne dla obliczania kąta do punktów w kole.

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

Przesłałem ten JavaScript do jsFiddle, z rozszerzeniem, które również zwraca punkty, a obie firmy przykładach.

Źródło

2011-12-08 00:44:02 Jonas

Ale mam inne rzeczy wyciągnięte których nie chcę usunąć – Ivan

Co naprawdę potrzebne jest coś jak: moveTo (P1) arktyczno (P2, promień) – Ivan

To nie wydaje się działać, gdy ma p1 inny komponent x niż p2: http://i.imgur.com/AKpgv.png – Ivan

Spróbuj

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

Jest to zmodyfikowany przykład z mozilla HTML5 tuts

a wynik jest here

Czy tego chcesz?

Źródło

2011-12-08 01:10:18 kcsoft

Jak narysować tylko tę część łuku?

Odpowiedz

Powiązane problemy