このチュートリアルでは、FabricJS を使用して三角形の X 軸の傾斜角を設定する方法を学びます。三角形は、FabricJS によって提供されるさまざまな形状の 1 つです。三角形を作成するには、fabric.Triangle クラスのインスタンスを作成し、それをキャンバスに追加する必要があります。
三角形オブジェクトのサイズを変更したり、背景色を追加したり、X 軸の傾斜角度を変更したりして、三角形オブジェクトをカスタマイズできます。これは、skewX 属性を使用して実現できます。
new Fabric.Triangle({ skewX: Number }: Object ) オプション (オプションのオプション)< ;/strong> - このパラメータは、三角形をさらにカスタマイズするためのオプションを提供する オブジェクト です。このパラメータを使用すると、オブジェクトの色、カーソル、ストローク幅、および skewX プロパティに関連するその他の多くのプロパティを変更できます。
skewX -このプロパティは、x 軸に沿ったオブジェクトの傾斜角度を決定する number 値を受け入れます。
skewX属性を適用しない場合
< ;p> コード例を見て、skewX プロパティが適用されていないときに三角形オブジェクトがどのように見えるかを見てみましょう。この場合、三角形のオブジェクトはどの角度にも傾きません。<!DOCTYPE html>
<html> の中国語訳は次のとおりです: <html>
<head> の中国語訳は次のとおりです。
<!-- Fabric JS ライブラリを追加 -->
<スクリプト src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head> の中国語訳は次のとおりです: </head>
<body> の中国語訳は次のとおりです。
<h2>skewX属性が適用されていない場合</h2>
<p>デフォルトでは、三角形がいかなる角度にも傾いていないことがわかります</p>
<canvas id="canvas"></canvas>
<script> の中国語訳は次のとおりです: <script>
// キャンバスインスタンスを初期化します
var Canvas = 新しい生地.Canvas("canvas");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
// 三角形オブジェクトを初期化します
var三角 = 新しい生地.Triangle({
左: 120、
トップ：70、
幅: 90、
身長：80、
記入: "#b7410e"，
ストローク: "#f5deb3",
(注: これは HTML コードの一部であり、 はスペースを表します)
ストローク幅: 7、
});
//キャンバスに追加します
Canvas.add(三角形);
</スクリプト>
</body> の中国語訳は次のとおりです: </body>
</html>skewX をキーとして配置し、カスタム値を割り当てます。
この例では、skewX プロパティに数値を割り当てる方法を示します。渡された値によって、X 軸に沿った傾斜の度合いが決まります。
<!DOCTYPE html>
<html> の中国語訳は次のとおりです: <html>
<head> の中国語訳は次のとおりです。
<!-- Fabric JS ライブラリを追加 -->
<スクリプト src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head> の中国語訳は次のとおりです: </head>
<body> の中国語訳は次のとおりです。
<h2>skewX をキーとして渡し、それにカスタム値を割り当てます</h2>
<p>三角形が X 軸上で 50 度の角度で傾いていることがわかります</p>
<canvas id="canvas"></canvas>
<script> の中国語訳は次のとおりです: <script>
// キャンバスインスタンスを初期化します
var Canvas = 新しい生地.Canvas("canvas");
Canvas.setWidth(document.body.scrollWidth);
Canvas.setHeight(250);
// 三角形オブジェクトを初期化します
var三角 = 新しい生地.Triangle({
左: 120、
トップ：70、
幅: 90、
身長：80、
記入: "#b7410e"，
ストローク: "#f5deb3",
(注: これは HTML コードの一部であり、 はスペースを表します)
ストローク幅: 7、
スキューX: 50、
});
//キャンバスに追加します
Canvas.add(三角形);
</スクリプト>
</body> の中国語訳は次のとおりです: </body>
</html>