蚂蚁集团-黄通（有田）-语雀矢量图编排的实践.pdf

1、主办： 语雀矢量图编辑的实践 讲师简介 黄通（有田） 蚂蚁集团 前端技术专家 主办： 通 - 有 前端技术专家 “ ” 讲师简介 加 体验技术部实习 2014-07 正式职 2015-08 数据可视化 AntV 持数千业务系统 2015-09 加语雀 2018.09.19 新版富本编辑器 主要维护者 2019.02 重构量图 编辑器核 2019.10 新版思维导图 上线 2020.032020.05 流程图卡 上线 Step 1：可视化 Step 2： 编辑器Step 3：可视化+编辑器 主办： 做的事情 主办： 分享内容 效 质量 速度快 向对 1）既要快速追赶，也要敢于将精投细节 2）砍柴

2、 3）提出问题与解决问题同样重要 主办： 既要快速追赶，也要敢于将精投细节 主办： 1.1 选择合适的渲染引擎 Html Svg Canvas 主办： svg 会不会性能很差？ Canvas 移动单个点 SVG 移动单个点 Canvas 移动 5000 个 SVG 移动 5000 个 主办： HTML SVG Canvas 档应图形应 HtmlSVGCanvas Html SVG Canvas能实现 相互 包含 主办： 1.2 几乎零代码实现多选超视口拖拽 主办： 藏一个输入框，后续交给浏览器 主办： 1.3 图片“秒传” 主办： 1.4 交互细节、视觉细节 主办： 砍柴 主办： 武功再高，也

3、怕菜刀 图来源：http:/ 图来源：http:/ aed3ac6e212c4870887409bb15a4f120.gif 主办： 2.1 利用可视化的方式，辅助策略制定和优化 主办： 2.2 破解联系线的秘密 1 Catmull-Rom Splines 主办： API 的控制点不是我们想要的控制点 主办： n 阶贝塞尔曲线的递推公式 主办： 带入公式得 2 次贝塞尔曲线 主办： 代数计算 主办： 从数学公式中破解秘密 主办： 2.2 破解联系线的秘密 2 主办： 别人家的孩子 主办： 利用数学向量工具，辅助思考 A1 A2 C1 B1B2 C2 主办： 2.3 利用矩阵推算纸张、视口、画布之间的关系 主办： 所以复杂度会消失吗？ 图来源：http:/ 主办： 复杂度不会消失，只会转移 主办： 需要数学矩阵工具辅助思考 线性代数的本