如何更改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();