数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 FabricJS 关闭多边形对象的缓存？
我们可以通过创建 fabric.Polygon 的实例来创建一个多边形对象。多边形对象可以由任何由一组连接的直线段组成的闭合形状来表示。由于它是 FabricJS 的基本元素之一，因此我们也可以通过应用角度、不透明度等属性轻松地对其进行自定义。
FabricJS 对象缓存在一个额外的画布上，以便在重用对象时节省时间。为了关闭多边形对象的缓存，我们使用 objectCaching 属性。
语法
new fabric.Polygon( points: Array, { objectCaching: Boolean }: Object )
参数
points − 此参数接受一个 Array，表示构成多边形对象的点的数组，其中每个点都是一个包含 x 和 y 的对象。
options（可选） − 此参数是一个 Object，它为我们的对象提供了额外的自定义选项。使用此参数，可以更改与多边形对象相关的原点、笔触宽度和许多其他属性，其中 objectCaching 是一个属性。
选项键
objectCaching − 此属性接受一个 Boolean 值，表示对象是否缓存在附加画布上。默认值为“true”。
示例 1：多边形对象的默认外观
让我们看一个代码示例，了解当 objectCaching 设置为“true”（默认值）时，多边形对象如何对事件做出反应。FabricJS 缓存对象以优化并允许对象快速绘制在画布上。
在这里，我们选择了选择和取消选择事件，以在用户选择或取消选择多边形对象时显示填充颜色的变化。由于 objectCaching 已开启，因此在选择或取消选择对象时不会有任何变化。
<!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 appearance of polygon object</h2>
<p>
You can select and deselect the object to see that the fill colour does not change
</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 polygon object
var polygon = new fabric.Polygon(
[
{ x: 0, y: 0 },
{ x: 0, y: 80 },
{ x: 80, y: 80 },
{ x: 80, y: 0 },
],
{
left: 100,
fill: "black",
stroke: "blue",
strokeWidth: 2,
scaleX: 2,
scaleY: 2,
}
);
// Add it to the canvas
canvas.add(polygon);
// Using the selected event
polygon.on("selected", () => {
polygon.fill = "blue";
canvas.renderAll();
});
// Using the deselected event
polygon.on("deselected", () => {
polygon.fill = "black";
canvas.renderAll();
});
</script>
</body>
</html>
示例 2：将 objectCaching 属性传递“false”值
让我们看一个代码示例，了解如何通过将 objectCaching 属性传递“false”值来阻止画布缓存多边形对象。在这里我们可以看到，由于 objectCaching 已关闭，因此选择和取消选择对象会更改其填充颜色。
<!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>Passing objectCaching property a “false” value</h2>
<p>
You can select and deselect the object to see that the fill colour changes
</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 polygon object
var polygon = new fabric.Polygon(
[
{ x: 0, y: 0 },
{ x: 0, y: 80 },
{ x: 80, y: 80 },
{ x: 80, y: 0 },
],
{
left: 100,
fill: "black",
stroke: "blue",
strokeWidth: 2,
scaleX: 2,
scaleY: 2,
objectCaching: false,
}
);
// Add it to the canvas
canvas.add(polygon);
// Using the selected event
polygon.on("selected", () => {
polygon.fill = "blue";
canvas.renderAll();
});
// Using the deselected event
polygon.on("deselected", () => {
polygon.fill = "black";
canvas.renderAll();
});
</script>
</body>
</html>
结论
在本教程中，我们使用两个简单的示例演示了如何使用 FabricJS 关闭多边形对象的缓存。
440 次查看
