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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用setViewportTransform翻转y轴(fabric.js)时渲染中断相关的知识,希望对你有一定的参考价值。

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

答案

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

以上是关于使用setViewportTransform翻转y轴(fabric.js)时渲染中断的主要内容,如果未能解决你的问题,请参考以下文章

使用PythonOpenCV翻转图像(水平垂直水平垂直翻转)

每次重复时垂直翻转背景图像-y

数字翻转

对图片进行X,Y轴的翻转,黑白色转变

牛客网-数字翻转(网易)

opengl翻转后为啥出现两个图像