Fabric.js 拖拽平移画布方法示例

目录
  • 正文
  • 原理解析
  • 按下鼠标时
  • 移动鼠标时
  • 松开鼠标时
  • 代码仓库

正文

使用 fabric.js 创建出来的画布默认是不能拖拽移动的。

不过我们可以利用一些小技巧让画布具有被拖拽的能力,fabric.js 官网也提供了一个 demo ,但文档上并没有详细的讲解拖拽画布的实现原理。

本文就粗略分析一下这个原理。

原理解析

鼠标拖拽的原理其实很简单,主要就3步:

  • 鼠标点击元素
  • 移动鼠标
  • 松开鼠标

在鼠标移动时,获取鼠标当前位置,然后修改被拖拽元素的位置。

当松开鼠标时,也要获取松手那刻鼠标所在位置,然后设置元素的位置。

先看看官方给出的例子再逐步分析

<canvas id="c" width="500" height="500" style="border: 1px solid #ccc;"></canvas>
<script src="../js/fabric.js"></script>
<script>
  // 创建画布
  let canvas = new fabric.Canvas('c', {
    allowTouchScrolling: true
  })
  // 矩形
  const rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 10,
    top: 10,
    fill: 'pink'
  })
  // 三角形
  const triangle = new fabric.Triangle({
    top: 100,
    left: 100,
    width: 80, // 底边长度
    height: 100, // 底边到对角的距离
    fill: 'blue'
  })
  // 将矩形和三角形添加到画布中
  canvas.add(rect, triangle)
  // 按下鼠标事件
  canvas.on('mouse:down', function (opt) {
    var evt = opt.e;
    if (evt.altKey === true) {
      this.isDragging = true
      this.lastPosX = evt.clientX
      this.lastPosY = evt.clientY
    }
  })
  // 移动鼠标事件
  canvas.on('mouse:move', function (opt) {
    if (this.isDragging) {
      var e = opt.e;
      var vpt = this.viewportTransform;
      vpt[4] += e.clientX - this.lastPosX
      vpt[5] += e.clientY - this.lastPosY
      this.requestRenderAll()
      this.lastPosX = e.clientX
      this.lastPosY = e.clientY
    }
  })
  // 松开鼠标事件
  canvas.on('mouse:up', function (opt) {
    this.setViewportTransform(this.viewportTransform)
    this.isDragging = false
  })
</script>

拖拽画布的代码来自官方案例。我删减了部分元素。

从上面的代码可以看出,主要事件是 mouse:downmouse:movemouse:up

按下鼠标时

canvas.on('mouse:down', function (opt) {
  var evt = opt.e;
  if (evt.altKey === true) {
    this.isDragging = true
    this.lastPosX = evt.clientX
    this.lastPosY = evt.clientY
  }
})

通过 mouse:down 事件,设置了按住 alt 键时再按下鼠标左键,才能触发拖拽事件(开始)。

自定义3个属性:

  • isDragging: 拖拽状态,true 表示可拖拽
  • lastPosX: 画布上一个x坐标
  • lastPosY: 画布上一个y坐标

为什么要记录 lastPosXlastPosY 呢?

把鼠标点击时,鼠标所在的位置记录下来。之后移动时,再通过鼠标新出现的位置和点击时的位置对比,就能计算出鼠标移动了多少距离,然后再调整画布移动的距离即可。

移动鼠标时

canvas.on('mouse:move', function (opt) {
  if (this.isDragging) {
    var e = opt.e;
    var vpt = this.viewportTransform;
    vpt[4] += e.clientX - this.lastPosX
    vpt[5] += e.clientY - this.lastPosY
    this.requestRenderAll()
    this.lastPosX = e.clientX
    this.lastPosY = e.clientY
  }
})

通过 mouse:move 可以监听鼠标的移动。

此时就要通过 isDragging 判断是否进入拖拽状态。

viewportTransformfabric.js 在画布上的一个属性。

官方文档是这样介绍的:

The transformation (a Canvas 2D API transform matrix) which focuses the viewport

上面的代码,修改了 viewportTransform 下标为 45 的元素。

  • viewportTransform[4]: 水平位移(x轴)
  • viewportTransform[5]: 垂直位移(y轴)

e.clientX - this.lastPosX 就是鼠标移动的x轴方向的距离,e.clientY - this.lastPosY 可以计算出鼠标移动的y轴方向的距离。

如果想了解 viewportTransform 每个元素代表什么,可以看看 《Fabric.js 变换视窗》

requestRenderAll() 是在每次移动完画布就刷新一下。

刷新完画布,就把上一个点(x和y坐标)改成最新的:this.lastPosX = e.clientXthis.lastPosY = e.clientY ,给下次移动鼠标时提供一个参考值,方便计算。

松开鼠标时

canvas.on('mouse:up', function (opt) {
  this.setViewportTransform(this.viewportTransform)
  this.isDragging = false
})

使用 setViewportTransform 设置画布的视图。

并退出拖拽模式:isDragging = false

以上就是在 fabric.js 中拖拽画布的方法。

代码仓库

拖拽移动画布

以上就是Fabric.js 拖拽平移画布方法示例的详细内容,更多关于Fabric.js 拖拽平移画布的资料请关注我们其它相关文章!

(0)

相关推荐

  • Fabric.js 样式不更新解决方法案例

    目录 本文简介 是否需要重新绘制 代码仓库 本文简介 不知道你有没有遇到过在使用 Fabric.js 时无意中一些骚操作修改了元素的样式,但刷新画布却没更新元素样式? 如果你也遇到同样的问题的话,可以尝试使用本文的方法. 是否需要重新绘制 我先举个例子. <canvas id="c" style="border: 1px solid #ccc;"></canvas> <script> let canvas = new fabric

  • Fabric.js 实现变换视窗示例详解

    目录 引言 viewportTransform 缩放 斜切 平移 setViewportTransform(vpt) 引言 fabric.js 可以通过 viewportTransform 属性配置画布的视窗属性. 听上去很高级的样子,但其实这是原生 canvas 就已经存在的东西,fabric.js 的 viewportTransform 也就直接复用了原生 canvas 的 transform() . fabric.js 官方文档上也是这么说的 viewportTransform :Arra

  • JS前端以轻量fabric.js实现示例理解canvas

    目录 缘起 fabric.js 初体验 fabric.js 的大体结构 canvas 能干嘛? 小结 缘起 最近想系统看下 canvas 这个东西,所以找了一个库看看,本来打算写一两篇文章沉淀一下,发现东西有点多

  • Fabric.js 监听元素是否相交重叠

    目录 正文 动手试试看 代码仓库 正文 fabric.js 提供了一个方法可以检查对象是否与另一个对象相交(也可以叫元素是否重叠). 这个方法叫 intersectsWithObject(). 本文主要想提一下 fabric.js 存在这么一个方便的方法. 检测元素是否相交有什么用呢? 这个功能在日常开发中其实很实用,在它的帮助下我们可以实现“防止对象碰撞”.“对象自动对齐贴合”等功能. 动手试试看 为了演示 intersectsWithObject() ,我打算做如下操作: 创建画布 创建矩形

  • JS前端轻量fabric.js系列物体基类

    目录 前言 FabricObject 基类的实现 抽离共同属性 抽离共同方法 Rect 类的实现 本章小结 前言 在上个章节中我们已经创建了画布,接下来就可以进行物体的绘制了,那具体要怎么画呢?根据文章标题可以猜到应该是要抽象出一个物体基类,归纳出一些它们的共性,那它们能有啥共性呢,毕竟每个物体好像都是各画各的.对于这个问题大家可以先简单思考几秒钟再往下看

  • JS前端轻量fabric.js系列之画布初始化

    目录 前言 画布的前置知识 画布初始化 变换练习 小结 前言 从这个章节开始我们就步入正题了,那一开始要做啥子呢,回忆下上个章节中 fabric.js 的使用过程,先是创建画布,再添加物体,然后开始动画和交互.显然画布是一切物体的开端,所以首先要搞定的就是它,也就是 const canvas = new fabric.Canvas('canvas') 这一步要做的事情. 画布的前置知识 在说 fabric.js 如何初始化画布之前,先巩固下画布的相关知识点.创建画布要做的事情通常比较简单,就是单

  • Fabric.js 修改画布交互方式作用详解

    目录 本文简介 动手试试 和 hasControls .hasBorders 的区别 和 StaticCanvas 的区别 总结 本文简介 fabric.js 为我们提供了很多厉害的方法.今天要搞明白的一个东西是 canvas.interactive . 官方文档对 canvas.interactive 的解释是: Indicates that canvas is interactive. This property should not be changed. canvas.interacti

  • Fabric.js 拖拽平移画布方法示例

    目录 正文 原理解析 按下鼠标时 移动鼠标时 松开鼠标时 代码仓库 正文 使用 fabric.js 创建出来的画布默认是不能拖拽移动的. 不过我们可以利用一些小技巧让画布具有被拖拽的能力,fabric.js 官网也提供了一个 demo ,但文档上并没有详细的讲解拖拽画布的实现原理. 本文就粗略分析一下这个原理. 原理解析 鼠标拖拽的原理其实很简单,主要就3步: 鼠标点击元素 移动鼠标 松开鼠标 在鼠标移动时,获取鼠标当前位置,然后修改被拖拽元素的位置. 当松开鼠标时,也要获取松手那刻鼠标所在位置

  • Sortable.js拖拽排序使用方法解析

    最近公司项目经常用到一个拖拽 Sortable.js插件,所以有空的时候看了 Sortable.js 源码,总共1300多行这样,写的挺完美的. 官网: http://rubaxa.github.io/Sortable/ 拖拽的时候主要由这几个事件完成, ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上     ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上     ondragover 事件:拖拽元素在目

  • JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】

    本文实例讲述了JS实现放大.缩小及拖拽图片的方法.分享给大家供大家参考,具体如下: var divId; var v_left; var v_top; window.onload=function(){ divId = document.getElementById("block1"); var height1 = images1.height;//图片的高度 var width1 = images1.width;//图片的宽度 v_left=(document.body.client

  • JS仿iGoogle自定义首页模块拖拽特效的方法

    本文实例讲述了JS仿iGoogle自定义首页模块拖拽特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • JS前端canvas交互实现拖拽旋转及缩放示例

    目录 正文 拖拽 旋转 缩放 小结 正文 到目前为止,我们已经能够对物体进行点选和框选的操作了,但是这还不够,因为并没有什么实际性的改变,并且画布看起来也有点呆板,所以这个章节的主要目的就是让画布中的物体活起来,其实就是增加一些常见的交互而已啦,比如拖拽.旋转和缩放.这是这个系列最重要的章节之一,希望能够对你有所帮助. 拖拽 先来说说拖拽平移的实现吧,因为它最为简单

  • js拖拽一些常见的思路方法整理

    js拖拽的常见思路 1.通过onmousedown,onmousemove,onmouseup分别模拟开始拖拽,拖拽中和拖拽结束时的事件(). 如果手机的触摸事件的话则分别是ontouchstart,ontouchmove和ontouchend. 2.鼠标按下即发生onmousedown事件时:获取鼠标位置,获取被拖动元素的位置,记录两者之间的纵横坐标的差值().对document元素绑定onmousemove,onmouseup事件. 刚开始接触js拖拽时,我当时疑惑的是为什么是对docume

  • 基于React.js实现原生js拖拽效果引发的思考

    一.起因&思路 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖拽效果. 首先,其实拖拽效果的思路是很简单的.主要就是三个步骤: 1.onmousedown的时候,启动可拖拽事件,记录被拖拽元素的原始坐标参数. 2.onmousemove的时候,实时记录鼠标移动的距离,结合被拖拽元素第一阶段的坐标参数,计算并设置新的坐标值. 3.onmouseup的时候,关闭可拖拽事件,记录新的坐标值. 注意:这里主要是通过绝对定位的top和left来确定元素的位置

  • 简单实现js拖拽效果

    本文实例为大家分享了js拖拽效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } html,body{ width:100%; height:100%;

  • JS拖拽插件实现步骤

    这篇文章详细介绍了JS拖拽插件的实现步骤,主要从以下六步做详细分析,具体内容如下: 一.js拖拽插件的原理 二.根据原理实现的最基本效果 三.代码抽象与优化 四.扩展:有效的拖拽元素 五.性能优化和总结 六.jquery插件化 js拖拽是常见的网页效果,本文将从零开始实现一个简单的js插件. 一.js拖拽插件的原理 常见的拖拽操作是什么样的呢?整过过程大概有下面几个步骤: 1.用鼠标点击被拖拽的元素 2.按住鼠标不放,移动鼠标 3.拖拽元素到一定位置,放开鼠标 这里的过程涉及到三个dom事件:o

  • 完美实现js拖拽效果 return false用法详解

    本文为大家分享了完美实现js拖拽效果的具体代码,告诉大家return false的用法,供大家参考,具体内容如下 1.return false可以用来阻止默认事件即系统默认事件.例如通过阻止默认事件,来对textarea中的值进行范围限制(通过限制keycode的数值),也可以自定义在页面中的右键菜单(oncontextmenu). 2.在鼠标移动(mousemove)等事件中,是需要给事件传一个参数,保证程序的正常运行.而为了兼容取事件方法为:var oEvent=ev||event; 3.在

随机推荐