前端技术与可视化

Canvas 与 WebGL 在 ECharts 中的应用

About Me

沈 毅

  • WebGL
  • Canvas
  • ECharts
  • QTEK

About Baidu EFE

  • ECharts 可视化
  • EDP 前端开发平台
  • EST 样式工具库
  • Fate 移动开发
  • ESL AMD Loader
  • ER RIA
  • FECS 代码质量静态检查
  • Fontmin 字体子集化

Agenda

Canvas 在 ECharts 中的应用

Why Canvas?

特效绘制 - 百度迁徙

像素操作 - 全国 GDP 网格分布热力图

Canvas 的问题

ECharts 中的方案

图形的管理 - 图形对象

  • Path
  • Image
  • Text
  • 样式 Style

    填充颜色, 描边颜色,描边线宽,图片高宽

  • 平移,旋转,缩放变换

    position, rotation, scale

  • z
  • zlevel

    分层绘制

  • ...

图形的管理 - 层级树



图形的管理 - 绘制

事件管理

判断鼠标是否在图形上

包围盒的计算 - getBoundingRect

包围盒

最小包围盒

路径与鼠标相交的精确判断

JavaScript 实现

  • isPointInPath

    Non Zero Winding Rule

  • isPointInStroke

    求点到线段和曲线的距离

Benchmark

路径数据存储 - Path

var path = new Path(ctx);
path.moveTo(...);
path.lineTo(...);
...
if (path.isPointInPath(x, y)) {...}
if (path.isPointInStroke(x, y)) {...}
...
path.fastBoundingRect();
path.getBoundingRect();

Path2D

var path = new Path2D();
...
if (ctx.isPointInPath(path, x, y)) {...}
if (ctx.isPointInStroke(path, x, y)) {...}

Summary

WebGL 在 ECharts-X 中的应用

加速二维图形绘制

人均 GDP 网格分布 - 三维直方图

全球人口分布

飞行航线可视化

洋流 - 向量场可视化

260k 粒子

向量场与粒子运动

在 WebGL 中使用 Canvas

绘制

  • 2D 图形管理
  • 重绘管理

交互

  • 3D 射线求交
  • 求出交点的纹理坐标
  • 计算出在 Canvas 中的坐标
  • 2D 图形拾取

Thanks

前端技术与可视化