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);

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

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

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

有关详细信息，请查看文档：{{3}}

Answer 2

很明显，在最新版本的Fabric.js中（使用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();

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

2 个答案: