使用 前端canvas 制作的可拖拽画布实战项目

https://www.bilibili.com/cheese/play/ss19337

适用人群以及注意事项：
1.适用于想对canvas有深入了解,对2d可视化有一个了解. 封装了很多数学方法,思想在其他语言也适用.
2.为了教学,该课程全部由原生js实现,所以难免有一些小bug存在,还请见谅,断断续续历经两年琢磨,重点思路与功能还是没问题的.
3.该课程为高级实战教学,需要有一定的编程基础和了解canvas的一些api。会用到小学高中知识,比如比例尺, 三角函数,向量等,只需要高中知识,理解这个项目应该没多大问题
canvas api大全网站https://www.canvasapi.cn/
-----该项目有一定的难度,您可以先看完前两章免费的教学,如果没问题再考虑购买-------

项目内容(插件全部由原生js实现)：

可拖拽的画布,有一个可以拖拽可缩放（以鼠标中心点去放大缩小）的坐标系,坐标系下的元素都会相对原点绘制,提供网格背景。
丰富的元素类,比如图片,文本,方块,点,线段⋯
元素可拖拽,可以通过控制点缩放,旋转,形变, 包含矩形大小的控制点, 宽高的控制点,旋转的控制点,线段点坐标的控制点,线段的贝塞尔曲线控制点
元素拖拽的辅助线对齐吸附效果,网格坐标的吸附,点对点的吸附,点对线的吸附,元素间的吸附
Group组类,多个元素合并操作,比如同时移动,缩放等；可以通过鼠标选中区域来选中多个元素,组内元素上下左右对齐的功能,简单的flex布局功能
新增删除修改等操作的撤销恢复功能
键盘事件,组合键监听的封装
元素具有层级,可调整谁覆盖谁
元素和画布的暴露多种事件,比如鼠标按下,松开,拖拽等；通过消息订阅形式（使用起来跟addEventListener无异）
封装了丰富的util工具方法,主要包括2d可视化方面的数学封装方法。
Link连接线与锚点,通过点击锚点拖拽连线两个元素,理解两点之间连线的多种方式,比如曲线(两点之间线性插值填充n个点,两点之间曲线贝塞尔插值填充N个点),折线,直线等
网格坐标转化的功能（比如战棋游戏中人物以网格单位一格一格的移动）实现一个简单的自动寻路功能
理解canvas中文本元素的换行,实现原生实现文字编辑,光标上下左右移动, 字体大小跟随形变缩放
常见的右下角小地图全景导航功能
常见的左上角标尺(刻度尺)功能
鼠标点击或连续点击创建元素,自由绘制画笔签名,模仿手写风格,仿态势标绘圆滑曲线算法.
剪贴板的操作比如获取内容添加本文元素。剪贴板塞入blob数据,比如导出的图片,导出的svg等。
元素的api: 如转出为svg,转出为图片,元素的镜像翻转,子元素嵌套,获取包围盒范围等的功能,样式,边框,填充色,虚线动画设置,偏移translate,旋转rotate,鼠标悬浮判定…
画布的api: 相对坐标与像素坐标之间的转化,相对坐标与网格坐标之间的转化,画布导出类似矢量放大后的图片,画布内元素自适应(所有元素放大到适应屏幕匡高),字体加载并应用,元素的增删改查api,限制画布的拖拽范围, 画布拖拽后通过摩擦力过渡停止…
原生实现动画插件,包括暂停继续回放功能,理解动画缓动的原理
更多功能请结合源码参照学习.