kineticJS createImageHitRegion 用于精灵，而不是图像

Question

我正在使用KineticJS 并希望为我的精灵创建一个精确的图像命中区域（忽略透明像素）。我看到了createImageHitRegion accomplishes this for images，但我不知道如何将其应用于精灵。换句话说，虽然方法 createImageHitRegion 是一种可以完成我想要的图像的方法，但对于精灵似乎没有类似的方法。如果我可以在我的每个精灵的一个图像上创建一个图像命中区域，它可以为我工作，但是一个包含精灵图像的整个宽度和高度的大矩形区域不能工作。任何解决方法的想法？也许我错过了什么？

Answer 1

没有简单的方法在精灵上命中测试不透明像素。

我能想到几个理论上的解决方法...

如果你能画出一条勾勒出你想要击中的像素的路径。

精灵对象允许自定义drawHitFunc，因此您可以使用mySprite.afterFrame 为每个精灵图像重新定义自定义点击区域。

mySprite.afterFrame(0, function() {
    mySprite.setDrawHitFunc(function(){
        // draw the path you want used for frame#0 
    });
});

// repeat for all frames

如果你不能画出你想打的像素的轮廓线。

不要使用精灵，而是使用单独的图像制作自己的精灵。

通过创建一系列图像（包括 createImageHitRegion）并依次使其中一个图像可见，使其看起来像是在播放 spritesheet。