Mouseup 事件在 Scaled KineticJS 层间断

Question

请看这里的例子：

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

小提琴代码：

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

最相关的sn-p：

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 时，它似乎也更糟。而且我认为这与层的缩放有关，因为它在比例 1 上一切正常。

这是一个动态错误吗？

Answer 1

尝试在鼠标移动处理程序中使用 layer.drawScene() 而不是 layer.draw()

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 事件导致与触发鼠标释放事件不一致