Wie kann die Strichstärke eines Dreiecks beim Skalieren mit FabricJS beibehalten werden?

In diesem Tutorial erfahren wir, wie man die Strichstärke eines Dreiecks beim Skalieren mit FabricJS beibehält. Standardmäßig erhöht oder verringert sich die Strichstärke basierend auf dem Skalierungswert des Objekts. Wir können dieses Verhalten jedoch deaktivieren, indem wir das Attribut StrokeUniform verwenden.

Syntax

new Fabric.Triangle({ strokeUniform: Boolean }: Object)

Parameter

• Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Dreieck zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie objektbezogene Eigenschaften wie Farbe, Cursor, Strichstärke und viele andere Eigenschaften ändern. strikeUniform ist eine Eigenschaft dieses Objekts.

< /ul>

Optionsschlüssel

• Stroke Uniform – Diese Eigenschaft akzeptiert einen Boolean-Wert, mit dem wir angeben können, ob die Strichbreite mit dem Objekt skaliert. Der Standardwert ist false.

Beispiel 1

Standarddarstellung der Strichstärke beim Skalieren eines Objekts< /strong>

Sehen wir uns ein Codebeispiel an, das die Standarddarstellung der Strichstärke eines dreieckigen Objekts beschreibt, das skaliert wird. Da wir das Attribut tripUniform nicht verwenden, wird die Strichbreite auch von der Skalierung des Objekts beeinflusst.

缩放对象时描边宽度的默认外观
选择三角形并尝试缩放它，可以看到缩放时描边宽度也发生变化


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

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

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

Beispiel 2

Übergabe des Attributs strikeUniform als Schlüssel

In diesem Beispiel übergeben wir das Attribut strikeUniform als Schlüssel und True als Wert. Dadurch nimmt der Strich des Objekts beim Skalieren des Objekts nicht mehr zu oder ab, wodurch sichergestellt wird, dass der Strich immer genau der Pixelgröße entspricht, die für die Strichbreite eingegeben wurde.

将 strokeUniform 属性作为键传递
选择三角形并尝试缩放它，看看我们在缩放时具有固定的描边宽度


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

// 初始化一个三角形对象
var triangle = new Fabric.Triangle({
左：105，
顶部：75，
宽度：90，
身高：80，
填写：“#ff878d”，
笔画: "#674846",
笔划宽度：5，
笔划统一：true，
});

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

Das obige ist der detaillierte Inhalt vonWie kann die Strichstärke eines Dreiecks beim Skalieren mit FabricJS beibehalten werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!