如何更改Fabric.js对象的值？

Question

我有一个Fabric.js canvas 。 我还有一个javascript，它有一个按下按钮时被调用的函数。 我知道如何获取活动对象canvas.getActiveObject() ，但我不知道如何只更改其中的值而无需进行克隆并删除原始对象。 我之所以想改变原版是因为当再次按下按钮时，会发生奇怪的事情。 有关如何做到这一点的任何线索？

Answer 1

有许多值的getter和setter：

object.setWidth(val);
object.setHeight(val);
object.setStrokeWidth(val);
object.setLeft(val);
object.setTop(val);

您还可以使用常规set方法更改值：

object.set('width', value);
object.set({ width: value, height: value});

如果更改影响属性的维或位置，则必须在更改属性后调用object.setCoords() 。 否则，对象的“点击区域”是错误的。 更改属性后，您必须调用canvas.renderAll()来重新渲染所有对象。

有关更多信息，请查看文档： fabricjs.com/docs/fabric.Object.html

Answer 2

显然，在最新版本的Fabric.js中删除了setter（使用版本2.7.0）。 您现在可以直接在对象上设置属性：

// Set your new property values
object.width = val;
object.height = val;
object.strokeWidth = val;
object.left = val;
object.top = val;

// Then you mark the object as "dirty" and render the canvas:
object.dirty = true;
canvas.renderAll();

或者，您可以使用set方法一次设置所有属性，如下所示：

// Set all properties at once using the set method
object.set({ 
    width: val, 
    height: val,
    strokeWidth: val,
    left: val,
    top: val
});

// In this case the setter marks the object as "dirty" so you only need to call renderAll
canvas.renderAll();