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

Kinetic.JS Image Unable to Drag After Using Pixel Detection

本文关键字:拖动 Kinetic JS 图像 像素 检测      更新时间:2024-04-24

我正在使用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";

图像加载程序中没有DetectionType。。它应该是类似的东西

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();

希望这是。。

问候