我必须根据要求在 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);
});
最佳答案
这里是如何通过拖动鼠标创建一个圆。
鼠标按下:
- 创建一个以鼠标位置为圆心的新圆。
鼠标移动:
- 将圆的半径更改为center-circle和鼠标之间的距离。
鼠标悬停:
- 结束调整圆的大小
这是代码和 fiddle :http://jsfiddle.net/m1erickson/NQDdE/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var newArc;
var isDown=false;
stage.on("contentMousedown",function(){
var mouse=stage.getMousePosition();
newArc=new Kinetic.Circle({
x:mouse.x,
y:mouse.y,
radius:.25,
fill:randomColor(),
stroke:"lightgray",
strokeWidth:3
});
layer.add(newArc);
layer.draw();
isDown=true;
});
stage.on("contentMousemove",function(){
if(!isDown){return;}
var mouse=stage.getMousePosition();
var dx=mouse.x-newArc.getX();
var dy=mouse.y-newArc.getY();
var radius=Math.sqrt(dx*dx+dy*dy);
newArc.setRadius(radius);
layer.draw();
});
$(stage.getContent()).on('mouseup', function () {
isDown=false;
newArc=null;
});
function randomColor(){
return('#'+Math.floor(Math.random()*16777215).toString(16));
}
layer.draw();
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
关于javascript - 使用 Kineticjs 在 mousemove 事件上绘制圆弧，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19803937/