Wie stelle ich die Deckkraft eines Dreiecks mit FabricJS ein?

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Deckkraft eines Dreiecks festlegen. Dreieck ist eine der verschiedenen Formen, die FabricJS bereitstellt. Um ein Dreieck zu erstellen, müssen wir eine Instanz der Fabric.Triangle-Klasse erstellen und sie der Leinwand hinzufügen. Wir können das Dreiecksobjekt anpassen, indem wir eine Füllfarbe hinzufügen, seine Ränder entfernen und sogar seine Abmessungen ändern. Ebenso können wir die Eigenschaft opacity verwenden, um ihre Deckkraft zu ändern.

Syntax

new Fabric.Triangle({ opacity: Number }: Object)

Parameter

• Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie die Farbe, den Cursor, die Rahmenbreite und viele andere Eigenschaften ändern, die sich auf Objekte beziehen, deren Deckkraft ein Attribut ist.

Optionsschlüssel

• Deckkraft− Diese Eigenschaft akzeptiert eine Zahl als Wert, mit dem wir die Deckkraft des Objekts steuern können. Der Standardwert des Opazitätsattributs ist 1.

Beispiel 1

Standardaussehen eines Triangle-Objekts

Sehen wir uns ein Codebeispiel an, um zu sehen, wie unser Triangle-Objekt aussieht, wenn der Standardwert der Eigenschaft opacity verwendet wird. Wir werden keinen Deckkraftschlüssel an die Klasse übergeben, wie im folgenden Beispiel gezeigt –

三角形对象的默认外观
请注意，三角形是完全不透明的。


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：70，
宽度：90，
身高：80，
填写：“#746cc0”，
笔画：“#967bb6”，
笔划宽度：5，
});

// 将其添加到画布中
canvas.add(三角形);

Beispiel 2

Übergabe der opacity-Eigenschaft als Schlüssel

In diesem Beispiel sehen wir, wie eine opacity-Eigenschaft zugewiesen wird Der Wert ändert die Deckkraft des Dreiecksobjekts auf der Leinwand. Hier verwenden wir 0,3 als Deckkraft, wodurch unser Dreiecksobjekt halbtransparent statt völlig undurchsichtig aussieht.

将不透明度属性作为键传递
你可以看到我们的三角形并不是完全不透明


// 启动画布实例
var canvas = new Fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
画布.setHeight(250);

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：70，
宽度：90，
身高：80，
填写：“#746cc0”，
笔画：“#967bb6”，
笔划宽度：5，
不透明度：0.3，
});

// 将其添加到画布中
canvas.add(三角形);

Das obige ist der detaillierte Inhalt vonWie stelle ich die Deckkraft eines Dreiecks mit FabricJS ein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!