Fabric.js 复制粘贴元素

这篇具有很好参考价值的文章主要介绍了Fabric.js 复制粘贴元素。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文简介

点赞 + 关注 + 收藏 = 学会了


当你要复制一个 fabric 的元素时,你考虑到的是什么?是深拷贝当前选中对象再添加到画布中?


其实,fabric.js 提供了一个克隆方法,在 fabric.js 官网的案例里也有这个demo:Fabric.js demos · Copy and Paste。

这次就讲讲这个 demo。

Fabric.js 复制粘贴元素,前端



实现思路

动手之前,我们先理清思路。

  1. 要复制元素,首先就得有元素,所以我们在页面创建一些元素(好像再讲废话)。
  2. 复制前,肯定需要有被复制的目标,我们可以使用 canvas.getActiveObject() 方法获取当前被选中的元素。
  3. 复制时,可以使用 clone() 方法,将当前选中的元素对象克隆出来。
  4. 粘贴时,使用 canvas.add() 方法将克隆出来的元素添加到画布中。

当然,实际开发中还有很多需要注意的小点,比如选中一个组的时候要怎么复制粘贴?框选一堆元素时要怎么复制粘贴?

这些问题后面都会讲到,我们先学习如何复制1个元素。



动手编码

理解了前面的思路就能动手了!


复制单个元素

Fabric.js 复制粘贴元素,前端

<div>
    <button οnclick="copy()">复制</button>
    <button οnclick="paste()">粘贴</button>
  </div>
  <canvas id="c" width="500" height="400" style="border: 1px solid #ccc;"></canvas>

<script src="https://unpkg.com/fabric@5.3.0/dist/fabric.min.js"></script>
<script>
const canvas = new fabric.Canvas('c')

let rect = new fabric.Rect({
  left: 100,
  top: 50,
  fill: '#D81B60',
  width: 100,
  height: 100,
  strokeWidth: 2,
  stroke: '#880E4F',
  rx: 10,
  ry: 10,
  angle: 45
})

canvas.add(rect)

// 克隆对象
let _clipboard = null

// 复制
function copy() {
  // 要复制的目标元素
  let target = canvas.getActiveObject()
  // 有选中的元素时才进行克隆
  if (target) {
    target.clone(function(cloned) {
      _clipboard = cloned // 将克隆出来的元素赋值给 _clipboard
    })
  }
}

// 粘贴
function paste() {
  // 如果克隆对象不存在的话就终止粘贴执行
  if (!_clipboard) return

  // 执行粘贴操作,将克隆出来的对象再克隆一遍,然后添加到画布中。
  _clipboard.clone(function(clonedObj) {
    // 适当的位移
    clonedObj.set({
      left: clonedObj.left + 10,
      top: clonedObj.top + 10,
      evented: true, // 当设置为“ false”时,对象不能成为事件的目标。所有事件都会通过它传播。
    })

    canvas.add(clonedObj) // 将克隆的元素添加到画布中

    // 修改克隆对象的位置,以便多次粘贴时更容易观察
    _clipboard.top += 10
    _clipboard.left += 10

    // 将当前选中项修改到新克隆到画布的元素上
    canvas.setActiveObject(clonedObj)

    // 刷新画布
    canvas.requestRenderAll()
  })
}
</script>

首先在页面中创建2个按钮和1个画布,在画布中创建一个元素。

JS 部分需要创建一个变量保存克隆对象,这个变量叫 _clipboard

在执行复制操作时要判断当前是否选中元素对象。

在执行粘贴操作时要判断当前是否克隆了元素对象。


复制组

其实复制组和复制单个元素时一样的。也是需要获取当前选中的对象,组可以看作是一个元素对象。

代码和上面的一样,只需把单个元素换成组即可,我引用 fabric.js 官网的 demo

Fabric.js 复制粘贴元素,前端

// 省略部分代码

let circle1 = new fabric.Circle({
  radius: 65,
  fill: '#039BE5',
  left: 0
})

let circle2 = new fabric.Circle({
  radius: 65,
  fill: '#4FC3F7',
  left: 110,
  opacity: 0.7
})

let group = new fabric.Group([circle1, circle2, ], {
  left: 40,
  top: 250
})

canvas.add(group)

加上前面的复制粘贴代码即可。


复制框选的元素

复制框选元素的操作会相对复杂一丢丢,但也只是一丢丢而已。

Fabric.js 复制粘贴元素,前端

因为选中的不止一个元素,所以在粘贴的时候要遍历所有元素出来,用到 fabric.js 提供的 forEachObject 方法。

// 省略部分代码

// 粘贴
function paste() {
  // 如果克隆对象不存在的话就终止粘贴执行
  if (!_clipboard) return

  _clipboard.clone(function(clonedObj) {
    // 适当的位移
    clonedObj.set({
      left: clonedObj.left + 10,
      top: clonedObj.top + 10,
      evented: true
    })

    // 遍历粘贴所有选中的元素
    clonedObj.canvas = canvas
    clonedObj.forEachObject(function(obj) {
      canvas.add(obj)
    })
    clonedObj.setCoords()

    // 适当的位移
    _clipboard.top += 10
    _clipboard.left += 10

    // 将新粘贴出来的元素全部选中
    canvas.setActiveObject(clonedObj)
  })
}

最后需要做的就是兼容选中单个元素或者框选多个元素的情况。

获取到当前选中对象后有个 type 属性,当框选多个元素时,type 的值会变成 activeSelection ,我们就可以通过这个来判断当前是选中单个元素还是框选了多个元素。

// 省略部分代码

// 粘贴
function paste() {
  // 如果克隆对象不存在的话就终止粘贴执行
  if (!_clipboard) return

  _clipboard.clone(function(clonedObj) {
    // 适当的位移
    clonedObj.set({
      left: clonedObj.left + 10,
      top: clonedObj.top + 10,
      evented: true
    })

    if (clonedObj.type === 'activeSelection') {
      // 框选了多个元素
      // 遍历粘贴所有选中的元素
      clonedObj.canvas = canvas
      clonedObj.forEachObject(function(obj) {
        canvas.add(obj)
      })
      clonedObj.setCoords()
    } else {
      // 选中一个元素
      canvas.add(clonedObj)
      _clipboard.top += 10
      _clipboard.left += 10
    }

    // 适当的位移
    _clipboard.top += 10
    _clipboard.left += 10

    // 将新粘贴出来的元素全部选中
    canvas.setActiveObject(clonedObj)
    // 刷新画布
    canvas.requestRenderAll()
  })
}

除了上面的鼠标操作外,我们还可以通过监听键盘的 ctrl + cctrl + v(mac监听 command) 来实现上面的效果。

这部分工作留给工友去实现吧,我先溜了。



代码仓库

本文完整代码可通过下方链接获取。

⭐ 复制粘贴元素



推荐阅读

👍《Fabric.js 从入门到_ _ _ _ _ _》

👍《Fabric.js 拖拽顶点修改多边形形状》

👍《Fabric.js 讲解官方demo:Stickman》

👍《Fabric.js 自定义控件》

👍《Fabric.js 样式不更新怎么办?》

👍《Fabric.js 图案画笔(笔刷)》


点赞 + 关注 + 收藏 = 学会了 代码仓库文章来源地址https://www.toymoban.com/news/detail-718682.html

到了这里,关于Fabric.js 复制粘贴元素的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端开发过程中,经常遇到复制粘贴后自动空白一行,该如何解决这个问题哪?

    在前端开发中,我们经常会遇到复制粘贴的需求,不论是从其他地方复制代码还是从网上找到的资料,都需要进行粘贴操作。但是,在进行粘贴操作时,很容易出现一个问题:自动添加空白行。这种情况下,如果不处理,就会影响页面的美观和性能,甚至会导致代码无法正常

    2024年02月04日
    浏览(66)
  • fabric.js 实现元素拖拽、引入图片、标注交互

    by:垃圾程序员 特别鸣谢:拿只键盘出来绣花的德育处主任,他的系列文章给了我很大的帮助。该说不说,站在前人的肩膀上就是得劲。 德育处主任 - 知乎 拿只键盘出来绣花 回答数 7,获得 143 次赞同 https://www.zhihu.com/people/rabbit-svip fabric.js 是一个用于创建可交互式的 HTML5

    2024年04月12日
    浏览(44)
  • vue elementui 实现从excel从复制多行多列后粘贴到前端界面el-table

    可以全部复制粘贴,也可以单独对某行、某列进行复制粘贴 从excel复制粘贴到前端页面的table上 html部分: js部分:

    2024年02月04日
    浏览(56)
  • WPF 复制粘贴到系统粘贴板

    复制或剪切文件到剪切板 复制文本 保存图片 转BitmapImage 转System.Drawing.Image

    2024年02月16日
    浏览(38)
  • 怎样处理服务器无法复制粘贴问题?服务器不能复制粘贴怎么办?

    我们经常需要在服务器上进行一些操作,如复制粘贴文件、修改配置等等。但有时候我们会遇到服务器无法使用复制粘贴功能的问题,这时该怎么办呢?以下是一些解决方法。   1.检查RDP剪贴板功能是否开启 在远程桌面连接(RDP)中,需要开启剪贴板功能才能进行复制粘贴操

    2024年02月12日
    浏览(47)
  • 安卓:实现复制粘贴功能

    目录 一、介绍 (一)ClipboardManager介绍 1、ClipboardManager常用方法: 2、获取 ClipboardManager实例 (二)、ClipData介绍 1、创建ClipData对象: 2、获取ClipData的信息: 3、ClipData.Item对象: 二、 例子 复制粘贴的辅助类ClipboardHelper :   MainActivity:  activity_main:  运行结果:     Cli

    2024年02月07日
    浏览(37)
  • 复制粘贴是怎么实现的

    在上面的代码中,command 和 select 是自定义的函数。它们的作用如下: 实现复制粘贴的思路: 创建一个 textarea 标签 将 textarea 移出可视区域 给这个 textarea 赋值 将这个 textarea 标签添加到页面中 调用 textarea 的 select 方法 调用 document.execCommand(‘copy’) 删除 textarea 标签 实现代码

    2024年02月09日
    浏览(36)
  • 电脑怎么快捷复制粘贴发送?

    电脑上在操作快捷复制及粘贴时,大家可以使用的方法是Ctrl+C和Ctrl+V,这是电脑常用的复制粘贴快捷键,很多经常使用电脑办公的人群应该都不陌生,且多数人也认为这是一种比较快捷复制粘贴的方法。 针对一些文件、图片,直接使用电脑快捷键确实方便,但是如果想要从大

    2024年02月12日
    浏览(45)
  • Microsoft Access复制粘贴异常

    一、问题:win11安装Microsoft Office后,使用Microsoft Access程序复制功能异常。 具体如下: 1、点击复制按钮(按钮颜色正常,可以使用)或剪贴一个字段内容到另一个字段中,结果Microsoft Access的剪贴板中并没有要复制的内容,当然,粘贴按钮为灰色,粘贴亦未成功。Access程序中

    2024年02月07日
    浏览(40)
  • 关于elementUI input粘贴复制

    关于elementUI input粘贴复制 elementUI是一个基于Vue.js的前端UI框架,提供了丰富的组件和功能,方便开发者快速构建高效的用户界面。其中,input组件是一个常用的表单控件,用于接收用户的输入内容。input组件支持粘贴复制功能,即用户可以通过快捷键或右键菜单来复制或粘贴文

    2024年02月16日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包