Question

我正在寻找图书馆中图像位置的位置。我正在使用v4.5.1。

看来，在图像的drawFunction中，它总是放在（0,0）处。以下是Kinetic.Image :: drawFunction（）

的摘录

// if cropping
if(crop) {
    cropX = crop.x || 0;
    cropY = crop.y || 0;
    cropWidth = crop.width || 0;
    cropHeight = crop.height || 0;
    params = [image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height];
}
// no cropping
else {
    params = [image, 0, 0, width, height];
}

它最终如何定位？

我问，因为我想翻转图片，看起来没有办法。

我知道有很多方法可以做到这一点。我将比例设置为-1，但我最终必须翻译翻转图像的坐标。我不想修改对象属性中的坐标或尺寸。

我使用Kinetic作为大型项目的基础，Kinetic类用作基类。我想重写正确的方法，并重新实现以考虑比例并在绘制之前进行翻译或传递已经翻译的值。

任何帮助都会有很大的帮助。谢谢！

〜弥

Answer 1

要翻转图像，您只需应用负标度，如下所示：

var img = new Kinetic.Image({
  x: 50,
  y: 20,
  width: 100,
  height: 50,
  image: flipperImage,
  offsetX: 25,
  scaleX: -1
});

这将在x方向（绕y轴）翻转图像。当然，您可以将此技术用于任何形状，以及组，图层和整个舞台。要调整旋转轴，请设置形状偏移。

这是一个动画示例：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-scale-animation-tutorial/

红色六边形绕y轴翻转。

KineticJS图像翻转 - 保留坐标和尺寸

1 个答案: