Wie ändere ich den Wert eines Fabric.js-Objekts?

Question

Ich habe ein Fabric.js canvas. Ich habe auch einen JavaScript-Code, der eine Funktion enthält, die aufgerufen wird, wenn eine Schaltfläche gedrückt wird. Ich weiß, wie man das aktive Objekt erhält, canvas.getActiveObject(), aber ich weiß nicht, wie man einfach einen Wert darin ändert, ohne eine Kopie zu machen und das Original zu löschen. Der Grund, warum ich nur das Original ändern möchte, ist, dass beim erneuten Drücken der Schaltfläche seltsame Dinge passieren. Irgendwelche Hinweise, wie man das machen kann?

Answer 1

Es gibt viele Getter und Setter für Werte:

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

Sie können auch Werte mit der allgemeinen Set-Methode ändern:

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

Wenn Sie Eigenschaften ändern, die Dimensionen oder Positionen beeinflussen, müssen Sie nach dem Ändern der Eigenschaft object.setCoords() aufrufen. Andernfalls ist der "Klickbereich" des Objekts falsch. Nach dem Ändern von Eigenschaften müssen Sie canvas.renderAll() aufrufen, um alle Objekte neu zu rendern.

Weitere Informationen finden Sie in der Dokumentation: fabricjs.com/docs/fabric.Object.html

Answer 2

Offenbar wurden Setter in der neuesten Version von Fabric.js entfernt (Verwendung von Version 2.7.0). Sie können die Eigenschaften jetzt einfach direkt am Objekt setzen:

// Setzen Sie Ihre neuen Eigenschaftswerte
object.width = val;
object.height = val;
object.strokeWidth = val;
object.left = val;
object.top = val;

// Markieren Sie dann das Objekt als "dirty" und rendern Sie die Leinwand:
object.dirty = true;
canvas.renderAll();

Alternativ können Sie alle Eigenschaften auf einmal mit der set-Methode an einem Objekt wie folgt setzen:

// Setzen Sie alle Eigenschaften auf einmal mit der set-Methode
object.set({ 
    width: val, 
    height: val,
    strokeWidth: val,
    left: val,
    top: val
});

// In diesem Fall markiert der Setter das Objekt als "dirty", so dass Sie nur renderAll aufrufen müssen
canvas.renderAll();