Html 5 Canvas 完整箭头 [英] Html 5 Canvas complete arrowhead
问题描述
我正在使用 wPaint 插件，并尝试添加更多功能.我需要的是一条以箭头"结尾的画线.我已经尝试了几乎所有我能想到的东西，但我只能得到箭头的一半(想象 <-----，但头部只延伸到底部或顶部，但从来没有两个方向.)
I'm using the wPaint plugin and I am attempting to add a few more features. What I need is a drawn line to end with an "arrowhead". I have tried just about everything I could think of, but I can only get half of the arrow ( imagine <-----, but the head only extends to the bottom or the top, but never both directions.)
这里是画线的函数(带半箭头):
Here is the function for drawing the line (with the half arrowhead):
drawArrowMove: function(e, _self)
{
var xo = _self.canvasTempLeftOriginal;
var yo = _self.canvasTempTopOriginal;
if(e.pageX < xo) { e.x = e.x + e.w; e.w = e.w * -1}
if(e.pageY < yo) { e.y = e.y + e.h; e.h = e.h * -1}
_self.ctxTemp.lineJoin = "round";
_self.ctxTemp.beginPath();
_self.ctxTemp.moveTo(e.x, e.y);
_self.ctxTemp.lineTo(e.x + e.w, e.y + e.h);
_self.ctxTemp.closePath();
_self.ctxTemp.moveTo(e.x, e.y);
_self.ctxTemp.lineTo(15,10);
_self.ctxTemp.stroke();
}
任何帮助/想法/提示都会有所帮助.
Any help/ideas/tips would be helpful.
谢谢.
推荐答案
这是如何创建一个在两端绘制箭头的线对象
有趣的部分是这样计算箭头的角度:
The interesting part is calculating the angle of the arrowheads like this:
var startRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
startRadians+=((this.x2>=this.x1)?-90:90)*Math.PI/180;
var endRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
endRadians+=((this.x2>=this.x1)?90:-90)*Math.PI/180;
剩下的只是画线和 2 个三角形作为箭头计算的旋转
The rest is just drawing the line and 2 triangles for arrowheads the calculated rotations
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(5,20);
ctx.lineTo(-5,20);
ctx.closePath();
ctx.restore();
ctx.fill();
}
这是代码和小提琴:http://jsfiddle.net/m1erickson/Sg7EZ/
<!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=1;
// 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(5,20);
ctx.lineTo(-5,20);
ctx.closePath();
ctx.restore();
ctx.fill();
}
// 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>
这篇关于Html 5 Canvas 完整箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
