KineticJS - 用鼠标绘制线条 [英] KineticJS - Drawing Lines with Mouse
问题描述
我正在使用KinectJS根据鼠标移动绘制线条。当用户按住鼠标按钮时，我希望它成为该行的开始点，当用户释放时，它将是该行的结束，但是当他们按住鼠标时我想要能够在鼠标移动时动态重绘线条。这可能吗？
I'm using KinectJS to draw lines based on mouse movement. When a user holds down the mouse button, I want it to be the 'start' point of the line, and when the user release, it will be the 'end' of the line, but as they are holding the mouse down I want to be able to dynamically redraw the line as my mouse moves. Is this possible?
推荐答案
是的，它可能。
基本上，您必须在onMouseMove事件期间重绘图层。你需要一个标志来控制线的移动时间。
Basically, you has to redraw your layer during onMouseMove event. You'll need a flag to control when the line is moving or not.
当脚本初始化时，这个标志应该是假的。
When the script initialize, this flag should be false.
在onMouseDown，行开始应该接收当前鼠标坐标并将标志设置为true。
At onMouseDown, the line start should receive the current mouse coordinates and set the flag to true.
在onMouseMouve上，如果标志为真，你应该更新行结束以接收当前的鼠标坐标。
At onMouseMouve, if the flag is true, you should update the line end to receive the current mouse coordinates.
在onMouseUp上，标志应该设置为false。
At onMouseUp, the flag should be set to false.
请参阅以下示例：
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.1.js"></script>
<script>
window.onload = function() {
layer = new Kinetic.Layer();
stage = new Kinetic.Stage({
container: "container",
width: 320,
height: 320
});
background = new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: "white"
});
line = new Kinetic.Line({
points: [0, 0, 50, 50],
stroke: "red"
});
layer.add(background);
layer.add(line);
stage.add(layer);
moving = false;
stage.on("mousedown", function(){
if (moving){
moving = false;layer.draw();
} else {
var mousePos = stage.getMousePosition();
//start point and end point are the same
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();
}
});
stage.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();
}
});
stage.on("mouseup", function(){
moving = false;
});
};
</script>
</head>
<body>
<div id="container" ></div>
</body>
</html>
这篇关于KineticJS - 用鼠标绘制线条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
