ホームページ > 記事 > ウェブフロントエンド > FabricJS を使用して三角形の回転をロックするにはどうすればよいですか?
FabricJS を使用して三角形の回転をロックするにはどうすればよいですか?
- 王林転載
- 2023-09-18 13:21:10685ブラウズ
このチュートリアルでは、FabricJS を使用して三角形の回転をロックする方法を学びます。キャンバス内の三角形オブジェクトの位置、色、不透明度、サイズを指定できるのと同じように、回転するかどうかも指定できます。これは、lockRotation 属性を使用して実行できます。
構文
new fabric.Triangle({ lockRotation : Boolean }: Object)パラメータ
オプション (オプション) - このパラメータは Object 三角形に追加のカスタマイズを提供します。このパラメータを使用すると、色、カーソル、ストローク幅、および lockRotation プロパティに関連するオブジェクトのその他のプロパティを変更できます。
lockRotation - このプロパティは Boolean 値を受け入れます。 「true」値を指定すると、オブジェクトの回転がロックされます。
オプション キー
例 1
Canvas 内の Triangle オブジェクトのデフォルトの動作
将来のことを理解するためにコード例を見てみましょうlockRotation プロパティを使用する場合の三角形オブジェクトのデフォルトの動作。デフォルトでは、三角形オブジェクトを反時計回りまたは時計回りに回転できます。
<!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 behaviour of a Triangle object in the canvas</h2>
<p>You can select triangle and try rotating it to see the default behavior.</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 triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 70,
width: 90,
height: 80,
fill: "#746cc0",
stroke: "#967bb6",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>例 2
値が「true」のキーとして lockRotation を渡す
この例では、 lockRotation プロパティを使用して、三角形オブジェクトの回転機能を停止する方法を見ていきます。ご覧のとおり、三角形オブジェクトを回転しようとするとすぐに、許可されていないカーソルが表示されます。これは、回転操作が許可されなくなったことを意味します。
えええええ以上がFabricJS を使用して三角形の回転をロックするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。