【发布时间】:2019-04-21 14:50:37
【问题描述】:
如何调整多边形或其他“基于点”的 Fabricjs 实体的大小而不缩放它们?
缩放会增加对象的 strokeWidth,我想覆盖此行为。
我是这样处理矩形的:
/** 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;
}
});
我的问题有所不同,因为用户可以手动编辑画布上绘制的对象属性。
例如,如果我绘制一个多边形并应用 2 的 scaleRatio,如果我将 strokewidth 值设置为 1,fabric 将在我的多边形上呈现 1*scaleRatio 边框。
这就是我正在寻找一个真正的“重绘”行为来覆盖缩放行为的原因,就像我对 fabric.Rect 或 fabric.Ellipse 所做的那样。
【问题讨论】:
-
Thx @Durga 解决了我渲染按比例绘制的对象的问题。但我更喜欢重绘整个对象的解决方案。在我的应用程序中,用户可以编辑像 strokeWidth 这样的对象属性,如果我在 sclaed 对象上将 strokeWidth 值设置为“1”,fabric 将应用 1 * scaleRatio strokewidth。
-
缩放完成后,
object:modified事件将触发,在那里重置值。
标签: javascript fabricjs