Wie stelle ich die Füllfarbe eines Dreiecks mit FabricJS ein?

In diesem Tutorial erfahren Sie, wie Sie das Erscheinungsbild eines Dreieckobjekts ändern, indem Sie seine Füllfarbe mit FabricJS ändern. 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 Attribut fill verwenden, mit dem wir die Farbe der Objektfüllung angeben können.

Syntax

new Fabric.Triangle({ fill: String }: Object)

Parameter

• Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie Eigenschaften ändern, die sich auf das Objekt beziehen, für das fill ein Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

< /ul>

Wahltaste

• fill – Diese Eigenschaft akzeptiert einen string, der es uns ermöglicht, die Füllfarbe des Objekts zu ändern. Der Standardwert ist rgb(0,0,0), was Schwarz ist.

Beispiel 1

< strong>Standardfüllfarbe von Dreiecksobjekten

Sehen wir uns ein Codebeispiel an, das uns die Standardfüllfarbe von Dreiecksobjekten in FabricJS zeigt. Wenn wir beim Erstellen des Dreiecksobjekts die Füllungseigenschaft vollständig überspringen, wird es mit der Füllfarbe schwarz gerendert.

< !DOCTYPE html>






三角形对象的默认填充颜色
可以看到三角形的默认填充颜色是黑色


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：60，
宽度：100，
身高：70，
笔画：“#507d2a”，
笔划宽度：5，
});

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

Nach dem Login kopieren

Beispiel 2

Übergabe des Attributs fill als Schlüssel

Wir können auch einen beliebigen Farbnamen oder RGBA-Wert für das Attribut fill angeben. In diesem Beispiel haben wir ihm einen „blauen“ Wert gegeben und die Füllfarbe entsprechend geändert.

将 fill 属性作为键传递
可以看到三角形的填充颜色是蓝色


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：60，
宽度：100，
身高：70，
笔画：“#507d2a”，
笔划宽度：5，
填充：“蓝色”，
});

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

Nach dem Login kopieren

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