FabricJS を使用してスケーリングするときに楕円のストローク幅を維持するにはどうすればよいですか?-jsチュートリアル-php.cn

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

王林

リリース： 2023-08-30 19:25:11

転載

1188 人が閲覧しました

如何在使用 FabricJS 缩放时保持椭圆的笔划宽度？

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

構文

new fabric.Ellipse({ strokeUniform: Boolean }: Object)

ログイン後にコピー

パラメータ

オプション(オプション) - このパラメータは追加で提供されます。カスタムオブジェクトを楕円に追加します。このパラメータを使用すると、styleUniform がプロパティであるオブジェクトに関連付けられた色、カーソル、ストローク幅、およびその他の多くのプロパティを変更できます。

オプションキー

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

#例 1

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

次の例では、スケーリングについて説明します。楕円オブジェクトのストローク幅。
tripUniform プロパティを使用していないため、ストロークの幅もオブジェクトのスケーリングの影響を受けます。
<!DOCTYPE html> <html> <head>  <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 サイトの他の関連記事を参照してください。