使用setViewportTransform翻转y轴（fabric.js）时渲染中断

Question

在我们的项目中，我们将使用不同坐标系（[0,0] =左下角）的复杂图像对象转换为fabric.js对象。我们尝试使用setViewportTransform在y级上使用负值来实现此目的但遇到了一些奇怪的行为。

例如，给定此代码：

const canvas = new fabric.Canvas('c');
const path = new fabric.Path('M 0 0L 0 100 L 100 100 z');
canvas.add(path);
canvas.setViewportTransform([1, 0, 0, -1, 0, 300]);

当你试图移动path时，在某些位置它会完全消失。

我们做错了什么还是有另一种方法来实现我们正在寻找的东西？

Here是一个显示问题的小提琴。

Answer 1

你可以这样做。使用qazxsw poi属性翻转内容并调整顶部位置。 qazxsw poi