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

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 轴翻转。