数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 FabricJS 设置椭圆的最小允许缩放值？
在本教程中，我们将学习如何使用 FabricJS 设置椭圆的最小允许缩放比例。椭圆是 FabricJS 提供的各种形状之一。为了创建椭圆，我们将创建 fabric.Ellipse 类的实例并将其添加到画布中。我们可以通过添加填充颜色、消除边框甚至更改其尺寸来自定义椭圆对象。类似地，我们还可以使用 minScaleLimit 属性设置其最小允许缩放比例。
语法
new fabric.Ellipse({ minScaleLimit : Number }: Object)参数
options (可选) - 此参数是一个 对象，它为我们的椭圆提供了额外的自定义选项。使用此参数，可以更改与对象的许多属性相关联的颜色、光标、边框宽度以及其他许多属性，其中 minScaleLimit 就是一个属性。
选项键
minScaleLimit - 此属性接受一个 数字 作为值，允许我们控制椭圆的最小允许缩放比例。
示例 1
椭圆对象的默认外观
让我们来看一个示例，了解当不使用 minScaleLimit 属性时，我们的椭圆对象是什么样的。在这种情况下，我们将能够自由地缩放我们的对象，因为没有设置最小限制。
<!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>How to set the minimum allowed scale value of Ellipse using FabricJS?</h2>
<p>Here you can select the object and scale it up freely to any extent, as we have not used the <b>minScaleLimit</b> property. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
rx: 80,
ry: 50,
fill: "#ff1493",
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>示例 2
将 minScaleLimit 属性作为键并带有自定义值传递
在本例中，我们将看到将值分配给 minScaleLimit 属性如何更改画布中椭圆对象的最小允许缩放值。这里我们使用了 0.8 作为值，这意味着我们将无法将对象缩小到小于 64px 的水平半径和 40px 的垂直半径，这是通过 **半径 * 限制** 计算出来的 (0.8 * 80 = 64px，0.8 * 50 = 40px)。
<!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>How to set the minimum allowed scale value of Ellipse using FabricJS?</h2>
<p>Select the object and try to scale it down. Here we have set the <b>minScaleLimit</b> to 0.8 beyond which the ellipse cannot be reduced further in size. </p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate an ellipse instance
var ellipse = new fabric.Ellipse({
left: 115,
top: 50,
rx: 80,
ry: 50,
fill: "#ff1493",
minScaleLimit: 0.8,
});
// Adding it to the canvas
canvas.add(ellipse);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
更新于: 2022年5月25日
96 次浏览
广告