html5-canvas - Mouseup イベントは、Scaled 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';

せいぜいマウスアップイベントが断続的であるように私には思えます。

ここで何が起こっているのか分かりますか？また、画像が 0,0 で表示されるのではなく、オフセットされている場合も悪化するようです。そして、それはすべてスケール1で問題なく機能するため、レイヤーのスケーリングに関連していると思います.

これはキネティックバグですか？