我们可以通过创建fabric.Polygon的实例来创建一个Polygon对象。多边形对象的特征可以是由一组连接的直线段组成的任何闭合形状。由于它是 FabricJS 的基本元素之一，我们还可以通过应用角度、不透明度等属性轻松自定义它。为了以编程方式实现复制粘贴，我们需要使用 clone 方法。
语法
clone( callback: Object, propertiesToInclude: Array)
参数
Callback（可选）– 此参数是通过克隆调用的回调函数。
propertiesToInclude（可选） – 此参数包括我们希望包含在克隆画布实例中的任何其他属性。它必须是数组的形式。
示例 1：在多边形上以编程方式实现复制粘贴
让我们看一个代码示例，以了解如何以编程方式在多边形上实现复制粘贴。我们需要克隆正在复制的内容并将其添加到剪贴板，以便稍后粘贴。为此，我们在Copy()函数中使用了clone方法，该方法将克隆主动选择的对象并将其保存到剪贴板。此外，我们创建了一个 Paste() 函数，它将使用 canvas.add 将克隆对象添加到我们的画布中，在本例中是一个多边形。
Kerqu.Ai
专为电商设计的一站式AI创作平台
202 查看详情
Implementing copy paste programmatically on Polygon
You can select the object, click on copy and then click on paste button to see object duplication in action
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiating Copy function which copies // the object to clipboard function Copy() { canvas.getActiveObject().clone(function (cloned) { _clipboard = cloned; }); } // Initiating Paste function which pastes // the object to canvas, adds offset and // makes the object active function Paste() { _clipboard.clone(function (clonedObj) { canvas.discardActiveObject(); clonedObj.set({ left: clonedObj.left + 10, top: clonedObj.top + 10, evented: true, }); canvas.add(clonedObj); clipboard.top += 10; _clipboard.left += 10; canvas.setActiveObject(clonedObj); canvas.requestRenderAll(); }); } // Initiating a points array var points = [ { x: 30, y: 50 }, { x: 70, y: 50 }, { x: 0, y: 0 }, { x: 70, y: 0 }, ]; // Initiating a polygon object var polygon = new fabric.Polygon(points, { left: 100, top: 40, fill: "#1e90ff", strokeWidth: 4, stroke: "green", scaleX: 2, scaleY: 2, }); // Adding it to the canvas canvas.add(polygon);
示例 2：在 Circle 上以编程方式实现复制粘贴
让我们看一个代码示例，以了解如何使用 FabricJS 在圆上以编程方式实现复制粘贴。在本例中，我们启动了一个半径为 40 的圆而不是多边形对象，并将其添加到画布中。同样，Copy() 和 Paste() 函数可用于除 Polygon 之外的各种对象。
Implementing copy paste programmatically on Circle
You can select the object, click on copy and then click on paste button to see object duplication in action
// Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); // Initiating Copy function which copies // the object to clipboard function Copy() { canvas.getActiveObject().clone(function (cloned) { _clipboard = cloned; }); } // Initiating Paste function which pastes // the object to canvas, adds offset and // makes the object active function Paste() { _clipboard.clone(function (clonedObj) { canvas.discardActiveObject(); clonedObj.set({ left: clonedObj.left + 10, top: clonedObj.top + 10, evented: true, }); canvas.add(clonedObj); _clipboard.top += 10; _clipboard.left += 10; canvas.setActiveObject(clonedObj); canvas.requestRenderAll(); }); } // Initiating a circle object var circle = new fabric.Circle({ left: 100, top: 40, fill: "#1e90ff", radius: 40, strokeWidth: 4, stroke: "green", scaleX: 2, scaleY: 2, }); // Adding it to the canvas canvas.add(circle);
结论
在本教程中，我们使用两个示例来演示如何使用 FabricJS 以编程方式实现复制粘贴。
以上就是如何使用 FabricJS 以编程方式实现复制粘贴？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/829236.html
微信扫一扫 
支付宝扫一扫 
