Skip to content

Latest commit

 

History

History
98 lines (60 loc) · 4.28 KB

README.md

File metadata and controls

98 lines (60 loc) · 4.28 KB

使用 Konva 实现一个设计器交互

示例地址

欢迎大家来看看:

CSDN

稀土掘金

博客园

image

2

3

3

3

1

1

3

1

2

3

4

1

2

3

5

1

2

3

17f9d43d5b5a450288dcd834416ec412

chrome_Gw4M1vdxYN

chrome_R45lPum9dU

1

image

image

1

2

image

3

功能点

  • 无限画布(√)
  • 画布拖拽(√)
  • 缩放(√)
  • 画布网格(√)
  • 比例尺(√)
  • 坐标参考线(√)
  • 把素材从左侧面板拖入设计区域(√)
  • 鼠标、键盘移动节点(√)
  • 鼠标、键盘单选、多选节点(√)
  • 放大缩小所选的“磁贴效果”(基于网格)(√)
  • 拖动所选的“磁贴效果”(基于网格)(√)
  • 复制、粘贴、删除(√)
  • 画布归位(√)
  • 层次调整(√)
  • 右键菜单(√)
  • 导出、导入(√)
  • 实时预览窗(√)
  • 对齐效果(√)
  • 连接线[自动、直线、折线](√)
  • 素材组合[深度](√)
  • 基本图形绘制(线、曲线、矩形✓、圆形✓)

需要解决的

  • 自动连接线需优化
  • 节点 destory 后 JS event listeners 不降反升