简体   繁体   中英

How do I properly transform entire canvas in fabric.js / change fabric's origin?

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.

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. 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

** Fabric version 1.7.20

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM