在FabricJS中调整多边形，折线，线的大小，而无需使用“缩放" [英] Resize Polygons, Polylines, Lines in FabricJS without using 'scale'

问题描述

如何在不缩放多边形或基于点"的其他Fabricjs实体的情况下调整其大小?

How can I resize polygons or other Fabricjs entities that are "points based" without scaling them?

缩放比例会增加对象的strokeWidth，我想覆盖此行为.

Scaling increases the strokeWidth of objects and I'd like to override this behavior.

我是这样为矩形做的:

/** Resize instead of scaling example */
this.on({
    'scaling': function(e) {
        var obj = this;
        obj.width = obj.scaleX * obj.width;
        obj.height = obj.scaleY * obj.height;
        obj.scaleX = 1;
        obj.scaleY = 1;
    }
});

一个椭圆的例子:

    this.on({
        'scaling': function(e) {
            var obj = this;
            obj.width = obj.scaleX * obj.width;
            obj.height = obj.scaleY * obj.height;
            obj.ry = obj.ry * obj.scaleY;
            obj.rx =  obj.rx * obj.scaleX;
            obj.scaleX = 1;
            obj.scaleY = 1;
        }
    });

我的问题有所不同，因为用户可以手动编辑在画布上绘制的对象属性.

My question is different because users can edit manually object properties drawn on canvas.

例如，如果我绘制一个多边形并应用scaleRatio为2，如果我将strokewidth值设置为1，fabric将在我的多边形上呈现一个1 * scaleRatio边框.

For example if I draw a polygon and apply a scaleRatio of 2, if I set the strokewidth value at 1, fabric will render a 1*scaleRatio border on my polygon.

这就是我要像对fabric.Rect或fabric.Ellipse那样使用真实的重绘"行为来搜索比例行为的原因.

That's the reason I'm searching for an override to the scale behavior with a real "redraw" behavior as I did for fabric.Rect or fabric.Ellipse.

推荐答案

从Fabric.js 2.7.0版开始，现在有了strokeUniform属性，该属性在启用时可以防止笔划宽度受对象的比例值影响. /p>

As of Fabric.js version 2.7.0 there is now a strokeUniform property that when enabled, prevents the stroke width from being affected by the object's scale values.

obj.set('strokeUniform', true);

这篇关于在FabricJS中调整多边形，折线，线的大小，而无需使用“缩放"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！