gpt4 book ai didi

javascript - KineticJS - 用鼠标画线

转载 作者:数据小太阳 更新时间:2023-10-29 05:48:34 25 4
gpt4 key购买 nike

我正在使用 KinectJS 根据鼠标移动绘制线条。当用户按住鼠标按钮时,我希望它成为线条的“起点”,当用户释放时,它将成为线条的“终点”,但是当他们按住鼠标时我想要能够在我的鼠标移动时动态重绘线条。这可能吗?

最佳答案

是的,这是可能的。

基本上,您必须在 onMouseMove 事件期间重绘图层。您需要一个标志来控制线路何时移动。

当脚本初始化时,这个标志应该是假的。

在 onMouseDown 时,行开始应接收当前鼠标坐标并将标志设置为 true。

在 onMouseMouve 中,如果标志为真,您应该更新行尾以接收当前鼠标坐标。

在 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>

关于javascript - KineticJS - 用鼠标画线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12311535/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com