使用像素检测后 Kinetic.JS 图像无法拖动答案

【问题标题】：Kinetic.JS Image Unable to Drag After Using Pixel Detection使用像素检测后 Kinetic.JS 图像无法拖动
【发布时间】：2012-10-04 17:26:23
【问题描述】：

我正在使用 Kinetic.JS 库来开发 HTML5 应用程序。我使用 Kinetic.Image 加载图像（.PNG 格式），并使用像素检测仅检测图像的非透明部分。问题是我无法正确拖动图像，尽管我已将 draggable 属性设置为 true 并使用 saveImageData 方法。图像被拖得很好（使用path检测）。大佬们有什么解决办法吗？这是我的代码：

   var beeObj = new Image();
        beeObj.onload = function(){ 
            bee = new Kinetic.Image({ //bee is global variable
            x: 325 - 45,
            y: 145 - 83,
            image: beeObj,          
            draggable: true         
        });
        lineLayer.add(bee); 
        lineLayer.draw();
        bee.saveImageData();
   };
   beeObj.src = directory + "smile_bee.png";

【问题讨论】：

注意：Kinetic.JS 版本：kinetic-v3.10.4.js

标签： javascript html kineticjs

【解决方案1】：

您的图像加载器中没有检测类型.. 应该是这样的

bee = new Kinetic.Image({ //bee is global variable
        x: 325 - 45,
        y: 145 - 83,
        image: beeObj,          
        draggable: true,
        DetectionType: 'Pixels'         
    });

鼠标移出时，您可以使用相同的功能，即

bee.saveImageData();

并且还使用相同的函数结束整个 onload 函数然后它会工作

现在 Eric 发布了 v4+ 所以现在没有像素检测类型

你可以使用类似的东西

    image.createImageBuffer();

//清除图像缓冲区

     image.clearImageBuffer();

希望这一切顺利..

问候

【讨论】：