我正在尝试将箭头添加到我使用鼠标绘制的线条的起点和终点,这是我绘制线条的脚本:
document.getElementById('dLine').onclick = function() {
layer.on("mousedown", function () {
if (moving) {
moving = false;
layer.draw();
} else {
var mousePos = stage.getMousePosition();
x1 = mousePos.x;
y1 = mousePos.y;
line = new Kinetic.Line({
points: [0, 0, 50, 50],
stroke: "red"
});
layer.add(line);
line.getPoints()[0].x = mousePos.x;
line.getPoints()[0].y = mousePos.y;
line.getPoints()[1].x = mousePos.x;
line.getPoints()[1].y = mousePos.y;
moving = true;
layer.drawScene();
}
});
layer.on("mousemove", function () {
if (moving) {
var mousePos = stage.getMousePosition();
var x = mousePos.x;
var y = mousePos.y;
line.getPoints()[1].x = mousePos.x;
line.getPoints()[1].y = mousePos.y;
moving = true;
layer.drawScene();
}
});
layer.on("mouseup", function () {
moving = false;
var mousePos = stage.getMousePosition();
x2 = mousePos.x;
y2 = mousePos.y;
$("#distance").val(calculateDistance(x1, y1, x2, y2));
});
};
感谢您的建议。
答案 0 :(得分:5)
您可以使用此功能绘制箭头:
function canvas_arrow(fromx, fromy, tox, toy){
var headlen = 20; // how long you want the head of the arrow to be, you could calculate this as a fraction of the distance between the points as well.
var angle = Math.atan2(toy-fromy,tox-fromx);
line = new Kinetic.Line({
points: [fromx, fromy, tox, toy, tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6),tox, toy, tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6)],
stroke: "red"
});
}
修改:jsfiddle.net/cmcculloh/M56w4 - 在评论中提供