LogicFlow 是专注于业务流程图可视化的前端框架（以下简称 LF），在这之前我们分别介绍了 LF 的整体设计和扩展机制，今天我们来聊一聊流程图中比较核心的一个概念 —— 边（Edge）。 首先，流程图中的元素主要由节点和边组成，边在 LF 中承担的角色是建立节点之间的关系…

其实有很多库已经实现了流程图，比如 jointjs，gojs，jsplumb 等等。可惜都不是免费的。 如果要做的简单呢，就用贝塞尔曲线就好了，只需要提供起点终点两个点的坐标，就能用简单的算法生成一个svg 的path了。这样算法网上应该找得到。 但是如果要用正交连线来实现，这…

我先是用CSS3做发现做不到这种效果，然后尝试用Canvas，做到一半发现也不合适而且有模糊的问题遂放弃。最后决定用SVG！

我们的计算机有两种图形系统: 栅格图形和矢量图形。 栅格图形系统就是那种越放大越模糊的图片。 矢量图形就是怎么放大都好清晰的辣种。🍗 (比如这个炸鸡emoji)。用官方的回答翻译过来就是：矢量图形中图形被描述为一系列几何形状，通过矢量图形阅读器在指定的坐标集上绘制形状。 看这…

可以通过 div 的方式 拼凑 一张图，然后 js 代码控制不同的 div 部件进行颜色变化。 可以通过 canvas 的方式绘制整张图，然后对画布内的元素进行控制。 可以找个第三方库，自定义形状 组合 一张图出来，然后进行控制。 可以通过 svg 图的方式展示内容，然后对 s…

平时我们写业务可视化组件的时候 会经常使用到 SVG, 也会使用 SVG 做一些动画。SVG.js 是一个开源项目，能够让你更优雅、便捷的方法编写 SVG。 我们也可以通过对 SVG.js 的分析来一起看下可以如何去写一个可视化的工具库。 SVG.js 是用于操作 SVG 和执…

Any application that can be written in JavaScript, will eventually be written in JavaScript. – Atwood’s Law 本文来源于我在看了 Milo Yip 在知乎专栏里的这篇文章：…

是时候和 jQuery 说拜拜了么？