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

Question

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

似乎在图像的drawFunction中，它总是位于(0,0)。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轴翻转