ホームページ > 記事 > ウェブフロントエンド > FabricJS を使用して円にストロークを追加するにはどうすればよいですか?
FabricJS を使用して円にストロークを追加するにはどうすればよいですか?
- PHPz転載
- 2023-08-24 17:57:131106ブラウズ
このチュートリアルでは、FabricJS を使用して ストローク を円に追加する方法を学びます。円は、FabricJS が提供するさまざまな形状の 1 つです。円を作成するには、Fabric.Circle クラスのインスタンスを作成し、キャンバスに追加します。円オブジェクトは、寸法の変更、背景色の追加、オブジェクトの周囲に描かれた線の色の変更など、さまざまな方法でカスタマイズできます。これは、ストローク プロパティを使用して行うことができます。
構文
new fabric.Circle({ stroke : String }: Object)パラメータ
オプション (オプション) - このパラメータは Object サークルに追加のカスタマイズを提供します。このパラメータを使用すると、色、カーソル、ストローク幅などのプロパティや、Stroke が属性であるオブジェクトに関連付けられたその他の多くのプロパティを変更できます。
ul>#オプション キー
Stroke - このプロパティは String を受け入れますそして、オブジェクトの境界線の色を決定します。
キーに 16 進値が含まれるとして ストローク を渡す
見てみましょう例では、lines プロパティを使用したときに円形のオブジェクトがどのように表示されるかを確認します。 16 進数のカラー コードは「#」で始まり、その後に色を表す 6 桁の数字が続きます。この例では、オレンジがかった赤の「#ff4500」を使用しました。
<!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>Adding stroke to a circle using FabricJS</h2>
<p>Notice the orange-red outline around the circle. It appears as we have applied the <b>stroke</b> property and assigned it a hexadecimal color code. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 50,
top: 90,
radius: 50,
fill: "#4169e1",
stroke: "#ff4500",
strokeWidth: 5
});
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>例 2
「rgba」値を lines 属性に渡す
この例では、代入方法を理解します。 rgba 値をストローク属性に設定します。 16 進数のカラー コードの代わりに、赤、青、緑、アルファを表すRGBA 値を使用できます。 alpha パラメーターは、色の不透明度を指定します。この例では、rgba 値 (255,69,0,0.5) を使用しました。これは、不透明度 0.5 のオレンジがかった赤色です。 えええええ
以上がFabricJS を使用して円にストロークを追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。