我必须根据要求在 mousemove 事件的图层上绘制弧线。如何context.arc(x,y,startAngel,endAngle,Counterclockwise)
根据当前鼠标位置固定函数中的参数?我的代码如下:
var newarc;
ui.stage.on("mousedown", function () {
var arc = new Kinetic.Shape({
drawFunc: function (canvas) {
var context = canvas.getContext();
var pos = ui.stage.getMousePosition();
var sx = Math.floor(pos.x / ui.scale - ui.stage.getAbsolutePosition().x / ui.scale + ui.stage.getOffset().x);
var sy = Math.floor(pos.y / ui.scale - ui.stage.getAbsolutePosition().y / ui.scale + ui.stage.getOffset().y);
var x = sx;
var y = sy;
var radius = 100;
var startAngle = 1 * Math.PI;
var endAngle = 0.5 * Math.PI;
var context = canvas.getContext('2d');
context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, false);
canvas.stroke(this);
},
fill: '#00D2FF',
stroke: 'red',
strokeWidth: 2,
// draggable: false
});
newarc = arc;
moving = true;
ui.myLayer.add(newarc );
});
ui.stage.on("mouseup", function () {
moving = false;
})
ui.stage.on("mousemove", function () {
if (!moving) {
return;
}
var dx = x - startX;
var dy = y - startY
var aradius = Math.sqrt(dx * dx + dy * dy)
newarc.radius = aradius;
ui.myLayer.drawScene();
ui.myLayer.add(newarc);
ui.stage.add(ui.myLayer);
});