Question

我正在使用像这样的Kinetic.image对象：

this.icon = new Kinetic.Image({
    x: self.x,
    y: self.y,
    offset: [32,32],
    image: self.imageItem.image,
    width: self.size,
    height: self.size,
    scale: self.scale,
    rotationDeg: self.angle,
    draggable: true
});

图像是带有透明像素的PNG。我还创建了一个图像匹配区域：

self.icon.createImageHitRegion(function() {
    self.icon.getLayer().drawHit();
});

但是，当我使用mouseover事件时，命中区域是错误的。我怀疑hitregion没有缩放。请注意，我也使用偏移，以便图像围绕它的中心旋转。

我在做错了吗？我在这里处理一个错误吗？

Answer 1

通过宽度和高度创建图像时遇到了同样的问题。库使用图像的宽度和高度来创建画布以绘制命中区域，但宽度和高度不用于缩放在画布上绘制的图像。

如果你搜索kineticjs源代码，你会发现在createImageHitRegion里面有一行看起来像：

_context.drawImage（image，0,0）;

添加图像的宽度和高度，它应该按预期工作：

_context.drawImage（image，0,0，this.getWidth（），this.getHeight（））;

在我的情况下，我没有必要在创建图像时传递scale属性，请在提供scale属性时验证这是否有效，否则你将不得不调整createImageHitRegion来解释它。

createImageHitRegion未与图像对象缩放

1 个答案: