search

jirengu / frontend-interview

前端笔试面试题题库
1.29k stars 139 forks source link

简述如何设计一个能创建流程图的页面（类似visio，xmind） #19

Open ningxzx opened 7 years ago

ningxzx commented 7 years ago

来自华为面试

  1. 有没有做过类似功能的页面，有的话，怎么改进？没有的话，讲讲思路。（我没有做过，因此接着问下面的问题）
  2. 基本功能（拖拽，连线）如何实现？
  3. 怎样变成可复用的插件？
  4. 如何实现扩展（考官未细指扩展的方向）？
ningxzx commented 7 years ago

怎么没法加标签？ 必须要是contributor吗？

kevinwulong commented 7 years ago

1没做过 2拖拽：鼠标在工具上mousedown的时候让新工具的坐标=鼠标的坐标-（鼠标的坐标-新工具的坐标）。 鼠标mouseup的时候取消拖动。 连线：这个不知道是什么。。 3把每个工具都写成对象。 4 比如快捷键？收集数据最经常用到的工具图标来设置快键键。 比如模板？如上 为了懒才用工具的嘛。

giscafer commented 7 years ago

@kevinwulong 第二点2，拖拽包括鼠标三个事件mousedown——mousemove——mouseup，另外你说的坐标计算也不对。mousedown时记下当前坐标，假设设置标志位flag=true，mousemove时,如果flag===true，则获取鼠标位置，计算并动态更改工具坐标，这样工具位置就动态改变了，mouseup标记flag=false，此时工具位置是最终位置。

有类似开源项目代码，可以参考源码

https://github.com/fex-team/kityminder

https://github.com/jgraph/draw.io

kevinwulong commented 7 years ago

@giscafer 谢谢回复！我去刷刷看你提供的源码。

FrankFang commented 7 years ago

@ningxzx 你需要加什么标签，我帮你加吧

ningxzx commented 7 years ago

@FrankFang 确实简洁了不少！我觉得“组件”相关的标签都行

ShootToThrill commented 7 years ago

用canvas画吧

ibufu commented 7 years ago

https://www.processon.com/

ZHAISHENKING commented 4 years ago

1.没做过。思路：按JSON格式存储，自标题往下嵌套，备注描述均为json中的字段。