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

前言 ：为什么要写这篇呢，原因是这本来是个强行实现的功能。在我有任何提及的情况下，陆陆续续有star量。原本是这样的，1年前，公司做的一个关于人脸识别的项目，有一个功能，6度关系。且个人的2度关系可能和你其他的关系还有联系。想想就是一个蜘蛛网的关系图。可是没办法，产品经理说撸，…

在很多定制化的可视化场景中，拖拽、缩放、全屏操作必不可少，尤其对于业务复杂的可视化需求，当画布内容足够多，可视区域显示不下时，就需要借助缩略图来一览全局。 本文将介绍一款轻量级的画布引擎ReScreen，ReScreen是集缩略图与画布操作为一体的轻量级绘图引擎，为React专…

前面陆陆续续写了几篇 高级 UI 系列文章 ，感觉还不错。因为工作内容原因作者对 UI 开发涉及的很少，所以打算写一点关于 UI 的文章，也算是给自己一个全面的复习。本篇文章还是 基本概念 + 实战来讲解。 SVG 的全称是 (Scalable Vector Graphics)…

在上篇文章中我们已经拿到了频谱数据，也知道了数组每个元素表示的是振幅，那这些数组元素之间有什么关系呢？根据FFT的原理， N个音频信号样本参与计算将产生N/2个数据（2048/2=1024），其频率分辨率△f=Fs/N = 44100/2048≈21.5hz，而相邻数据的频率间…

Apple Watch 第三代发布的时候，我借健身的理由入手了一个。除了丰富的各种类型运动数据记录功能外，令我印象深刻的便是定时提醒我呼吸应用里的那个动画效果了。本篇文章我将完整地记录仿制这一动画的过程，不使用第三方库。 不着急写代码，我们先仔细多观察几遍动画（下载gif）。整…