``Fabric.js`` 矩形居中缩放属性使用教程
发布日期 ： 2024-10-15 10:31:36 UTC
访问量： 10 次浏览
Fabric.js 居中缩放属性
在本文中，我们将看到如何使用FabricJS启用画布矩形的居中缩放。画布矩形意味着矩形可以移动并根据需求进行拉伸。此外，当涉及到初始描边颜色、高度、宽度、填充颜色或描边宽度时，可以自定义矩形。
为了实现这个目标，我们将使用一个名为FabricJS的JavaScript库。在导入这个库之后，我们将在 body 标签中创建一个包含矩形的画布块。在此之后，我们将使用FabricJS提供的 Canvas 和 Rectangle 实例化，并使用 centeredScaling 属性启用画布矩形的居中缩放，并在画布上渲染 Rect 如下所示。
语法：
fabric.Rect({
width: number,
height: number,
centeredScaling: boolean
});
参数：
此函数接受如上所述的三个参数，并如下所述进行描述：
width： 此参数定义矩形的宽度。height： 此参数定义矩形的高度。centeredScaling： 此参数定义是否启用或禁用居中缩放。
示例：
此示例使用FabricJS来启用如下所述的类似画布的矩形的居中缩放。在启用居中缩放后，尝试缩放对象，它将从所有边缩放。
<!DOCTYPE html>
<html>
<head>
<title>
Fabric.js Rect centeredScaling Property
</title>
<!-- Adding the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<div style="text-align: center;width: 600px;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<b>
Fabric.js Rect centeredScaling Property
</b>
</div>
<canvas id="canvas" width="600" height="200"
style="border:1px solid #000000">
</canvas>
<script>
// Initiate a Canvas instance
var canvas = new fabric.Canvas("canvas");
// Initiate a Rect instance
var rectangle = new fabric.Rect({
width: 200,
height: 100,
fill: '',
stroke: 'green',
strokeWidth: 3,
centeredScaling: true
});
// Render the Rect in canvas
canvas.add(rectangle);
canvas.centerObject(rectangle);
</script>
</body>
</html>
输出：
