Fare hareketine dayalı çizgiler çizmek için KinectJS kullanıyorum. Bir kullanıcı fare tuşunu basılı tuttuğunda, satırın 'başlangıç' noktası olmasını istiyorum ve kullanıcı yayınlandığında, satırın 'sonu' olacak, ancak fareyi istediğim gibi tutuyorum Faremi hareket ettirirken çizgiyi dinamik olarak yeniden çizebilmek için. Mümkün mü?KineticJS - Fare ile Çizim Çizgileri
Evet, mümkün.
Temel olarak, onMouseMove olayı sırasında katmanınızı yeniden çizmeniz gerekir. Hattın ne zaman hareket ettiğini kontrol etmek için bir bayraka ihtiyacınız olacak.
Komut dosyası başlatıldığında, bu bayrak yanlış olmalıdır.
onMouseDown'da, satır başlangıcı geçerli fare koordinatlarını almalı ve bayrağı true değerine ayarlamalıdır.
OnMouseMouve'da, bayrak doğruysa, geçerli fare koordinatlarını almak için satır sonunu güncelleştirmelisiniz.
onMouseUp'da, bayrak yanlış olarak ayarlanmalıdır.
<!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>
çoklu çizgiler çizmek için bir yol ve aynı çizgiyi yerine orada değil:
Aşağıdaki örnek görüyor musunuz? – Mike
@TrustWeb olduğundan emin olun. Her mousedown üzerinde yeni bir şekil yaratın –
İşte size kolaylık için bir JSFiddle: http://jsfiddle.net/nSSTS/ –