createImageHitRegion 不随图像对象缩放答案

【问题标题】：createImageHitRegion is not scaled with the image objectcreateImageHitRegion 不随图像对象缩放
【发布时间】：2014-01-03 06:12:53
【问题描述】：

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

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

【问题讨论】：

您的命中区域可能需要与动画一起重新计算。也许您可以制作一个 jsfiddle 供人们使用以获得更快的答案。

标签： javascript kineticjs

【解决方案1】：

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

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

_context.drawImage(image, 0, 0);

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

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

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

【讨论】：