使用ZRender类库画直线、圆弧、曲线以及点在线上的运动

article/2025/9/21 3:16:08

最近在学习Zrender类库，并利用Zrender 让点在直线、圆弧、曲线上运动。大概的写了一些.

Zrender是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器.

这里我运用的是Canvas画布去画的.想了解Zrender内的属性，请点击这个ZRender文档链接

若想了解如何画圆、直线等可以参考开始使用ZRender.有些内容是借鉴实现粒子网格动画.

话不多说直接上代码

css样式:

<style>#main {position: absolute;left: 0;top: 0;background: #000;z-index: -1;}
</style>

设置全局变量及配置项用到的变量

                    var x=300,y=300,r=200,t=0; //主要针对圆点绕圆弧运动var array=new Array();   //创建一个数组用于储存圆点的位置坐标var winH = window.innerHeight; //同步页面宽、高var winW = window.innerWidth;var opts = {background: '#000', //Canvas背景色 circleRadius: 3, //圆点半径 circleColor: 'rgb(0, 255, 0)', //圆点颜色 circleAmount: 1, //生成的圆点数量 speed: 1, //圆点速度};var tid; //setTimeout id，防抖处理var circledots = []; //用于存储partical对象var zr = zrender.init(main, { width: winW, height: winH });

画圆弧、直线、贝塞尔曲线:

                        var line=new Line({shape:{x1:300,y1:100,	x2:900,y2:100},style:{stroke: '#F00'}});zr.add(line);var line=new Line({shape:{x1:300,y1:500,	x2:900,y2:500},style:{stroke: '#F00'}});zr.add(line);var BC = new BezierCurve({shape: {x1: 300, //起始y1: 500, //坐标cpx1: 1200 / 2,cpy1: 500,//贝塞尔中心坐标cpx2: 1200 / 2,cpy2: 100,//贝塞尔中心坐标x2: 900, //终点y2: 100  //坐标},style: {stroke: 'green', //贝塞尔曲线显示 并赋予绿色lineWidth: 2}});zr.add(BC);var bc = new BezierCurve({shape: {x1: 300, //起始y1: 100, //坐标cpx1: 1200 / 2, cpy1: 100, //贝塞尔中心坐标cpx2: 1200 / 2,cpy2: 500, //贝塞尔中心坐标x2: 900, //终点y2: 500  //坐标},style: {stroke: 'green',lineWidth: 2}});zr.add(bc);var arcc = new Arc({shape: {cx: 300,cy: 300,r: 200,startAngle:4.8,endAngle:1.5,clockwise:false},style: {fill: 'none',stroke:    '#F00',lineWidth:2}});zr.add(arcc);var arci = new Arc({shape: {cx: 900,cy: 300,r: 200,startAngle:1.6,endAngle:4.7,clockwise:false},style: {fill: 'none',stroke: '#F00',lineWidth:2}});zr.add(arci);

所有函数:

                            function arc() { //圆弧运动公式		var tr = t*Math.PI/360;var tx = x-Math.cos(tr)*r;var ty = y+Math.sin(tr)*r;this.x=tx;this.y=ty;array[0]=this.x;array[1]=this.y;t+=1;return array;}function straightline(){ //直线运动if(this.y==500||this.y==100){if(this.y==500){this.x=this.x+1;this.y=500;}else{this.x=this.x-1;this.y=100;}if(this.x==900){this.y=this.y-1;}else if(this.x==300){this.y=this.y-1;}}array[0]=this.x;array[1]=this.y;return array;}var init = function () { //初始化圆点对象for (let i = 0; i < opts.circleAmount; i++) {let p = new Circledot();circledots.push(p); //将实例化的对象添加到圆点类zr.add(p.element); //将圆点显示在画布上}};	function loop() { for (let i = 0; i < circledots.length; i++) {let p = circledots[i];p.updatePosition();}window.requestAnimationFrame(loop);//有了这句话，就形成了递归调用，设置应为这个函数多用在持续的动画中};init();loop();});

创建类和方法:

                        class Circledot {  //圆点类constructor() { //构造方法 new一个实例 就会运行构造方法//圆点坐标初始化this.x = winW * Math.random();this.y = winH * Math.random();this.color = opts.circleColor; this.radius = opts.circleRadius + Math.random();//画圆点 this.只能在本类下使用this.element = new Circle({shape: {cx: this.x,cy: this.y,r: this.radius,},style: {fill: this.color,}});};updatePosition() { //修改圆点的坐标位置if(array[1]==100||array[1]==500){straightline();}else if(array[0]==300){t=0;x=array[0];arc();}else if(array[0]==900&&array[1]==499){x=array[0];arc();}else{arc();}this.x=array[0];this.y=array[1];this.element.shape.cx = this.x; //将修改的x抽坐标赋予圆点this.element.shape.cy = this.y; //将修改的y抽坐标赋予圆点this.element.dirty();	};}

所有代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>点按固定轨迹运动</title><script src="Scripts/esl.js" ></script><style>#main {position: absolute;left: 0;top: 0;background: #000;z-index: -1;}</style></head><body><canvas id="main"></canvas>  <!-- 画布 内含有坐标系 --><script>require.config({packages: [{name: 'zrender',location: 'Scripts/src', <!-- 引入zrender类库 -->main: 'zrender',},],});require(['zrender','zrender/graphic/shape/Circle','zrender/graphic/shape/Line',   <!-- 引入zrender类库里的函数 -->'zrender/graphic/shape/BezierCurve','zrender/graphic/shape/Arc'],function (zrender, Circle, Line, BezierCurve, Arc) { //-----全局var-----{var x=300,y=300,r=200,t=0; //主要针对圆点绕圆弧运动var array=new Array();   //创建一个数组用于储存圆点的位置坐标var winH = window.innerHeight; //同步页面宽、高var winW = window.innerWidth;var opts = {background: '#000', //Canvas背景色 circleRadius: 3, //圆点半径 circleColor: 'rgb(0, 255, 0)', //圆点颜色 circleAmount: 1, //生成的圆点数量 speed: 1, //圆点速度};var tid; //setTimeout id，防抖处理var circledots = []; //用于存储partical对象var zr = zrender.init(main, { width: winW, height: winH });zr.dom.style.backgroundColor = opts.background;window.addEventListener('resize', function () { //监听器 300ms触发一次clearTimeout(tid);var tid = setTimeout(function () {winW = zr.dom.width = window.innerWidth;winH = zr.dom.height = window.innerHeight;zr.refresh();}, 300); //这里设置了300ms的防抖间隔}, false);var line=new Line({shape:{x1:300,y1:100,	x2:900,y2:100},style:{stroke: '#F00'}});zr.add(line);var line=new Line({shape:{x1:300,y1:500,	x2:900,y2:500},style:{stroke: '#F00'}});zr.add(line);var BC = new BezierCurve({shape: {x1: 300, //起始y1: 500, //坐标cpx1: 1200 / 2,cpy1: 500,//贝塞尔中心坐标cpx2: 1200 / 2,cpy2: 100,//贝塞尔中心坐标x2: 900, //终点y2: 100  //坐标},style: {stroke: 'green', //贝塞尔曲线显示 并赋予绿色lineWidth: 2}});zr.add(BC);var bc = new BezierCurve({shape: {x1: 300, //起始y1: 100, //坐标cpx1: 1200 / 2, cpy1: 100, //贝塞尔中心坐标cpx2: 1200 / 2,cpy2: 500, //贝塞尔中心坐标x2: 900, //终点y2: 500  //坐标},style: {stroke: 'green',lineWidth: 2}});zr.add(bc);var arcc = new Arc({shape: {cx: 300,cy: 300,r: 200,startAngle:4.8,endAngle:1.5,clockwise:false},style: {fill: 'none',stroke: '#F00',lineWidth:2}});zr.add(arcc);var arci = new Arc({shape: {cx: 900,cy: 300,r: 200,startAngle:1.6,endAngle:4.7,clockwise:false},style: {fill: 'none',stroke: '#F00',lineWidth:2}});zr.add(arci);class Circledot {  //圆点类constructor() { //构造方法 new一个实例 就会运行构造方法//圆点坐标初始化this.x = winW * Math.random();this.y = winH * Math.random();this.color = opts.circleColor; this.radius = opts.circleRadius + Math.random();//画圆点 this.只能在本类下使用this.element = new Circle({shape: {cx: this.x,cy: this.y,r: this.radius,},style: {fill: this.color,}});};updatePosition() { //修改圆点的坐标位置if(array[1]==100||array[1]==500){straightline();}else if(array[0]==300){t=0;x=array[0];arc();}else if(array[0]==900&&array[1]==499){x=array[0];arc();}else{arc();}this.x=array[0];this.y=array[1];this.element.shape.cx = this.x; //将修改的x抽坐标赋予圆点this.element.shape.cy = this.y; //将修改的y抽坐标赋予圆点this.element.dirty();	};}function arc() { //圆弧运动公式var tr = t*Math.PI/360;//window.alert("tr:"+tr);var tx = x-Math.cos(tr)*r;//alert("tx:"+tx);var ty = y+Math.sin(tr)*r;//window.alert("tx:"+tx);//window.alert("ty:"+ty);this.x=tx;this.y=ty;array[0]=this.x;array[1]=this.y;t+=1;return array;}function straightline(){ //直线运动if(this.y==500||this.y==100){if(this.y==500){this.x=this.x+1;this.y=500;}else{this.x=this.x-1;this.y=100;}if(this.x==900){this.y=this.y-1;}else if(this.x==300){this.y=this.y-1;}}array[0]=this.x;array[1]=this.y;return array;}var init = function () { //初始化圆点对象for (let i = 0; i < opts.circleAmount; i++) {let p = new Circledot();circledots.push(p); //将实例化的对象添加到圆点类zr.add(p.element); //将圆点显示在画布上}};	function loop() { for (let i = 0; i < circledots.length; i++) {let p = circledots[i];p.updatePosition();}window.requestAnimationFrame(loop);//有了这句话，就形成了递归调用，设置应为这个函数多用在持续的动画中};init();loop();});</script></body></html>

结果如图所示:

图一:

图二:


http://chatgpt.dhexx.cn/article/5PaCknCl.shtml

相关文章

js画图插件-zrender

js画图插件-zrender

zrender&#xff08;Zlevel Render&#xff09; 是一个轻量级的Canvas类库&#xff0c;MVC封装&#xff0c;数据驱动&#xff0c;提供类Dom事件模型&#xff0c;让canvas绘图大不同&#xff01; MVC核心封装实现图形仓库、视图渲染和交互控制&#xff1a; Stroage(M) : shape数…
阅读更多...
ZRender文档研读

ZRender文档研读

ZRender文档研读 (基于4.3.2版本) 不使用最新的5.x.x的版本是因为线上文档和最新版本JS文件不匹配-2022年6月13日 1、文档地址 1、官方文档的地址&#xff1a;https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable 2、Github地址&#xff1a;https://git…
阅读更多...
React Developer Tools 下载

React Developer Tools 下载

React Developer Tools 下载 方法一&#xff1a;网页扩展工具 搜索 React Developer Tools 下载&#xff08;若浏览器不支持搜索React &#xff0c;行不通&#xff09; 打开chrome 浏览器 (只有 chrome 支持 React Developer Tools&#xff09;点击网页工具栏 右上方 确认添…
阅读更多...
zrender TypeError: “x“ is not a constructor

zrender TypeError: “x“ is not a constructor

如果有兴趣了解更多相关内容&#xff0c;欢迎来我的个人网站看看&#xff1a;耶瞳空间 我是调用zrender的init方法报错&#xff0c;如下图&#xff1a; 然后经过大佬指点&#xff0c;这种开发环境没问题但生产环境报错的东西&#xff0c;一般是因为打包的时候被tree-shaking…
阅读更多...
vue+zrender实现医院体温单

vue+zrender实现医院体温单

项目背景 医院医护项目需求&#xff0c;需要用H5做一个通用的体温单 项目演示 版本一 版本二 项目代码简介 由vue-cli4脚手架快速搭建生成&#xff0c;主要代码都在thermometer.vue文件里面&#xff0c;后续修改也主要是在这个文件修改。 项目需求难点在中间的网格部分…
阅读更多...
ZRender开发

ZRender开发

ZRender开发 开发文档&#xff1a;https://ecomfe.github.io/zrender-doc/public/ <!-- eslint-disable no-undef --> <template><div class"config-page"><div class"header"><el-button click"handleAdd">撒…
阅读更多...
Echarts 源码解读 一：zrender源码分析1var zr = zrender.init(document.getElementById(‘main‘))；

Echarts 源码解读 一：zrender源码分析1var zr = zrender.init(document.getElementById(‘main‘))；

2021SCSDUSC 因为Echarts是基于zrender进行实现的&#xff0c;所以解读echarts源码前&#xff0c;首先要对zrender有基本的了解。 zrender是canvas的一个类库&#xff0c;zrender是基于canvas实现的。 目录 zrender的src文件夹 文件夹&#xff1a; animation动画相关 cont…
阅读更多...
高效canvas绘图框架——zrender

高效canvas绘图框架——zrender

一个轻量级的Canvas类库&#xff0c;MVC封装&#xff0c;数据驱动&#xff0c;提供类Dom事件模型&#xff0c;让canvas绘图大不同 Architecture MVC核心封装实现图形仓库、视图渲染和交互控制&#xff1a; Stroage(M) : shape数据CURD管理Painter(V) : canvase元素生命周期管理…
阅读更多...
轻量级的Canvas类库zrender使用笔记 ：简单自定义图件开发

轻量级的Canvas类库zrender使用笔记 ：简单自定义图件开发

ECharts&#xff0c;一个纯 Javascript 的图表库&#xff0c;底层依赖轻量级的 Canvas 类库 ZRender&#xff0c;提供直观&#xff0c;生动&#xff0c;可交互&#xff0c;可高度个性化定制的数据可视化图表。当然我们自己可能有些需求&#xff0c;通过修改ECharts或者highchar…
阅读更多...
vue-echarts的ZRender事件

vue-echarts的ZRender事件

首先贴出 vue-echarts 的官网连接&#xff1a;https://www.npmjs.com/package/vue-echarts 1、vue-echarts 具体在vue中的使用方法&#xff0c;本文中就暂时不多介绍了&#xff1b; 2、如何在vue中使用vue-echarts的鼠标事件&#xff1a; 具体使用方式跟vue中使用echarts一样&a…
阅读更多...
ZRender文档研读 （基于4.3.2版本）

ZRender文档研读 （基于4.3.2版本）

ZRender文档研读 &#xff08;基于4.3.2版本&#xff09; 不使用最新的5.x.x的版本是因为线上文档和最新版本JS文件不匹配-2022年6月13日 1、文档地址 1、官方文档的地址&#xff1a;https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable 2、Github地址…
阅读更多...
【ZRender 渲染引擎 - 贰】 | Vue 框架集成与绘制其他图元

【ZRender 渲染引擎 - 贰】 | Vue 框架集成与绘制其他图元

theme: cyanosis 持续创作&#xff0c;加速成长&#xff01;这是我参与「掘金日新计划 10 月更文挑战」的第 8 天&#xff0c;点击查看活动详情 1. Vue 中使用 ZRender 上一篇中&#xff0c;我们通过最原始的方式体验了一下 ZRender 的使用。接下来&#xff0c;为了更方便管理…
阅读更多...
zrender实现图形缩放功能

zrender实现图形缩放功能

zrender实现图形缩放功能 一、绘制一个矩形图 <div id"main-container"></div>#main-container {width: 500px;height: 300px;border: 1px solid #888; }import * as zrender from zrenderconst container document.querySelector(#main-container) c…
阅读更多...
ECharts 3.0底层zrender 3.x源码分析1-总体架构

ECharts 3.0底层zrender 3.x源码分析1-总体架构

zrender是一个轻量级的Canvas类库&#xff0c;作为百度Echarts 3.0的底层基础。截至目前查看的zrender源码和文档&#xff0c;包括官网文档都还停留在2.x时代&#xff0c;我打算用一个系列介绍下zrender 3.x的使用和源码&#xff0c;一些demo和没有在博客中介绍的源码请进我的g…
阅读更多...
ZRender （Canvas）简单使用（拖拽、缩放、旋转、文字、层级）

ZRender （Canvas）简单使用（拖拽、缩放、旋转、文字、层级）

一、ZRender 是二维绘图引擎&#xff0c;它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器&#xff1b; 二、下面是以图片做的简单demo&#xff0c;分为左中右三部分&#xff0c;左边是需要的图片&#xff0c;中间是绘图部分&#xff0c;右边是添加文字…
阅读更多...
源码解读之zrender-ZRender 类(3)

源码解读之zrender-ZRender 类(3)

00 小结 当我们在 zrender.init(document.getElementById(“canvas”))时&#xff0c;首先实例化了一个 ZRender 实例&#xff0c;在这个实例化过程中&#xff0c;主要实例化了&#xff1a; Storage 类&#xff0c;作用类似于全局状态管理Painter 类&#xff0c;可以理解为画…
阅读更多...
【ZRender 渲染引擎 - 壹】 | 基础图形元素绘制

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

theme: cyanosis 持续创作&#xff0c;加速成长&#xff01;这是我参与「掘金日新计划 10 月更文挑战」的第 7 天&#xff0c;点击查看活动详情 开篇前言 在掘金认识我的都知道&#xff0c;我主要是研究 Flutter 的。其实我一直希望开发出一套好用的 Flutter 的图表库&#xf…
阅读更多...
zrender学习

zrender学习

这个是项目总结&#xff0c;不适合学习 <div id"canvas" style"background-image:url(./canvasbg.gif)"></div> 定义zrender初始化对象&#xff0c;背景是一个gif图 样式如下 ↓ 工程里&#xff0c; topo.html <div id "containe…
阅读更多...
zrender源码学习笔记（一）：认识zrender

zrender源码学习笔记（一）：认识zrender

本文内容 入门zrender绘制原理 入门zrender zrender是Echarts底层的2D绘图引擎&#xff0c;在搞懂其原理之前&#xff0c;我们先学会如何使用zrender&#xff0c;我们从绘制一个简单圆形入门。这里也给出官网入门教程 初始化 zrender.init(dom)初始化zrender实例&#xff0c…
阅读更多...
zrender 知识：使用zrender搭建流程图工具

zrender 知识：使用zrender搭建流程图工具

首先看下最终的效果图&#xff1a; 主要使用的技术是zrender.js和vue.js&#xff0c;zrender 用于实现流程图&#xff0c;vue搭建整体架构。 本篇文章主要面向对zrender有一定了解的同学。 本篇文章只讲解核心flowchart的实现方法。 一.分析 流程图主要包含节点node、联系e…
阅读更多...
推荐文章

Copyright @ 2022~2023