1

我正在使用这样的 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 事件时，命中区域是错误的。我怀疑命中区域没有缩放。请注意，我还使用偏移量，以便图像围绕其中心旋转。

我做错了什么我在这里处理错误吗？

4

1 回答 1

0

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

如果您搜索 kineticjs 源代码，您会看到在 createImageHitRegion 内部有一行类似于：

_context.drawImage(图像, 0, 0);

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

_context.drawImage(image, 0, 0, this.getWidth(), this.getHeight());

在我的情况下，我不必在创建图像时传递 scale 属性，请在您提供 scale 属性时验证这是否有效，否则您将不得不调整 createImageHitRegion 来解决这个问题。

于 2014-01-02T22:12:53.223 回答