Zeg NPM | npm.io

ZE

一个可视化图表的渲染引擎，目前还在进一步完善和优化中...

Install

yarn | npm install zeg

Use

const canvas = new ZE.Canvas('container', {
  width: 800,
  height: 600,
  style: {
    fillStyle: 'red'
  }
})

Examples

例子点击这里

预览点击这里

Demo

Document

项目结构

core文件夹存放项目主要类
shapes文件夹存放基础图形
utils存放工具函数

类的关系

Canvas：画板、绘图入口，所有Layer的容器。继承EventBus实现事件的订阅分发，代理原生的HTML事件以实现Canvas内各Shape的事件系统。
Element： Layer和Shape的基类，主要实现各种属性的设置和动画等功能。
Layer：图层、组成画面的胶片。是Element的容器，和Canvas有部分相似的地方。
Shape：基础图形、构成画面的基本元素，各个基础图形的父类。

目前实现基础图形

Arc 圆弧主要用于绘制弧线
Circle 圆主要用于绘制圆形
Ring 圆环主要用于绘制环形
Line 线条主要用于绘制线段
Bezier 贝塞尔曲线主要用于绘制二次或者三次贝塞尔曲线
Text 文字主要用于绘制文本
Polyline 折线主要用于光滑或者有棱角的折线段
Rect 矩形
Polygon 多边形主要用于绘制规则或者不规则的多边形
Image 图片主要用于绘制已有图片，来源可以是HTMLImageElement、HTMLCanvasElement或者图片url
Video 视频主要用于绘制视频，支持m3u8类型的视频源

API和配置

事件相关

canvas、layer、shape共用，所有的事件都是由canvas负责管理的即使layer或者shape去分发订阅事件也只是代理canvas。

addEventListener((type, func, element, once))添加订阅事件 (alias: on)
removeEventListener((type, element, func))移除订阅事件 (alias: off)
once((type, func, element))添加只执行一次的事件
trigger((type, element, ...data))触发事件(alias: emit)

图形公用方法和属性（Layer和Shape）

方法

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

setStyle(style)设置样式

/* 可设置样式 */
const STYLE_KEYS = [
  'fillStyle',
  'font',
  'globalAlpha',
  'lineCap',
  'lineWidth',
  'lineJoin',
  'miterLimit',
  'shadowBlur',
  'shadowColor',
  'shadowOffsetX',
  'shadowOffsetY',
  'strokeStyle',
  'textAlign',
  'textBaseline',
  'lineDash',
  'lineDashOffset',
  'fontSize',
  'fontStyle',
  'fontWeight',
  'fontVariant',
  'fontFamily'
  ];

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

/* options说明 */
{
  props: { x: 100 }, //attr或者style目标值
  duration: 1000, //动画时长
  effect: 'easeOut', // 缓动效果
  callback, // 动画结束回调
  frameEnd, // 每一帧结束回调
  delay, // 延时播放时长
  repeat, // 是否重复播放 start -> end
  loop, // 是否循环播放 start <-> end
  autoPlay, // 自动播放 默认动画设置后即开始计时播放
}

play() 播放动画
stop() 停止动画
update() 更新画面，更改属性或样式后需要update才会更新画布内容
show() 显示图形
hide() 隐藏图形
destroy() 从画板中移除自己
getCanvas() 获取画板容器
getContext() 获取画笔
getStatus() 返回图形当前状态

属性

attrs 图形相关配置
style 图形相关样式
type 图形类型
zIndex 位置层级
computed 根据图形样式和属性计算后得到的一些值

实例化时通用配置

const layer = canvas.addLayer({
  attrs: {}, // opacity: 0~1, hasFill: true, hasStroke: false 为通用属性，其余属性参见下方图形和图层属性
  animate: {}, // 配置同animate方法
  style: {}, // 配置同setStyle方法
  visible: true, // 是否可见
  zIndex: 1, // 层级 默认 0
  event: {} // 响应的事件目前有click, dblclick, mousemove, mouseenter, mouseout, mousedown, mouseup
});

Canvas

配置
container: 画板的容器，canvas渲染到html中的位置 width: 画布宽度 height: 画布高度 style: 绘画的各种样式，具体设置项同原生API
主要方法
draw() 绘制图形，必须调用一次才能将图形渲染到canvas。 addLayer(options) 添加图层 addShape(type, options) 添加图形 remove(element) 移除图形或图层 clear() 清除所有图层 update() 更新画布