ホームページ > 記事 > ウェブフロントエンド > FabricJS を使用して長方形のコントロールの角の色を設定するにはどうすればよいですか?
FabricJS を使用して長方形のコントロールの角の色を設定するにはどうすればよいですか?
- 王林転載
- 2023-09-11 12:01:221477ブラウズ
このチュートリアルでは、FabricJS を使用して四角形のコントロールの角の色を設定します。 cornerColor プロパティを使用すると、オブジェクトがアクティブなときにコントロールのコーナーの色を操作できます。
構文
new fabric.Rect({ cornerColor: String }: Object)パラメータ
オプション (オプション) - このパラメータは、四角形であるオブジェクトです。追加のカスタマイズを提供します。 。このパラメータを使用すると、cornerColor を属性として持つオブジェクトに関連する色、カーソル、ストローク幅、その他のプロパティを変更できます。
オプション キー
cornerColor - このプロパティは、コントロールを可能にする String を受け入れます。オブジェクトをアクティブに選択するときに隅に色を割り当てる。デフォルト値は rgb(178,204,255) です。
例 1
cornerColor をキーとして渡し、色を値として渡します
見てみましょうCornerColor プロパティを使用して色を変更するコード例。存在する この場合、値「green」をキーに割り当てます。 コントロールの角が緑色に表示されます。
<!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>Passing cornerColor as key with a color name as value</h2>
<p>Select the rectangle to see the colour of its controlling corners</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
cornerColor: "green",
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>例 2
単純な色名を # として渡す代わりに、RGBA 値を cornerColor 属性
に割り当てます。 # #String 値をキーに割り当てると、RGBA 値を割り当てることもできます。 RGBA は、赤、緑、青、アルファを表し、アルファは不透明度を表します。これを行う方法を示すコード例を見てみましょう:
<!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>Assigning an RGBA value to the cornerColor property</h2>
<p>Select the rectangle to see the colour of its controlling corners</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a rectangle object
var rect = new fabric.Rect({
left: 125,
top: 90,
width: 170,
height: 70,
fill: "#cf1020",
borderColor: "black",
borderScaleFactor: 3,
cornerColor: "rgba(34,139,34,0.9)",
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>以上がFabricJS を使用して長方形のコントロールの角の色を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。