FabricJS を使用してスケーリングするときに三角形のストローク幅を維持するにはどうすればよいですか?

このチュートリアルでは、FabricJS を使用してスケーリングするときに三角形のストローク幅を維持する方法を学びます。デフォルトでは、ストロークの幅はオブジェクトのスケール値に基づいて増減します。ただし、StrokeUniform プロパティを使用して、この動作を無効にすることができます。

構文

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

パラメータ

• オプション (オプション) - このパラメータは Object は、三角形に追加のカスタマイズを提供します。このパラメータを使用すると、色、カーソル、ストローク幅、その他多くのプロパティなどのオブジェクト関連のプロパティを変更できます。strikeUniform はオブジェクトのプロパティです。

< /ul>

オプション キー

• Stroke Unification - このプロパティは boolean 値を受け入れます。ストロークの幅をオブジェクトに合わせて拡大縮小するかどうかを指定します。デフォルト値は false です。

#例 1

オブジェクトをスケーリングするときのストローク幅のデフォルトの外観< /strong>

変更されたことを説明するコード例を見てみましょうスケーリングされる三角形オブジェクトのストローク幅のデフォルトの外観。

tripUniform プロパティを使用していないため、ストロークの幅もオブジェクトのスケーリングの影響を受けます。

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


// 启动画布实例
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(三角形);

ログイン後にコピー
例 2

strikeUniform 属性をキーとして渡す

この例では、

strikeUniform プロパティはキーとして渡され、True は値として渡されます。その結果、オブジェクトのスケーリングに応じてオブジェクトのストロークが増減することはなくなり、ストロークが常にストローク幅として入力された正確なピクセル サイズと一致するようになります。 えええええ

以上がFabricJS を使用してスケーリングするときに三角形のストローク幅を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。