ホームページ > 記事 > ウェブフロントエンド > FabricJS を使用してスケーリングするときに楕円のストローク幅を維持するにはどうすればよいですか?
FabricJS を使用してスケーリングするときに楕円のストローク幅を維持するにはどうすればよいですか?
- 王林転載
- 2023-08-30 19:25:111162ブラウズ
このチュートリアルでは、FabricJS を使用してスケーリングするときに楕円のストローク幅を維持する方法を学びます。デフォルトでは、ストロークの幅はオブジェクトのスケール値に基づいて増減します。ただし、StrokeUniform プロパティを使用して、この動作を無効にすることができます。
構文
new fabric.Ellipse({ strokeUniform: Boolean }: Object)パラメータ
オプション(オプション) - このパラメータは追加で提供されます。カスタムオブジェクトを楕円に追加します。このパラメータを使用すると、styleUniform がプロパティであるオブジェクトに関連付けられた色、カーソル、ストローク幅、およびその他の多くのプロパティを変更できます。
オプション キー
Stroke Unification - このプロパティはブール値を受け入れます。ストロークの幅をオブジェクトに合わせて拡大縮小するかどうかを指定します。デフォルト値は False です。
オブジェクトをスケーリングするときのストローク幅のデフォルトの外観
次の例では、スケーリングについて説明します。楕円オブジェクトのストローク幅。tripUniform プロパティを使用していないため、ストロークの幅もオブジェクトのスケーリングの影響を受けます。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2>How to maintain stroke width of Ellipse while scaling using FabricJS?</h2>
<p>Select the object and stretch it horizontally or vertically. Here the stroke width will get affected while scaling the object up or down. This is the default behavior. Here we have not used the <b>strokeUniform</b> property. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 215,
top: 100,
fill: "blue",
rx: 90,
ry: 50,
stroke: "#c154c1",
strokeWidth: 15,
});
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>例 2
StrokeUniform プロパティをキーとして渡す
この例では、を渡します。 StrokeUniform キーとしてのプロパティ。したがって、オブジェクトのスケールに応じてオブジェクトのストロークが増減することはなくなります。この例では、StrokeUniform プロパティに「true」の値が割り当てられており、ストロークがストローク幅として入力された正確なピクセル サイズと常に一致するようになります。 えええええ
以上がFabricJS を使用してスケーリングするときに楕円のストローク幅を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。