Wie lege ich die Hintergrundfarbe der Dreiecksauswahl mit FabricJS fest?

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS die Hintergrundfarbe einer Dreiecksauswahl 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 die Größe des Objekts ändern, es drehen oder es bearbeiten, wenn es aktiv ausgewählt ist. Wir können die Eigenschaft selectionBackgroundColor verwenden, um die Hintergrundfarbe der Dreiecksauswahl zu ändern.

Syntax

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

Parameter

• Optionen< /strong> (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, dessen selectionBackgroundColor ein Attribut ist, wie z. B. Farbe, Cursor, Strichstärke und viele andere Eigenschaften.

< /ul>

Optionsschlüssel

• selectionBackgroundColor – Diese Eigenschaft akzeptiert einen String-Wert. Der zugewiesene Wert bestimmt die Hintergrundfarbe der Auswahl.

Beispiel 1

selectionBackgroundColor Standardfarbe, wenn die em>Eigenschaft nicht verwendet wird

Sehen wir uns ein Codebeispiel an, um zu sehen, wie die Auswahl angezeigt wird, wenn die selectionBackgroundColorEigenschaft nicht verwendet wird. Anhand dieses Beispiels können wir erkennen, dass der Auswahlbereich bzw. der Bereich hinter dem Objekt keine Farbe hat.

不使用selectionBackgroundColor属性时的默认颜色
可以选择三角形，可以看到选择区域没有颜色。


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：180，
顶部：70，
宽度：90，
身高：80，
填写：“#228b22”，
笔画：“#d8e4bc”，
笔画宽度：7，
填充：30，
});

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

Nach dem Login kopieren

Beispiel 2

Übergabe der Eigenschaft selectionBackgroundColor als Schlüssel

In diesem Beispiel weisen wir der Eigenschaft selectionBackgroundColor einen Wert zu. In diesem Fall haben wir ihm den Hexadezimalwert „da70d6“ übergeben, der Magenta ist, sodass der Auswahlbereich in dieser Farbe aussieht.

将selectionBackgroundColor属性作为键传递
您可以选择三角形以查看选择区域现在具有洋红色


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：180，
顶部：70，
宽度：90，
身高：80，
填写：“#228b22”，
笔画：“#d8e4bc”，
笔画宽度：7，
填充：30，
选择背景颜色：“#da70d6”，
});

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie lege ich die Hintergrundfarbe der Dreiecksauswahl mit FabricJS fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!