js画图插件-zrender

最新推荐文章于 2024-03-20 09:57:01 发布

健康平安的活着

最新推荐文章于 2024-03-20 09:57:01 发布

阅读量4.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/u011066470/article/details/85229294

javascript 专栏收录该内容

8 篇文章

订阅专栏

ZRender(ZlevelRender)是一款轻量级的Canvas类库，采用MVC封装，提供数据驱动的图形仓库、视图渲染和交互控制。本文介绍如何使用ZRender创建动态图形，包括图形管理、事件处理和动画扩展。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

zrender（Zlevel Render）是一个轻量级的Canvas类库，MVC封装，数据驱动，提供类Dom事件模型，让canvas绘图大不同！

MVC核心封装实现图形仓库、视图渲染和交互控制：

Stroage(M) : shape数据CURD管理
Painter(V) : canvas元素生命周期管理，视图渲染，绘画，更新控制
Handler(C) : 事件交互处理，实现完整dom事件模拟封装

shape : 图形实体，分而治之的图形策略，可定义扩展
tool : 绘画扩展相关实用方法，工具及脚手架
animation : 动画扩展，提供promise式的动画接口和常用缓动函数

ZRender Architecture

例子：

1.引入库文件：

2.代码的编写：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>test</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="echarts-2.2.7/build/dist/echarts.js"></script>
<script type="text/javascript" src="zrender/dist/zrender.js"></script>
<script type="text/javascript">
$(document).ready(function(){
show();
});