MouseUp事件是由定標KineticJS層

Question

看到這裏例如間歇的：

http://jsfiddle.net/tigz_uk/B8UDq/45/embedded/result/

小提琴代碼：

http://jsfiddle.net/tigz_uk/B8UDq/45/

最相關的片段：

function whenAreaSelected(stage, layer, image) { 
    var rect, down = false; 
    var eventObj = layer; 
    eventObj.off("mousedown"); 
    eventObj.off("mousemove"); 
    eventObj.off("mouseup"); 
    eventObj.on("mousedown", function (e) { 
     console.log("Mousedown..."); 
     if (rect) { 
      rect.remove(); 
     }    
     var relativePos = getRelativePos (stage, layer); 

     down = true; 
     var r = Math.round(Math.random() * 255), 
      g = Math.round(Math.random() * 255), 
      b = Math.round(Math.random() * 255); 
     rect = new Kinetic.Rect({ 
      x: relativePos.x, 
      y: relativePos.y, 
      width: 11, 
      height: 1, 
      fill: 'rgb(' + r + ',' + g + ',' + b + ')', 
      stroke: 'black', 
      strokeWidth: 4, 
      opacity: 0.3 
     }); 
     layer.add(rect); 
    }); 

    eventObj.on("mousemove", function (e) { 
     if (!down) return; 
     var relativePos = getRelativePos (stage, layer); 
     var p = rect.attrs; 

     rect.setWidth(relativePos.x - p.x); 
     rect.setHeight(relativePos.y - p.y); 
     layer.draw(); 
    }); 

    eventObj.on("mouseup", function (e) { 
     console.log("Mouse Up..."); 
     down = false; 
     var p = rect.attrs; 
     var s = layer.getScale(); 
     console.log("Rect x: " + p.x + " y: " + p.y + " width: " + p.width + " height: " + p.height + " sx: " + s.x + " sy: " + s.y); 
    }); 
} 

var stageWidth = 1024; 
var stageHeight = 700; 
var imageWidth = 1299; 
var imageHeight = 1064; 

var initialScale = calcScale(imageWidth, imageHeight, stageWidth, stageHeight); 

var stage = new Kinetic.Stage({ 
    container: "canvas", 
    width: stageWidth, 
    height: stageHeight 
}); 

var layer = new Kinetic.Layer(); 

var imageObj = new Image(); 
imageObj.onload = function() { 
    var diagram = new Kinetic.Image({ 
     x: -500, 
     y: -500, 
     image: imageObj, 
     width: imageWidth, 
     height: imageHeight 
    }); 

    layer.add(diagram); 
    layer.setScale(initialScale); 

    whenAreaSelected(stage, layer, diagram); 

    layer.draw(); 
} 



var zoom = function (e) { 
    var zoomAmount = e.wheelDeltaY * 0.001; 
    layer.setScale(layer.getScale().x + zoomAmount) 
    layer.draw(); 
} 

document.addEventListener("mousewheel", zoom, false); 

stage.add(layer); 

imageObj.src = 'https://dl.dropbox.com/u/746967/Serenity/MARAYA%20GA.png'; 

似乎對我來說，就像mouseup甚至最好是間歇性的。

任何想法這裏發生了什麼？當圖像被偏移而不是顯示在0,0時，它似乎更糟糕。我認爲它涉及到圖層的縮放比例，因爲它在一級範圍內都可以正常工作。

這是一個動力學錯誤嗎？在你的鼠標移動處理器使用layer.drawScene（）而不是layer.draw（）

Answer 1

嘗試

eventObj.on("mousemove", function (e) { 
    if (!down) return; 
    var relativePos = getRelativePos (stage, layer); 
    var p = rect.attrs; 

    rect.setWidth(relativePos.x - p.x); 
    rect.setHeight(relativePos.y - p.y); 

    // try drawScene() instead of draw() 

    layer.drawScene(); 
}); 

[基於從user814628這裏轉發信息編輯：綁定MouseMove事件會導致不一致，與鼠標發佈事件被解僱