数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 FabricJS 锁定圆形的垂直缩放？
在本教程中，我们将学习如何使用 FabricJS 锁定圆形的垂直缩放。就像我们可以在画布上指定圆形对象的的位置、颜色、不透明度和尺寸一样，我们还可以指定是否要停止对象的垂直缩放。这可以通过使用 `lockScalingY` 属性来实现。
语法
new fabric.Circle({ lockScalingY : Boolean }: Object)参数
options（可选） − 此参数是一个对象，它为我们的圆形提供了额外的自定义选项。使用此参数，可以更改与对象相关的许多属性，例如颜色、光标、描边宽度等等，其中 `lockScalingY` 是一个属性。
选项键
lockScalingY − 此属性接受一个布尔值。如果我们将其赋值为“true”，则对象的垂直缩放将被锁定。
示例 1
画布中圆形对象的默认行为
让我们看一个例子来了解当不使用 `lockScalingY` 属性时圆形对象的默认行为。在水平和垂直方向上缩放对象是可行的。
<!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 vertical scaling of circle using FabricJS</h2>
<p>You can select the circle and scale it freely in any direction. This is the default behavior. Here we have not used the <b>lockScalingY</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
将 `lockScalingY` 作为键并传递值为 'true'
在本例中，我们将看到如何使用 `lockScalingY` 属性停止圆形对象垂直缩放的能力。正如我们所看到的，尽管我们可以水平缩放圆形对象，但我们不允许垂直执行相同的操作。
<!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 vertical scaling of circle using FabricJS</h2>
<p>Select the object and try to scale it by stretching its controlling corners. You will notice that the object can be scaled in the horizontal direction, but its vertical scaling is locked. Here we have set <b>lockScalingY</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,
lockScalingY: true
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
更新于： 2022年5月25日
126 次查看
广告