Fabric 画布缩放、拖动、初始化大小

作为自己项目的基础功能之一,自然是需要第一个回顾记录的了!

1.拖动画布
2.缩放画布
3.监听窗口大小变化,从而初始化画布位置、大小


涉及相关API:键盘快捷键功能、滚轮功能、监听窗口变化、fabric.js相关事件及API;

示例说明:

  1. 拖动画布:按住空格键,然后点击鼠标左键拖动画布;(在操作过程中,需要处理fabric.js图形的相关控制项,避免影响拖动操作!)
  2. 缩放画布:以鼠标当前位置为中心,进行画布内容的整体缩放;
  3. 初始化大小:设定一个舞台与画布之间的大小比例,当窗口大小变化时,对舞台进行居中且缩放至自己所设定的比例大小!

以下代码仅作为功能的完整示例;未进行相关模块划分、封装,实际开发中自行处理这些即可!






你可能感兴趣的:(fabric.js,fabric,前端,javascript)