ホームページ > 記事 > ウェブフロントエンド > FabricJS でスケーリングするときに長方形のストローク幅を維持するにはどうすればよいですか?
FabricJS でスケーリングするときに長方形のストローク幅を維持するにはどうすればよいですか?
- WBOY転載
- 2023-08-23 08:57:291039ブラウズ
このチュートリアルでは、FabricJS を使用してスケーリングするときに長方形のストローク幅を維持する方法を学びます。デフォルトでは、ストロークの幅はオブジェクトのスケール値に基づいて増減します。ただし、ストロークUniform プロパティを使用して、この動作を無効にすることができます。
構文
new Fabric.Rect({ ストロークユニフォーム: Boolean }: Object)パラメータ< ;/ h2>オプション (オプション)- このパラメータは、四角形の定義に追加のカスタマイズを提供するオブジェクトです。このパラメータを使用すると、色、カーソル、ストローク幅、および ストロークUniform プロパティに関連するその他の多くのプロパティを変更できます。
オプションキー
ストローク均一 Strong>- このプロパティは ブール値 を受け入れ、ストロークの幅がオブジェクトに合わせて拡大縮小されるかどうかを指定できます。デフォルト値は false です。
例 1
オプション (オプション)- このパラメータは、四角形の定義に追加のカスタマイズを提供するオブジェクトです。このパラメータを使用すると、色、カーソル、ストローク幅、および ストロークUniform プロパティに関連するその他の多くのプロパティを変更できます。
ストローク均一 Strong>- このプロパティは ブール値 を受け入れ、ストロークの幅がオブジェクトに合わせて拡大縮小されるかどうかを指定できます。デフォルト値は false です。
オブジェクトをスケーリングするときのストローク幅のデフォルトの外観
スケーリングされる長方形オブジェクトのストローク幅のデフォルトの外観を説明するコード例を見てみましょう。 ストロークUniform プロパティを使用していないため、ストロークの幅もオブジェクトのスケーリングの影響を受けます。
<!DOCTYPE html>
<html> の中国語訳は次のとおりです: <html>
<頭>
<!-- Fabric JS ライブラリを追加 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head> の中国語訳は次のとおりです: </head>
<body> の中国語訳は次のとおりです。
<h2>オブジェクトをスケーリングするときのストローク幅のデフォルトの外観</h2>
<p>デフォルトの動作を確認するためにオブジェクトをスケーリングしてみてください</p>
<canvas id="canvas"></canvas>
<script> の中国語訳は次のとおりです: <script>
// キャンバスインスタンスを初期化します
var Canvas = 新しい生地.Canvas("canvas");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
// 長方形オブジェクトを初期化します
var rect = 新しいファブリック.Rect({
左: 55、
トップ：90、
幅: 170、
身長: 70、
fill: "#ccccff" の中国語訳は次のようになります: fill: "#ccccff",
パディング: 9、
ストローク: "#483d8b"、
ストローク幅: 5、
});
//キャンバスに追加します
Canvas.add(rect);
</スクリプト>
</body> の中国語訳は次のとおりです: </body>
</html>例
ストロークUniformプロパティをキーとして渡す
この例では、ストロークUniformプロパティをキーとして渡し、trueを値として渡します。 したがって、オブジェクトのストロークは増加または減少しなくなりました。 オブジェクトのスケーリングにより、ストロークが常にピクセル サイズと正確に一致するようになります。 入力内容は次のとおりです。ストローク幅を入力します。
<!DOCTYPE html>
<html> の中国語訳は次のとおりです: <html>
<頭>
<!-- Fabric JS ライブラリを追加 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head> の中国語訳は次のとおりです: </head>
<body> の中国語訳は次のとおりです。
<h2>ストロークUniformプロパティをキーとして渡します</h2>
<p>オブジェクトを拡大縮小して、ストロークが均一な幅のままであることを確認してください</p>
<canvas id="canvas"></canvas>
<script> の中国語訳は次のとおりです: <script>
// キャンバスインスタンスを初期化します
var Canvas = 新しい生地.Canvas("canvas");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
// 長方形オブジェクトを初期化します
var rect = 新しいファブリック.Rect({
左: 55、
トップ：90、
幅: 170、
身長: 70、
fill: "#ccccff" の中国語訳は次のようになります: fill: "#ccccff",
パディング: 9、
ストローク: "#483d8b"、
ストローク幅: 5、
ストローク均一: true、
});
//キャンバスに追加します
Canvas.add(rect);
</スクリプト>
</body> の中国語訳は次のとおりです: </body>
</html> の翻訳は次のとおりです: 以上がFabricJS でスケーリングするときに長方形のストローク幅を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。