ホームページ > 記事 > ウェブフロントエンド > FabricJS を使用して長方形のコントロールの角のサイズを設定するにはどうすればよいですか?
FabricJS を使用して長方形のコントロールの角のサイズを設定するにはどうすればよいですか?
- WBOY転載
- 2023-09-21 11:17:021167ブラウズ
このチュートリアルでは、コントロールの角のサイズを設定する方法を学習します。 FabricJSを使用した長方形。オブジェクトの角度を制御することで、拡大縮小や伸縮が可能になります。 または場所を変更します。
コントロール コーナーは、特定の機能を追加するなど、さまざまな方法でカスタマイズできます。 色を付けたり、サイズを変更したりできます。 CornerSize を使用してサイズを変更できます 属性。
構文
new fabric.Rect({ cornerSize: Number }: Object)パラメータ
オプション (オプション) - このパラメータは、四角形であるオブジェクトです。追加のカスタマイズを提供します。 。このパラメータを使用すると、cornerSize を属性として持つオブジェクトに関連する色、カーソル、ストローク幅、その他のプロパティを変更できます。
オプション キー
cornerSize - このプロパティは、操作を可能にする number を受け入れます。選択したオブジェクトの角のサイズを制御します。デフォルト値は 13 です。
コントロール コーナーのデフォルト サイズ
コントロール コーナーのデフォルトを説明するコード例を見てみましょう。サイズ 長方形のオブジェクトがアクティブに選択されている場合。<!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>Default size of the controlling corners</h2>
<p>Select the rectangle to see the default size of the 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: "#3b7a57",
});
// Add it to the canvas
canvas.add(rect);
</script>
</body>
</html>例 2
カスタム値を持つキーとして cornerSize を渡す
この例では、cornerSize プロパティをキーとして渡します値は 17 です。私たち 長方形のオブジェクトが配置されたときに、コントロールの角のサイズがどのように変化するかがわかります。 選ばれた。えええええ
以上がFabricJS を使用して長方形のコントロールの角のサイズを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はtutorialspoint.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。