首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ZRender 渲染引擎 - 壹】 | 基础图形元素绘制

当我偶然知道 echarts 底层是由 ZRender 引擎渲染时,内心是非常激动的。无论是简单的统计图,还是复杂的雷达图、地图、关系图,本质上都是通过 ZRender 引擎渲染绘制的。...ZRender 封装了前端 canvas 的绘制逻辑,通过上层的接口去操作底层的绘制功能。...ZRender 是一个开源项目,地址在 【ecomfe/zrender】,可以将其 clone 到本地,方便查看源码。 ---- 对于绘制的封装而言,基础图形元素是必不可少的,以后简称为 图元 。...所以在刚接触 ZRender 时,了解这些图元的使用是一个比较好的切入点。本文先从一些简单的图形元素绘制进行体验,了解 ZRender 的基本使用。 ---- 2....ZRender 的使用 作为一个 js 的库,引入的方式大同小异。这里先通过最原始的方式体验一下 zrender, 先不通过前端框架集成。

2.4K11
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    百度数据可视化实验室正式成立,发布深度学习可视化平台 Visual DL

    在官网中,百度数据可视化实验室也分享了其发展和规划: 基于基础的可视化规范,依托 ZRender、ClayGL 基础库,实现了强大的 ECharts、ECharts GL。...图片来源:IFE 该项目 GitHub 地址:https://github.com/ecomfe/echarts-gl ZRender 4.0 版本升级 ZRender 是二维绘图引擎,它提供 Canvas...ZRender 也是 ECharts 的渲染器。 据祖明在其知乎专栏介绍, 作为 ECharts 的底层渲染库,ZRender 承担起了抹平平台差异、封装技术细节、提高渲染性能等责任。...在此次发布的 4.0 版本中,SVG 渲染的支持使得 ZRender 的渲染能力有了进一步提升。...下图为用 ZRender 绘制的一个实例: ?

    1.3K40

    数据可视化之MarkPoint

    渲染是采用的zrender框架,而markPoint则是由Animation来驱动,每一帧都会调用update,在onframe中来设置每一个点当前的状态,比如大小,根据时间周期下,线性插值计算出它应该的大小...其实这用了一个双缓存的技术,在zrender中有一个Layer对象,每一帧都会叠加上一帧的效果,并保存。具体的实现可以参阅zrender的Layer类,比较简单。...首先,这要介绍一下zrender中的Animation类,一个非常好用强大的类,先看看使用代码,如下: 首先,这是一个when.js风格的使用方式,该动画主要用来控制effectShape的‘style...最后会调用zrender的refresh,最终来到Symbol的渲染阶段。这里,每一个点根据自己的索引选择对应的缩放比例percent,然后进入下面的绘制阶段。

    1.1K50
    领券