使用setViewportTransform翻转y轴时渲染中断(fabric.js)

时间:2019-04-05 14:53:15

标签: javascript canvas fabricjs

在我们的项目中,我们正在将使用不同坐标系([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是显示问题的小提琴。

1 个答案:

答案 0 :(得分:1)

您可以这样做。 使用flipY属性翻转内容并添加顶部位置。 http://jsfiddle.net/ejmw1sbp/