如何正确转换fabric.js中的整个画布/更改面料的来源?

问题描述

我正在尝试设置布料，以便原点位于左下角而不是左上角.目前，我正在使用setViewportTransform，它会根据需要转换所有内容，除了选择框. (似乎无法实现转换)，我做了一个小提琴&；您会看到如果旋转矩形，选择框将以错误的方式旋转.

I'm trying to set fabric up so the origin is bottom left instead of top left. Currently I'm using setViewportTransform and it transforms everything as I want, except for the selection box. (doesn't seem to get the transformation) I made a fiddle & you can see how if you rotate the rectangle, the selection box rotates the wrong way.

所以我的问题是，如何将fabric.js的原点设置在左下角?

So my question is, how do I set fabric.js' origin to the bottom left?

http://jsfiddle.net/39up3jcm/105/

推荐答案

我发现的最简单的解决方案是:

The simplest solution I found was to:

1. 通过将transform: scaleY(-1)添加到画布CSS来更改视图
2. 通过重新定义fabric.Canvas.prototype.getPointer来更改输入，但将pointer.y = pointer.y - this._offset.top替换为pointer.y = bounds.height - pointer.y + this._offset.top

1. Change the view by adding transform: scaleY(-1) to the canvas CSS
2. Change the inputs by redefining fabric.Canvas.prototype.getPointer but replace pointer.y = pointer.y - this._offset.top with pointer.y = bounds.height - pointer.y + this._offset.top

**织物版本1.7.20

** Fabric version 1.7.20

这篇关于如何正确转换fabric.js中的整个画布/更改面料的来源?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！