使用fabric框架实现标注面板
第一种模式:多边形模式
左键点击可以生成一个点(第一个点为红色),鼠标移动生成临时的多边形,当点的个数>=3时,左键点击原点或者右键结束多边形的绘制,多边形的第一个点和第二个点之间会有一个箭头,第一个点的上方会有标签名称
第二种模式:矩形模式
左键按下生成矩形,按下加移动改变矩形的大小,鼠标抬起结束矩形的绘制,并且在左上角的内部生成标签名称
第三种模式:编辑模式
鼠标移入图形图形展示为高亮,鼠标样式为移动样式,点击为选中图形,可以对该高亮图形进行拖拽和放大缩小, 多边形是改变多边形具体的点的位置如一下的效果图。选中后按下delete键可以对该图形进行删除。
第四重模式:移动模式
选择该模式后,后无法对图形进行移动但是可以对整个画布进行移动
第五种模式:缩放模式
点击Ctrl和鼠标滚动,会以鼠标为中心进行放大或者缩小
还原按钮:
点击后,被拖拽和缩放的画布会恢复成最开始的样子,上面的图形还是在图片的位置
标签列表:
鼠标经过标签列表对应的行,该行所对应的图形为高亮状态,点击后会主动变成编辑模式,并选中该图形。
点击显示隐藏会对对应的图形进行显示隐藏
点击锁定后,该图形在任何时候都不允许删除,放大缩小,拖拽,显示隐藏等操作
点击删除,可以对图形进行删除
效果图
初始化canvas
选择模式(可以通过按钮或者快捷键改变模式)
可以选择按钮或者点击快捷键来选择模式
快捷键说明
1代表多边形
Esc代表取消多边形绘制(多边形绘制途中点击Esc可以取消绘制)
2代表矩形
3代表编辑
4代表可以对画布进行拖拽
Delete代表删除图形(只有编辑状态下选中图形才能删除)
Alt + 左键对画布进行拖动
Ctrl + 滚动对画布进行放大缩小
按钮触发事件
多边形模式
(1) 鼠标点击左键生成一个圆点,如果是第一个点显示为红色
(2) 鼠标移动生成一个临时的多边形
(3) 当多边形的点的个数>=3时,点击第一个点或者右键,将原来的临时的多边形和圆点删除掉,重新创建一 个新的多边形
(4) 多边形的第一个点和第二个点之间有一个箭头(用三角形做的)
(5) 多边形的第一个点上方携带标签名称text
(1)添加圆点(isDrawing控制是否添加圆点)
(2)绘制临时多边形
(3)将临时的多边形和圆点删除掉,绘制新的多边形
4)给多边形添加标签和箭头
三角形的度数先用反三角函数算出垂直于第一点和第二点连线的角度
在根据 第一点和第二点的x的差的正负来对角度进行加减90度
将isDrawing设置为false 取消圆点的添加
矩形模式
(1) 鼠标点击左键创建并添加矩形
(2) 鼠标移动修改矩形的top/left/width/height
(3) 鼠标弹起结束绘画
(1) 鼠标点击左键创建并添加矩形