KineticJS-用鼠标绘制线条
KineticJS - Drawing Lines with Mouse
我使用KinectJS根据鼠标移动绘制线条。当用户按住鼠标按钮时,我希望它是线的"起点",当用户释放时,它将是线的‘终点’,但当他们按住鼠标时,我想能够在鼠标移动时动态地重新绘制线。这可能吗?
是的,这是可能的。
基本上,你必须在onMouseMove事件期间重新绘制你的图层。你需要一个标志来控制线何时移动。
当脚本初始化时,此标志应为false。
在onMouseDown上,行开始应该接收当前鼠标坐标,并将标志设置为true。
在onMouseMouve中,如果该标志为true,则应更新行尾以接收当前鼠标坐标。
在onMouseUp上,该标志应设置为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-用鼠标绘制线条
- 尝试绘制从鼠标位置工具栏中选择的形状 - HTML5 CANVAS
- 绘制DOM元素:鼠标事件会被背景元素混淆
- 鼠标悬停时重新绘制画布
- 如何在画布上绘制(使用鼠标/触摸)、保存绘制的对象、存储、加载和操作
- 单击鼠标在画布上绘制一个实心圆
- 在HTML5画布中绘制鼠标移动的半透明线条
- 如何在使用鼠标单击动态绘制多边形时在画布中拖放多边形
- 用鼠标在画布上绘制不透明度的线条
- 在鼠标移动时绘制一个矩形,并使用 kineticjs 在鼠标向上选择该矩形内的所有形状
- 绘制在鼠标位置折叠的水平线和垂直线
- 使用 jquery 将鼠标悬停在图像上绘制线条和矩形
- 在画布上绘制:鼠标悬停和鼠标单击
- 如何使用 Javascript 中的鼠标事件在画布上绘制
- 操作方法:将鼠标悬停在图像上并制作动画绘制一条线,说明淡出
- 用鼠标单击并拖动绘制一个矩形 - JavaScript
- 在画布上绘制六边形,测试鼠标单击事件与六边形
- 由谷歌地图绘制的矩形 绘图管理器不会触发鼠标移动事件
- 在画布上使用JavaScript绘制鼠标移动的透明图像
- 如何在画布上重新绘制鼠标移动