Tôi đang sử dụng KinectJS để vẽ các đường dựa trên chuyển động của chuột. Khi người dùng giữ nút chuột, tôi muốn nó là điểm 'bắt đầu' của dòng và khi người dùng phát hành, nó sẽ là 'kết thúc' của dòng, nhưng khi họ đang giữ chuột xuống tôi muốn để có thể tự động vẽ lại đường khi con chuột của tôi di chuyển. Điều này có thể không?KineticJS - Vẽ các đường bằng chuột
Có, có thể.
Về cơ bản, bạn phải vẽ lại lớp của mình trong sự kiện onMouseMove. Bạn sẽ cần một lá cờ để kiểm soát khi dòng di chuyển hay không.
Khi tập lệnh khởi tạo, cờ này phải là sai.
Tại onMouseDown, dòng bắt đầu sẽ nhận tọa độ chuột hiện tại và đặt cờ thành đúng.
Tại onMouseMouve, nếu cờ là đúng, bạn nên cập nhật đầu dòng để nhận tọa độ chuột hiện tại.
Tại onMouseUp, cờ phải được đặt thành false.
Xem ví dụ dưới đây:
<!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>
là có một cách để thu hút nhiều dòng và không thay thế cho dòng giống nhau không? – Mike
@TrustWeb chắc chắn là như vậy. Chỉ cần tạo ra một hình dạng mới trên mỗi mousedown –
Dưới đây là một câu trả lời JSFiddle cho thuận tiện: http://jsfiddle.net/nSSTS/ –