Fabric.js 拖拽平移画布

本文简介

点赞 + 关注 + 收藏 = 学会了使用 fabric.js 创建出来的画布默认是不能拖拽移动的。

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

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

====

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

1.鼠标点击元素
2.移动鼠标
3.松开鼠标

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

当松开鼠标时，也要获取松手那刻鼠标所在位置，然后设置元素的位置。先看看官方给出的例子再逐步分析

<canvas id="c" width="500" height="