数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用FabricJS锁定圆形的旋转？
在本教程中，我们将学习如何使用FabricJS锁定圆形的旋转。正如我们可以在画布上指定圆形对象的位 置、颜色、不透明度和尺寸一样，我们也可以指定是否希望它旋转。这可以通过使用`lockRotation`属性来完成。
语法
new fabric.Circle({ lockRotation : Boolean }: Object)参数
options (可选) − 此参数是一个对象，它为我们的圆形提供了额外的自定义。使用此参数，可以更改与`lockRotation`属性相关的对象的许多属性，例如颜色、光标、笔划宽度等。
选项键
lockRotation − 此属性接受一个布尔值。如果我们将其赋值为“true”，则对象的旋转将被锁定。
示例 1
画布中圆形对象的默认行为
让我们来看一个例子，了解当不使用`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>Locking the rotation of circle using FabricJS</h2>
<p>Select the object and try to rotate it by holding its controlling corner at the top. You can rotate it freely in both clockwise or anticlockwise direction. This is the default behavior. Here we have not used the <b>lockRotation</b> property, but by default, it is set to False. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
fill: "white",
radius: 50,
stroke: "black",
strokeWidth: 5
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>示例 2
将lockRotation作为键并赋值为'true'
在这个例子中，我们将看到如何使用`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>Locking the rotation of a circle using FabricJS</h2>
<p>Select the object and try to rotate it. Now you won't be able to rotate the circle, as we have set <b>lockRotation</b> to True. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
var circle = new fabric.Circle({
left: 115,
top: 50,
fill: "white",
radius: 50,
stroke: "black",
strokeWidth: 5,
lockRotation: true
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
更新于：2022年5月25日
255 次浏览
广告