javascript - resizing widthheight properties of fabricjs Rects - Stack Overflow

admin管理员组

文章数量:1290796

I'm using fabric.js to define rectangular areas that can be resized. I was wondering if there is any way to set up fabric so that it would resize the element with changing the width / height properties instead of scaleX and scaleY?

I'm using fabric.js to define rectangular areas that can be resized. I was wondering if there is any way to set up fabric so that it would resize the element with changing the width / height properties instead of scaleX and scaleY?

• javascript
• fabricjs

Share Improve this question Follow edited Feb 3, 2016 at 7:48 AndreaBogazzi 14.7k33 gold badges4141 silver badges6767 bronze badges asked Feb 1, 2016 at 22:09 all jazzall jazz 2,01722 gold badges2121 silver badges3838 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

You can use the object:scaling event.

canvas.on("object:scaling", function(e) {
    var target = e.target;
    if (!target || target.type !== 'rect') {
        return;
    }
    var sX = target.scaleX;
    var sY = target.scaleY;
    target.width *= sX;
    target.height *= sY;
    target.scaleX = 1;
    target.scaleY = 1;
});

You should set the dirty flag, that fixed most of the issues for me:

canvas.on("object:scaling", function (e) {
            var target = e.target;
            if (!target || target.type !== 'rect') {
                return;
            }
            var sX = target.scaleX;
            var sY = target.scaleY;
            target.width *= sX;
            target.height *= sY;
            target.scaleX = 1;
            target.scaleY = 1;
            target.dirty = true;
        });

本文标签： javascriptresizing widthheight properties of fabricjs RectsStack Overflow