开发一个html渲染引擎,数据可视化初探-从零开始开发一个渲染引擎概述-CSDN博客

相信大家在项目开发中都或多或少的用过一些图表，让我们再看一下一个简单的图表是什么样的。

截图自EChart Demo

一个简单的条形图表都是由哪些基础图形组成的了？没错！正如看到的那样主要由线段和文字以及矩形组成。这三个基础图形组成了一个简单图表。然后对这三个基础图形进行划分，线段和文字为一组构成了坐标轴，所有矩形为一组构成了图表的主体。然后将坐标轴和主体放入一个画板中并绘制出来即形成了这个图表。依据上面的描述并参考Photoshop绘图的理念可以提取一个简单的关系，如图：

以上便是一个总体的结构设计划分，接下来只需实现相应的类即可。

Canvas类

作为所有图形表现的媒介，Canvas类必须有一个可供图形呈现到网页中的元素，故初始化需传入一个 html 元素来确定图表的渲染位置，并需要提供相应的配置来确定画布的大小。此外作为绘图的入口还需要负责绘画的统一调度，以及对相应事件的转发和模拟，否则作为HTMLCanvasElement中的一个图像到目前为止是不能原生响应相应的事件的，事件的订阅和派发放到下面单独介绍。

Canvas类具体配置和常用方法如下

配置

container: 画板的容器，canvas渲染到html中的位置

width: 画布宽度

height: 画布高度

style: 绘画的各种样式，具体设置项同原生API

主要方法

draw() 绘制图形。

addLayer(options) 添加图层

addShape(type, options) 添加图形

remove(element) 移除图形或图层

clear() 清除所有图层

update() 更新画布

例子

const canvas = new ZE.Canvas('container', {

width: 800,

height: 600,

style: {

fillStyle: 'red'

}

})

复制代码

EventBus类

为了让canvas中的元素可以获得单独事件响应的能力，故而需要实现了此类，它是Canvas的基类。这个类主要提供了订阅和分发事件的方法，还会记录每种事件都由哪些元素订阅，从而实现事件的冒泡机制。

EventBus类的主要方法

addEventListener(type, func, [element, once])添加订阅事件 (alias: on)

removeEventListener(type, [element, func])移除订阅事件 (alias: off)

once(type, func, [element])添加只执行一次的事件

trigger(type, [element, ...data))触发事件(alias: emit)

例子

canvas.on('test', (str) => { console.log(str) });

canvas.emit('test', '您好');

复制代码

Element类

何为Element？其实Layer和Shape都可以看成是一个元素，他们有许多相似之处，Layer只是包含了若干个Shape的元素，所以提取出了Element这个类，它也是整个引擎最核心的类。我们需要在这个类完成元素的属性设置、动画等相关方法。

Element类的属性和方法

方法

setAttrs(attr)设置属性(具体属性视具体shape而定)

setStyle(style)设置样式

animate(options)设置动画 (默认设置后自动播放)

play() 播放动画

stop() 停止动画

update() 更新画面，更改属性或样式后需要update才会更新画布内容

show() 显示图形

hide() 隐藏图形

destroy() 从画板中移除自己

getCanvas() 获取画板容器

getContext() 获取画笔

getStatus() 返回图形当前状态

属性

attrs 图形相关配置

style 图形相关样式

type 图形类型

container 图形的容器

zIndex 位置层级

computed 根据图形样式和属性计算后得到的一些值

例子

const ball = canvas.addShape('circle', {

attrs: {

x: 50, // 圆心x坐标

y: 50, // 圆心y坐标

r: 50 // 半径

style: {

fillStyle: 'red'

zIndex: 1, // 层级默认 0

event: { // 可以直接再初始化时配置相应的事件

click (e) { console.log(e); }

}

});

复制代码

Layer类

Layer是继承Element的，经过Element的封装后需要在Layer里面完成的事情就不多了。Layer作为一个容器，主要当然要提供对元素的添加和删除了，此外个人为每一个Layer设计了一个图形的缓存，即每个Layer都拥有一个自己的缓存画板，当Canvas调用draw来进行绘画时，可以直接将缓存的图像绘制到显示的绘画板中，这样的初衷是为了提高绘画的效率(待验证)，但会增加内存的使用。

Layer类的主要方法和属性

addLayer() 添加图层

addShape() 添加图形

remove() 移除一个子元素

clear() 清除子元素

palette 缓存的画板

brush 缓存的画笔

attrs 画板的属性

例子

const layer = canvas.addLayer({

x: 10,

y: 20