Javascript KineticJS可拖动图像在拖动后卡住

我正在使用KineticJS，到目前为止，这是一次很好的体验。我有一个问题是关于拖拉。我将本例中的图像设置为“draggable:true”，但在第一次拖动后，它将无法再次移动

var stage = new Kinetic.Stage({
    container: 'container',
    width: 2754,
    height: 1836
});
var layer = new Kinetic.Layer();
var scale = '0.16339869281045751633986928104575';
var imageObj = new Image();
imageObj.onload = function () {
    var img = new Kinetic.Image({
        x: 0,
        y: 0,
        height:612,
        width:612,
        image: imageObj,
        draggable: true,
        dragBoundFunc: function (pos) {
            console.log(img.getAttrs());
            return { 
                x: Math.floor((pos.x/scale)/306)*306,
                y: Math.floor((pos.y/scale)/306)*306 
                };
        }
    });

    // add the shape to the layer
    layer.add(img);

    // add the layer to the stage
    stage.add(layer);

};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

感谢您的帮助。为了获得额外的积分，您可以提出一些方法，使拖动总体上更平滑

谢谢

编辑：我注意到，在最初拖动图像后，当用户尝试拖动图像时，不再调用dragBoundFunc

---

如果我将图像拖回0,0，它也可以工作，但没有其他时间

这在当前的KineticJS中是不可能的

让我解释一下原因

使用transform:scale（CSS3元素，目前还不是标准）时，实际元素的视觉位置也会被缩放。但是，MouseEvent的相对鼠标位置仅通过可视位置（非缩放位置）

鼠标拖动事件，KimeTICS使用的鼠标点击事件只读取鼠标事件位置，这是可视的（不是缩放的），它不考虑画布元素的转换。

当您将图像x/y设置为“以下”时，您甚至无法进行第一次拖动

    x: 612,
    y: 612,

但是，当您将其设置为0和0时，它会响应它，因为缩放位置和未缩放位置相同

对于上面的示例x/y 612和612，您不能单击拖动， 因为KineticJS理解它，因为您没有单击612和612， 但它认为这是100和100

正如我所解释的，原因很简单

MouseeEvent不通过缩放的X/Y，而是通过X/Y的可视位置

谁知道CSS3何时成为标准，它可能会得到很好的支持：）

---

同时，我不建议对画布使用转换。除非您构建自己的框架，否则使用canvas transformed很难使所有内容都正确无误。

这令人失望。我希望画布输出/保存2754x1836的图像，但以450x300显示画布。你能想出我能做到这一点的方法吗？我需要更高的分辨率，因为我最终会打印图像，450x300不行。您可以将舞台设置为450 x 300，可缩放和拖动，并添加一层2754 x 1836。试试看，如果你有任何问题，我会帮你的。我在那里做了，这正是我所需要的！成功了，非常感谢！