mousemove에 그려지는 화살표를 돌립니다.

mousemove에 화살표를 그려 넣으려고합니다. 코드는 수평 화살표를 그립니다. 그러나 시작 도면 점에서 끝 도면 점으로 회전 시키길 원합니다. 나는 많이 봤지만 해결책을 찾지 못했다. 어쩌면 내가 캔버스에 그리기 처음이기 때문에.mousemove에 그려지는 화살표를 돌립니다.

drawArrowMove: function(e, _self) 
    { 
     var width = e.w ; 
     var height = e.h ; 
     var arrowW = 0.35 * width; 
     var arrowH = 0.75 * height; 
     var p1  = {x: 0,    y: (height-arrowH)/2}; 
     var p2  = {x: (width-arrowW), y: (height-arrowH)/2}; 
     var p3  = {x: (width-arrowW), y: 0}; 
     var p4  = {x: width,   y: height/2}; 
     var p5  = {x: (width-arrowW), y: height}; 
     var p6  = {x: (width-arrowW), y: height-((height-arrowH)/2)}; 
     var p7  = {x: 0,    y: height-((height-arrowH)/2)}; 

     _self.ctxTemp.beginPath(); 
     _self.ctxTemp.moveTo(p1.x, p1.y); 
     _self.ctxTemp.lineTo(p2.x, p2.y); // end of main block 
     _self.ctxTemp.lineTo(p3.x, p3.y); // topmost point 
     _self.ctxTemp.lineTo(p4.x, p4.y); // endpoint 
     _self.ctxTemp.lineTo(p5.x, p5.y); // bottommost point 
     _self.ctxTemp.lineTo(p6.x, p6.y); // end at bottom point 
     _self.ctxTemp.lineTo(p7.x, p7.y); 
     _self.ctxTemp.fillStyle = 'black'; 
     _self.ctxTemp.fill(); 
     _self.ctxTemp.stroke(); 
    }

출처

2013-06-27 user1151563

여기 각진 라인

enter image description here

에 어떤 각도에서 화살촉을 그릴 수있는 가장 쉬운 방법을 화살촉을 그리는 방법은 캔버스의이 기능을 회전 사용하는 것입니다.

Math.atan 함수를 사용하면 선의 경사에 따라 적절한 각도를 계산할 수 있습니다.

// calculate the radian angle of the line from [x1,y1] to [x2,y2] 
var radianAngle=Math.atan((y2-y1)/(x2-x1)); 

// adjust the angle based on line slope 
radianAngle+=((x2>x1)?90:-90)*Math.PI/180;

그럼 당신은 라인을 그릴 수

// draw the line 
ctx.beginPath(); 
ctx.moveTo(x1,y1); 
ctx.lineTo(x2,y2); 
ctx.stroke();

을 마지막으로 문맥을 돌려 화살표를 연결합니다.

// rotate the canvas context to the appropriate angle 
ctx.rotate(radianAngle);

캔버스 자체를 회전 했으므로 화살촉을 수평 인 것처럼 그립니다. 단순한! 여기

// save the un-transformed state of the context 
ctx.save(); 

ctx.beginPath(); 

// translate to the end of the line 
ctx.translate(x2,y2); 

// rotate to the appropriate angle 
ctx.rotate(radianAngle); 

// draw the arrowhead 
ctx.moveTo(0,0); 
ctx.lineTo(8,20); 
ctx.lineTo(-8,20); 
ctx.closePath(); 
ctx.fill(); 

// when done drawing on the rotated context, set it back to its untransformed state 
ctx.restore();

입니다 코드와 바이올린 : http://jsfiddle.net/m1erickson/CQDww/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var context=canvas.getContext("2d"); 

    function Line(x1,y1,x2,y2){ 
     this.x1=x1; 
     this.y1=y1; 
     this.x2=x2; 
     this.y2=y2; 
    } 
    Line.prototype.drawWithArrowheads=function(ctx){ 

     // arbitrary styling 
     ctx.strokeStyle="blue"; 
     ctx.fillStyle="blue"; 
     ctx.lineWidth=3; 

     // draw the line 
     ctx.beginPath(); 
     ctx.moveTo(this.x1,this.y1); 
     ctx.lineTo(this.x2,this.y2); 
     ctx.stroke(); 

     // draw the starting arrowhead 
     var startRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1)); 
     startRadians+=((this.x2>this.x1)?-90:90)*Math.PI/180; 
     this.drawArrowhead(ctx,this.x1,this.y1,startRadians); 
     // draw the ending arrowhead 
     var endRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1)); 
     endRadians+=((this.x2>this.x1)?90:-90)*Math.PI/180; 
     this.drawArrowhead(ctx,this.x2,this.y2,endRadians); 

    } 
    Line.prototype.drawArrowhead=function(ctx,x,y,radians){ 
     ctx.save(); 
     ctx.beginPath(); 
     ctx.translate(x,y); 
     ctx.rotate(radians); 
     ctx.moveTo(0,0); 
     ctx.lineTo(8,20); 
     ctx.lineTo(-8,20); 
     ctx.closePath(); 
     ctx.fill(); 
     ctx.restore(); 
    } 

    // create a new line object 
    var line=new Line(50,50,150,150); 
    // draw the line 
    line.drawWithArrowheads(context); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

출처

2013-06-28 05:25:24 markE

나에게 너무 자세한 설명 주셔서 대단히 감사합니다, 저에게 많은 도움이! – user1151563

mousemove에 그려지는 화살표를 돌립니다.

답변

관련 문제