精华内容
下载资源
问答
  • zrender 教程帮助

    2018-06-10 01:06:49
    zrender 来自官网的教程帮助: MVC核心封装实现图形仓库、视图渲染和交互控制: Stroage(M) : shape数据CURD管理 Painter(V) : canvas元素生命周期管理,视图渲染,绘画,更新控制 Handler(C) : 事件交互处理,...
  • 主要介绍了使用zrender.js绘制体温单效果,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • zrender框架

    2017-06-07 15:26:30
    引入了zrender的项目,还有demo,下载即可使用.
  • ZRender文档 安装 开始之前并运行此项目,请确保您有Nodejs和gulp安装。 如果要在Windows上构建源代码,则还需要安装Ruby和Bundler 如果您在安装Jekyll时遇到问题,请访问。 安装gulp npm i -g gulp 安装依赖项 ...
  • 适用于zrender 适用于zrender 版本 zrender版本:4.0.4 sciter最低版本:4.1.8.5918 已知的不受支持的功能 SVG / VML画布 图像图案笔刷 路径笔划(边界)命中测试(处理) zrImage(处理中) ...
  • Zrender 3.x API文档

    2017-10-12 15:51:54
    Zrender3.x API 文档 详细介绍了zrender的具体使用以及属性简介。 用文本编辑器打开即可。
  • ZRender-源码

    2021-03-18 16:28:14
    ZRender ZRender是Windows平台上的玩具软件光栅化应用程序,仅用于学习计算机图形学。 现在实现功能 画线 画三角形 纹理贴图 深度测试 phong底纹 模型转换 输出 纹理映射 转型 古劳阴影 阴影
  • 轻量级的Canvas类库 ZRender ,zrender(Zlevel Render) 是一个轻量级的Canvas类库,MVC封装,数据驱动,...
  • ECharts最全的详细示例demo,包含了zrender,都是可以直接运行调试的。
  • zrender.rar

    2020-07-30 15:49:37
    zrender工具生成树状图,思维导图支持高度自定义,生成后可以下载为图片,支持自定义大小,此工具可接入vue项目与js项目
  • ZRender 一个轻量级的图形库,可为提供2d绘制。 文献资料 执照 BSD 3条款许可 百度公司(c)2017版权所有。保留所有权利。 如果满足以下条件,则允许以源代码和二进制形式进行重新分发和使用,无论是否经过修改,...
  • zrender的使用文件

    2020-12-23 11:27:28
    canvans,体温单绘制,三测单
  • zrender实现的鱼骨图

    2015-07-31 17:04:04
    zrender实现的鱼骨图。支持各种浏览器以及分辨率
  • zrender-API

    2018-08-09 19:58:52
    ZRender 是二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。
  • zrender-1.1.2.zip

    2019-07-03 12:49:05
    zrender-1.1.2.zip
  • zrender实现的人物关系图 拓扑图

    热门讨论 2015-08-06 19:10:57
    zrender封装实现的人物关系拓扑图,可实现人物关系的展开收缩,实现人物关系添加备注信息,实现人物双击显示人物的详细信息,效果非常棒。支持IE8,chrome。适应各种分辨率。有各种动画效果。可以拖拽。可以放大缩小...
  • zrender canvas类库

    2018-05-30 14:10:18
    一个轻量级的Canvas类库,MVC封装,数据驱动,提供类Dom事件模型,让canvas绘图大不同
  • 前端项目-zrender.zip

    2019-09-02 15:49:41
    前端项目-zrender,为Echarts提供二维绘图的轻量级画布库。
  • zrender.js

    2018-06-15 09:49:15
    一个轻量级的Canvas类库,MVC封装,数据驱动,提供类Dom事件模型,让canvas绘图大不同!
  • zrender-2.1.1

    2016-05-06 16:11:26
    zrender-2.1.1 官网下载,完整源码,附实例
  • 使用zrender绘制基本图形

    千次阅读 2019-06-03 08:38:32
    基于zrender实现在canvas中绘制基本图形 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo1</title> <script type="text/javascript" src="js/...

    基于zrender实现在canvas中绘制基本图形 

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>demo1</title>
    	<script type="text/javascript" src="js/echarts.js"></script>
    </head>
    <body>
    	<div id="main" style="height:600px;width:600px;"></div>
    	<script type="text/javascript">
    		var main = echarts.init(document.getElementById('main'));
    		var option = {
    			title:{
    				text:'ECharts demo'
    			},
    			legend:{
    				data:['销量']
    			},
    			xAxis:{
    				data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    			},
    			yAxis:{},
    			series:[{
    				name:'销量',
    				type:'bar',
    				data:[5,20,36,10,10,20]
    			}]
    		};
    		main.setOption(option);
    	</script>
    	<input type="text" id="text"placeholder="请输入文字"/><br/><br/>
    	<input type="button" name="" value="写入文字" id="btn"/><br/><br/>
    	<input type="file" id="file"placeholder="请输入图片"/><br/><br/>
    	<input type="button" name="" value="导入图片" id="btn1"/><br/><br/>
    	<canvas id="mycv" width="600px" height="600px" style="border:1px solid black">
    		您的浏览器不支持canvas
    	</canvas>
    	<script text="text/javascript">
    	var canvas1 = document.getElementById("mycv");
    	var text= document.getElementById("text");
    	var btn = document.getElementById("btn");
    	var arr=[];
    	var imgs=[];//canvas中的所有图像
    	var img;//当前操作的图像
    	btn.onclick = function(){
    		var value = text.value;
    		if(canvas1.getContext){
    			var ctx = canvas1.getContext("2d");
    			ctx.font = "bold 30px arial";
    			ctx.fillStyle="black";
    			ctx.fillText(value,150,150);
    		}
    	}
    	var btn1 = document.getElementById("btn1");
    	btn1.onclick = function(){
    		let reader = new FileReader();
    		reader.readAsDataURL(document.querySelector("#file").files[0]); 
    		reader.onload = function (e) { 
    			let result = e.target.result; // base64格式图片地址
    			img = new Image();
    			img.src = result; // 设置image的地址为base64的地址
    			img.onload = function () {
    				if(canvas1.getContext){
    					var ctx = canvas1.getContext("2d");
    					ctx.drawImage(img, 0, 0, 100, 100);
    					arr.push(ctx.getImageData(0, 0, canvas1.width, canvas1.height));
    					imgs.push([img,0,0,100,100]);
    				}
    
    			}
    		};
    	}
    	canvas1.onmousedown = function (e) {
    		let ax, ay, x, y;
    
    		canvas1.onmousemove = function (e) {
    			x = e.clientX;
    			y = e.clientY;
    			arr.pop();
    			imgs.pop();
    			ctx = canvas1.getContext("2d");
    			// //先清除之前的然后重新绘制
    			ctx.clearRect(0, 0, canvas1.width, canvas1.height);
    			// 	if (arr.length != 0) {
    			// 	ctx.putImageData(arr[arr.length - 1], 0, 0, 0, 0, canvas1.width, canvas1.height);
    			// }
    			imgs.forEach(function(item, index){
    				ctx.drawImage(item[0], item[1], item[2],item[3],item[4]);
    			});
    			ctx.drawImage(img, x-50, y-250, 100, 100);
    			arr.push(ctx.getImageData(0, 0, canvas1.width, canvas1.height));
    			imgs.push([img,x-50, y-250, 100, 100]);
    		};
    		canvas1.onmouseup = function () {
    			canvas1.onmousemove = null;
    			canvas1.onmouseup = null;
    		};
    	}
    	</script>
    </body>
    </html>
    var type = "pen";//当前画图的类型
    //用于保存所有画出的图形,包括图片
    var objs = [];
    var canvas;
    var zr;
     //设置类型
    function setType(t){
        type=t;
        //界面展示当前操作名称
        var operate = document.getElementById("operate");
        switch(t){
            case "img":
                operate.innerText="导入图片";
                break;
            case "pen":
                operate.innerText="铅笔";
                break;
            case "line":
                operate.innerText="直线";
                break;
            case "circle":
                operate.innerText="圆";
                break;
            case "rect":
                operate.innerText="矩形";
                break;
            case "isogon":
                operate.innerText="正多边形";
                break;
            case "":
                operate.innerText="移动";
                break;
        }
        //类型为空代表移动,其他时候设置图形不可移动防止画新图形时改变原有图形的位置
        objs = zr.storage._displayList;
        if(type == ""){
            for (let index = 0; index < objs.length; index++) {
                var tmpobj = objs[index];
                objs[index].attr({"draggable":true})
            }
        } else{
            for (let index = 0; index < objs.length; index++) {
                var tmpobj = objs[index];
                objs[index].attr({"draggable":false})
            }
        }
        zr.refresh();
    }
    
    window.onload = function() {
        var btn1 = document.getElementById("btn1");
        var saveAndClear = document.getElementById("saveAndClear");
        var clear = document.getElementById("clear");
        var load = document.getElementById("load");
        var undo = document.getElementById("undo");
        canvas = document.getElementById('mycv');
        zr = zrender.init(canvas);
        
        var obj;//当前画图的对象
        var penline=[];
        var objParam =[];//保存已画图形的关键元素
        var s;//将当前对象序列化后的内容
        //保存历史记录,用于撤销绘图
        var objsHistory=[];
        //清除画布但保留已画对象
        saveAndClear.onclick = function(){
            objs = zr.storage._displayList;//获取当前画布上的所有内容
            for (let index = 0; index < objs.length; index++) {
                var elementParam = [];
                var element = objs[index];
                var elementType = element.__proto__.type;//类型
                var transform = element.transform;//平移
                
                elementParam.push(elementType);
                switch(elementType){
                    case "polyline"://曲线
                        var elementPoints = element.shape.points;
                        var elementSmooth = element.shape.smooth;
                        var elementStroke = element.style.stroke;
                        var elementLineWidth = element.style.lineWidth;
                        var opts = {
                            rectHover:true,
                            shape: {
                                points:elementPoints,
                                smooth:elementSmooth
                            },
                            style:{
                                stroke:elementStroke,
                                lineWidth:elementLineWidth
                            },
                            position:[transform == null ? 0 : transform[4], transform == null ? 0 : transform[5]]
                        }
                        elementParam.push(opts);
                        break;
                    case "line":
                        var x1 = element.shape.x1;
                        var x2 = element.shape.x2;
                        var y1 = element.shape.y1;
                        var y2 = element.shape.y2;
                        var elementStroke = element.style.stroke;
                        var elementLineWidth = element.style.lineWidth;
                        var opts = {
                            rectHover:true,
                            shape: {
                                x1: x1,
                                y1: y1,
                                x2: x2,
                                y2: y2,
                                percent:1
                            },
                            style:{
                                stroke:elementStroke,
                                lineWidth:elementLineWidth
                            },
                            position:[transform == null ? 0 : transform[4], transform == null ? 0 : transform[5]]
                        }
                        elementParam.push(opts);
                        break;
                    case "circle":
                        var cx = element.shape.cx;
                        var cy = element.shape.cy;
                        var r = element.shape.r;
                        var elementStroke = element.style.stroke;
                        var elementLineWidth = element.style.lineWidth;
                        var opts = {
                            rectHover:true,
                            shape: {
                                cx: cx,
                                cy: cy,
                                r: r,
                            },
                            style:{
                                fill:"rgba(255,255,255,0",
                                stroke:elementStroke,
                                lineWidth:elementLineWidth
                            },
                            position:[transform == null ? 0 : transform[4], transform == null ? 0 : transform[5]]
                        }
                        elementParam.push(opts);
                        break;
                    case "rect":
                        var x = element.shape.x;
                        var y = element.shape.y;
                        var width = element.shape.width;
                        var height = element.shape.height;
                        var elementStroke = element.style.stroke;
                        var elementLineWidth = element.style.lineWidth;
                        var opts = {
                            rectHover:true,
                            shape: {
                                x: x,
                                y: y,
                                width:width,
                                height:height
                            },
                            style:{
                                fill:"rgba(255,255,255,0",
                                stroke:elementStroke,
                                lineWidth:elementLineWidth
                            },
                            position:[transform == null ? 0 : transform[4], transform == null ? 0 : transform[5]]
                        }
                        elementParam.push(opts);
                        break;
                    case "isogon":
                        var x = element.shape.x;
                        var y = element.shape.y;
                        var r = element.shape.r;
                        var n = element.shape.n;
                        var elementStroke = element.style.stroke;
                        var elementLineWidth = element.style.lineWidth;
                        var opts = {
                            rectHover:true,
                            shape: {
                                x:x,
                                y:y,
                                r:r,
                                n:n
                            },
                            style:{
                                fill:"rgba(255,255,255,0",
                                stroke:elementStroke,
                                lineWidth:elementLineWidth
                            },
                            position:[transform == null ? 0 : transform[4], transform == null ? 0 : transform[5]]
                        }
                        elementParam.push(opts);
                        break;
                    case "image":
                        var x = element.style.x;
                        var y = element.style.y;
                        var width = element.style.width;
                        var height = element.style.height;
                        var image = element.style.image;
                        var opts = {
                            style: {
                                image:image,
                                x:100,
                                y:100,
                                width:200,
                                height:200
                            },
                            position:[transform == null ? 0 : transform[4], transform == null ? 0 : transform[5]]
                        }
                        elementParam.push(opts);
                        break;
                }
    
                objParam.push(elementParam);
            }
            s = JSON.stringify(objParam)
            console.log(s);
            zr.clear();
            objs=[];
        }
    
        //清除画布,不保留已画对象
        clear.onclick = function(){
            zr.clear();
            objs = [];
            objsHistory=[];
        }
        //加载最后一次绘画
        load.onclick = function(){
            zr = zrender.init(canvas);
            objParam = eval('('+s+')');
            for (let index = 0; index < objParam.length; index++) {
                var element = objParam[index];
                var elementType = element[0];
                var elementParam = element[1];
                switch(elementType){
                    case "polyline":
                        obj = new zrender.Polyline(elementParam);
                        zr.add(obj);
                        break;
                    case "line":
                        obj = new zrender.Line(elementParam);
                        zr.add(obj);
                        break;
                    case "circle":
                        obj = new zrender.Circle(elementParam);
                        zr.add(obj);
                        break;
                    case "rect":
                        obj = new zrender.Rect(elementParam);
                        zr.add(obj);
                        break;
                    case "isogon":
                        obj = new zrender.Isogon(elementParam);
                        zr.add(obj);
                        break;
                    case "image":
                        obj = new zrender.Image(elementParam);
                        obj.on("mousewheel", function(params){
                            var shape = params.target;
                            var event = params.event;
                            var delta = event.wheelDelta;
                            if(delta>0){
                                img.attr("height",shape.style.height += 10);
                                img.attr("width",shape.style.width += 10);
                            } else{
                                img.attr("height",shape.style.height -= 10);
                                img.attr("width",shape.style.width -= 10);
                            }
                            zr.refresh();
                        });
                        zr.add(obj);
                        break;
                }
                //添加鼠标双击事件,修改线的宽及颜色
                obj.on("dblclick",function(){
                    var lineWidth = document.getElementById("input2").value;
                    var color = document.getElementById("input3").value;
                    this.attr({
                        style:{
                            stroke:color,
                            lineWidth:lineWidth
                        }
                    });
                });
            }
            objParam=[]
        }
        //撤销
        undo.onclick = function(){
            zr.clear();
            objsHistory.pop();
            objs = objsHistory[objsHistory.length-1];
            if(objs != undefined){
                zr = zrender.init(canvas);
                for (let index = 0; index < objs.length; index++) {
                    zr.add(objs[index]);
                }
            }else{
                objs=[];
            }
        }
        //导入图片
        btn1.onclick = function(){
            type="image";
            let reader = new FileReader();
            reader.readAsDataURL(document.querySelector("#file").files[0]);
            reader.onload = function (e) { 
                let result = e.target.result; // base64格式图片地址
                var img = new zrender.Image({
                    style: {
                        image:result,
                        x:100,
                        y:100,
                        width:200,
                        height:200
                    }
                });
                //圖片支持縮放
                img.on("mousewheel", function(params){
                    var shape = params.target;
                    var event = params.event;
                    var delta = event.wheelDelta;
                    if(delta>0){
                        img.attr("height",shape.style.height += 10);
                        img.attr("width",shape.style.width += 10);
                    } else{
                        img.attr("height",shape.style.height -= 10);
                        img.attr("width",shape.style.width -= 10);
                    }
                    zr.refresh();
                });
                zr.add(img);
                //历史记录中保存当前所有元素的集合,用于撤销操作
                objs = zr.storage._displayList;
                objsHistory.push(new Array().concat(objs));
            };
        }
    
        //繪製圖形
        canvas.onmousedown = function(e){
            var x0, y0;
            x0 = e.offsetX;
            y0 = e.offsetY;
            var lineWidth = document.getElementById("input2").value;
            var color = document.getElementById("input3").value;
            //圆
            if(type == "circle"){
                var r=10;
                obj = new zrender.Circle({
                    shape: {
                        cx: x0,
                        cy: y0,
                        r: r
                    },
                    style:{
                        fill:"rgba(255,255,255,0",
                        stroke:color,
                        lineWidth:lineWidth
                    }
                });
                
                zr.add(obj);
            }
            //矩形
            if(type == "rect"){
                obj = new zrender.Rect({
                    shape: {
                        x: x0,
                        y: y0,
                        width: 10,
                        height:10
                    },
                    style:{
                        fill:"rgba(255,255,255,0",
                        stroke:color,
                        lineWidth:lineWidth
                    }
                });
                zr.add(obj);
            }
            //正多边形
            if(type == "isogon"){
                var n = document.getElementById("input1").value;
                obj = new zrender.Isogon({
                    shape: {
                        x: x0,
                        y: y0,
                        r: 10,
                        n: n
                    },
                    style:{
                        fill:"rgba(255,255,255,0",
                        stroke:color,
                        lineWidth:lineWidth
                    }
                });
                zr.add(obj);
            }
            //直线
            if(type == "line"){
                obj = new zrender.Line({
                    rectHover:true,
                    shape: {
                        x1: x0,
                        y1: y0,
                        x2: x0,
                        y2: y0,
                        percent:1
                    },
                    style:{
                        stroke:color,
                        lineWidth:lineWidth
                    }
                });
                zr.add(obj);
            }
            //曲线
            if(type == "pen"){
                penline.push([x0,y0]);
                obj = new zrender.Polyline({
                    rectHover:true,
                    shape: {
                        points:penline,
                        smooth:0.5
                    },
                    style:{
                        stroke:color,
                        lineWidth:lineWidth
                    }
                });
                zr.add(obj);
            }
            //定义鼠标移动事件,用于画图
            canvas.onmousemove = function(e){
                x1 = e.offsetX;
                y1 = e.offsetY;
                //移动鼠标修改圆的半径
                if(type == "circle"){
                    zr.remove(obj);
                    var r=Math.sqrt(Math.pow(x0-x1,2)+Math.pow(y0-y1,2));
                    obj = new zrender.Circle({
                        shape: {
                            cx: x0,
                            cy: y0,
                            r: r
                        },
                        style:{
                            fill:"rgba(255,255,255,0)",
                            stroke:color,
                            lineWidth:lineWidth
                        }
                    });
                    zr.add(obj);
                }
                //移动鼠标修改矩形长宽
                if(type == "rect"){
                    zr.remove(obj);
                    obj = new zrender.Rect({
                        shape: {
                            x: x0,
                            y: y0,
                            width: x1-x0,
                            height:y1-y0
                        },
                        style:{
                            fill:"rgba(255,255,255,0",
                            stroke:color,
                            lineWidth:lineWidth
                        }
                    });
                    zr.add(obj);
                }
                //修改正多边形大小
                if(type == "isogon"){
                    zr.remove(obj);
                    var n = document.getElementById("input1").value;
                    var r=Math.sqrt(Math.pow(x0-x1,2)+Math.pow(y0-y1,2));
                    obj = new zrender.Isogon({
                        shape: {
                            x: x0,
                            y: y0,
                            r: r,
                            n: n
                        },
                        style:{
                            fill:"rgba(255,255,255,0",
                            stroke:color,
                            lineWidth:lineWidth
                        }
                    });
                    zr.add(obj);
                }
                //修改直线的长度及方向
                if(type == "line"){
                    zr.remove(obj);
                    obj = new zrender.Line({
                        rectHover:true,
                        shape: {
                            x1: x0,
                            y1: y0,
                            x2: x1,
                            y2: y1,
                            percent:1
                        },
                        style:{
                            stroke:color,
                            lineWidth:lineWidth
                        }
                    });
                    zr.add(obj);
                }
                //画曲线
                if(type == "pen"){
                    zr.remove(obj);
                    penline.push([x1,y1]);
                    obj = new zrender.Polyline({
                        rectHover:true,
                        shape: {
                            points:penline,
                            smooth:0.5
                        },
                        style:{
                            stroke:color,
                            lineWidth:lineWidth
                        }
                        
                    });
                    zr.add(obj);
                }
            }
            //鼠标松开后为元素添加双击事件,历史记录中保存数据方便撤销
            canvas.onmouseup = function(e){
                canvas.onmousemove = null;
                //保存绘画的对象
                if(obj != undefined){
                    //支持修改线宽度
                    obj.on("dblclick",function(){
                        var lineWidth = document.getElementById("input2").value;
                        var color = document.getElementById("input3").value;
                        this.attr({
                            style:{
                                stroke:color,
                                lineWidth:lineWidth
                            }
                        });
                    });
                    objs = zr.storage._displayList;
                    //历史记录中保存当前所有元素的集合,用于撤销操作
                    objsHistory.push(new Array().concat(objs));
                }
                
                //清空铅笔画线的点集
                penline=[];
                obj = null;
            }
        }
    }
    

     

    展开全文
  • 数据可视化测试 用。 预习
  • 主要分为两个部分,第一个部分是echarts替代zrender源码,第二个部分是echarts源码。 均是基于3.x版本。 zrender博文地址 echarts博文地址 或者在里面查看
  • ZRender

    2018-09-11 21:40:00
    https://ecomfe.github.io/zrender-doc/public/ 转载于:https://www.cnblogs.com/cnki/p/9630552.html

    https://ecomfe.github.io/zrender-doc/public/

    转载于:https://www.cnblogs.com/cnki/p/9630552.html

    展开全文
  • zrender学习

    千次阅读 2019-07-01 17:09:29
    这个是项目总结,不适合学习 <divid="canvas"style="background-image:url(./...定义zrender初始化对象,背景是一个gif图 样式如下 ↓ 工程里, topo.html <div id = "container"> 画布 ...

    这个是项目总结,不适合学习

     

    <div id="canvas" style="background-image:url(./canvasbg.gif)"></div>

    定义zrender初始化对象,背景是一个gif图

    样式如下 ↓

     

    工程里, topo.html 

    <div id = "container">
    画布
                    #container{
                         /* width: calc(83.5% - 200px); */
                         width: calc(83.5%);  /** calc是用来设置动态值 **/
                         height: calc(99% - 30px - 1%);
                         box-sizing: border-box;
                         border: 2px solid;
                         border-color: #0C554A;
                         overflow: hidden;
                         background-color: white;
                         float: left;
                         margin-right: 0.5%;
                    }
    
    
    

    在topo.html中初始化

     

    <div id="div-canvas" style="overflow-x: hidden; overflow-y: hidden;"></div>

    zrender初始化对象

     

     

    画布背景图已经解决...现在开始学习起zrender

     

     

     

    body{margin:0;}

    margin控制元素外框与包含该元素的容器的边框距离。这句话让网页顶部顶到浏览器顶部,(默认是有一段空白的)。但是这么写会使网页也靠着浏览器左边,最好写成margin-top:0;margin-left:auto;

     

    在topo-painter.js 324行

    收到了后端数据,然后画出了zrender图像

     

    步骤:先画一条母线

     

    文档中初始化zrender是 : zrender.init(dom, opts)

     

    现在的写法 :  var zr = zrender.init(document.getElementById('canvas')),

     

    这样就得到了一个初始化的zrender对象,可以进行各种操作。

    刚刚一直没有反应是因为那个傻逼用了自己定义的zrender.js。草他妈一直以为的是官方的js,别人拷过来的项目也不管用才知道的是那个傻逼把js改了。草他妈

     

    要注意引入的js包,看一下成功代码

     

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>zrender测试</title>

         <script type="text/javascript" src="js/zrender.js"></script>

         <script type="text/javascript" src="js/esl.js"></script>

         <script type="text/javascript" src="js/prototype.min.js"></script>

         <style type="text/css">

         html, body{margin: 0;  height:100%; overflow-x: hidden; overflow-y: hidden;}

                    #container{

                         /* width: calc(83.5% - 200px); */

                         width: calc(83.5%);  /** calc是用来设置动态值 **/

                         height: calc(99% - 30px - 1%);

                         box-sizing: border-box;

                         border: 2px solid;

                         border-color: #0C554A;

                         overflow: hidden;

                         background-color: white;

                         float: left;

                         margin-right: 0.5%;

                    }          

         </style>

    </head>

    <body>

         <!--  定义一个zrender初始化的对象 -->

         <div  id ="container" >

               <div id="canvas"  class="canvas" style="height:100px;width:100px;" ></div>

         </div>

         <script type="text/javascript">

               //alert("123");

               var con = document.getElementById("container");

               //alert(con.getHeight());

             var zr = zrender.init(document.getElementById('canvas')),

              //window.alert("123"),

              h = zr.getHeight(),

                 w = zr.getWidth(),

                 line = new zrender.Line({

                 shape: {

                     x1: 350,

                     y1: 100,

                     x2: 350,

                     y2: 600

                 },

                 style: {

                     stroke: 'black',

                     lineWidth: 5

                 },

                 draggable:true

             });

             zr.add(line);

         </script>

    </body>

    </html>

     

    前台已经出现一个可拖拽的竖线。

    第一个问题,背景是 container , zrender是canvas .container的宽高设置的动态值,canvas也要设置动态值,canvas不设置宽高,没有东西显示

    canvas是画布,所有东西要放到里面才能显示。

     

    那些器材设备先不管,

    先把主要线路画出来...

    比如谁的谁的子,谁是什么东西,赶紧画出来,还有递归,要重新写。 逻辑没问题。但是遍历,只遍历到第一个的时候,就跳到下一个了

    花了将近一个小时,不出图,只是因为格式写错了,height:100px;  后面跟的是分号,我写的逗号。好无语

     


     

    拿到了zrender初始化对象,现在要做的就是如何从后台拿到数据,传给zrender自动绘图。

     

    zrender是怎么初始化,然后接收数据,最后在成图的呢? 请我们拭目以待。

     

    topo-painter.js  361行,onload页面加载函数,页面加载完整之后,对zrender进行初始化。

    1.获得背景的宽高,对zrender进行同 宽高 -2 放置

    2.定义了鼠标选中移动,按下,弹起,滚轮的放大放小事件

    (前端不是我的主力,没必要把精力放在这里,如何画出图,创造最效率的后台,是我的重心)

     

    ...

    现在是自己画,不需要加绕组什么的,先把图做出来。,然后再添加素材

    1.传什么数据过来,可以传List吗,还是传什么? //已经传了一个List过来,就要进行参数设置了

    2.现在桌面已经成图了。可以慢慢先画着

     

     

     

    当前有两个问题,

    1.前面的是一个的,就会导致,后面会增长很多

     

     

    2.当前上面是一个的,也会导致下面的长度增加

     

     

    添加动画

    绘制一条虚线,加上动画,在0.5秒的时间里绘制从0%到100%

     

     

     

     var line = new zrender.Line({  

           shape: {  

                x1:10,  

                y1:10,  

               x2:100,  

               y2:10,  

                percent:0  

            },  

            style: {  

                stroke:'#434348',  

                lineDash:[5,5]

            }

        });

        line.animate('shape', false)  

           .when(500, {  

               percent: 1  

            }).start();  

        zr.add(line);

     

    当前就是一个动画,只不过上面的是虚线的动画

     

     

     

     

     

     

    展开全文
  • 二维绘图引擎ZRender

    千次阅读 2019-12-13 16:49:27
    ZRender 是二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。 2、下载 ZRender 项目在 gitHub ,也可以使用 npm install zrender 下载。 在 dist 目录下找到 zrender.js 和 ...

    1、开始使用
    描述
    ZRender是二维绘图引擎,它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器。
    下载
    ZRender 项目在 gitHub ,也可以使用 npm install zrender 下载。
    在 dist 目录下找到 zrender.js 和 zrender.min.js,前者是开发版,后者是发布版。
    初始化 ZRender
    在使用 ZRender 前需要初始化实例,具体方式是传入一个 DOM 容器:

    var zr = zrender.init(document.getElementById('main'));
    

    创建出的这个实例对应文档中 zrender 实例部分的方法和属性。
    在场景中添加元素
    ZRender 提供了将近 20 种图形类型,可以在文档 zrender.Displayable 下找到。如果想创建其他图形,也可以通过 zrender.Path.extend 进行扩展。
    以创建一个圆为例:

    //圆
    var circle = new zrender.Circle({
        shape: {
            cx: 150,
            cy: 50,
            r: 40
        },
        style: {
            fill: 'none',
            stroke: '#F00'
        }
    });
    zr.add(circle);
    
    //圆弧
    var arc=new zrender.Arc({
                style:{
                    stroke:'none',
                    fill:'red'
                },
                shape:{
                    cx:300,
                    cy:300,
                    r:140,
                    startAngle:0,              //开始角度
                    endAngle:Math.PI/3         //结束角度
                }
            });
            zr.add(arc);
            
    		//扇形
            var sector=new zrender.Sector({
                style:{
                    fill:'red'
                },
                shape:{
                    cx:300,
                    cy:300,
                    r:80,                     //外半径
                    r0:0,                    //内半径
                    startAngle:0,             //开始角度
                    endAngle:Math.PI/3,       //结束角度
                    clockwise:true            //顺时针
                }
            });
            zr.add(sector);
     //椭圆
            var ellipse=new zrender.Ellipse({
                style:{
                    fill:'red'
                },
                shape:{
                    cx:200,
                    cy:200,
                    rx:80,         //横向半径
                    ry:40           //纵向半径
                }
            })
            zr.add(ellipse);
     //心型
            var heart =new zrender.Heart({
                style:{
                    fill:'red'
                },
                shape:{
                    cx:200,
                    cy:200,
                    width:80,
                    height:100
                }
            });
            zr.add(heart);
            //多边形
            var Polygon=new zrender.Polygon({
                style:{
                    fill:'red'
                },
                shape:{
                    points:[[100,100],[200,80],[300,160],[150,130],[20,300]]    //坐标集合
                }
            })
            zr.add(Polygon)
    

    创建了一个圆心在 [150, 50] 位置,半径为 40 像素的圆,并将其添加到画布中。
    修改图形元素属性
    通过 a = new zrender.XXX 方法创建了图形元素之后,可以用 a.shape 等形式获取到创建时输入的属性,但是如果需要对其进行修改,应该使用 a.attr(key, value) 的形式修改,否则不会触发图形的重绘。例子:

    var circle = new zrender.Circle({
        shape: {
            cx: 150,
            cy: 50,
            r: 40
        }
    });
    zr.add(circle);
    console.log(circle.shape.r); // 40
    circle.attr('shape', {
        r: 50 // 只更新 r。cx、cy 将保持不变。
    });
    

    图形里的文字
    text:'图形文字', //文字
    textFill:'#333', //文字颜色
    fontSize:12, //文字大小
    fontFamily:'', //字体
    fontStyle:'normal', //字形
    fontWeight:'normal', //加粗
    textStroke:'yellow', //文字描边
    textWidth:1, //字体线宽
    textHeight:12, //字体高度
    textLineWidth:1, //字体描边线宽
    textLineHeight:14, //字体行高
    textPosition:'inside', //字体位置
    textPadding:[0,0,0,0], //文字内边距
    transformText:true //字体跟随变换效果

    //图形里的文字
            circle.attr({
                style:{
                    text:'江西理工大学',   //文字
                    textFill:'yellow',   //文字颜色
                    fontSize:10,    //文字大小
                    textPosition:'inside',    //字体位置
                    textPadding:[3,3,3,3],    //文字内边距
                    // transformText:true    //字体跟随变换效果
                }
            })
    

    如何给图形添加事件响应?
    ZRender支持的事件有: ‘click’、 ‘mousedown’、 ‘mouseup’、 ‘mousewheel’、 ‘dblclick’、 ‘contextmenu’。

    //添加事件
            rect.on('click',function(e){
               alert('点击了矩形')
            })
    

    完整代码:
    在这里插入图片描述

    <template>
        <div id="zrCircle">
    
        </div>
    </template>
    <script>
    import zrender from 'zrender'
    export default {
        mounted(){
            //初始化zrender
            var zr=zrender.init(document.getElementById("zrCircle"),{
                renderer:'canvas',   //渲染方式
                width:'600',     //画布宽度
                height:'600'     //画布高度
            });
            // opts.height=600
            //在场景中添加元素,一个半径为40的圆
            var circle=new zrender.Circle({
                shape:{
                    cx:150,   
                    cy:150,
                    r:40
                },
                style:{
                    fill:'none',     //圆背景色不设置,即白色
                    stroke:'blue'    //圆的边框颜色
                }
            });
            //图形里的文字
            circle.attr({
                style:{
                    text:'江西理工大学',   //文字
                    textFill:'yellow',   //文字颜色
                    fontSize:10,    //文字大小
                    textPosition:'inside',    //字体位置
                    textPadding:[3,3,3,3],    //文字内边距
                    // transformText:true    //字体跟随变换效果
                }
            })
            //向画布中添加已经定义图形
            zr.add(circle); 
            //修改图形元素属性   
            console.log('更新后:',circle.shape.r); // 40
            circle.attr('shape', {    //改变shape中的属性
                r: 50             // 只更新 r。cx、cy 将保持不变。
            });
            console.log('更新前:',circle.shape.r); // 40
            circle.attr('style',{     //改变style中的属性
                fill:'skyblue'
            })
        }
    }
    </script>
    

    2、动画
    给图形添加动画支持
    animate函数 animate(path, loop):
    path 对该对象的哪个元素执行动画
    loop 为boolean类型,表示是否循环动画

     //给图形添加动画
            circle.animate('shape',true)
                    .when(1000,{cx:200,r:30})
                    .when(2000,{cx:250,r:20})
                    .when(3000,{cx:300,r:30})
                    .when(4000,{cx:350,r:40})
                    .start();   //表示动画开始执行
            circle.animate('style',true)
                    .when(1000,{opacity:0.8})
                    .when(2000,{opacity:0.5})
                    .when(3000,{opacity:0.3})
                    .when(4000,{opacity:0.6})
                    .when(4000,{opacity:0.9})
                    .start();
    

    animateTo 函数
    animateTo(target, time, delay, easing, callback, forceAnimate):为属性设置动画。
    部分参数可缺省,支持以下形式的调用:

    animateTo(target, time, delay, easing, callback, forceAnimate)   //属性,时长,延迟,缓动函数。回调函数,相同属性是否强制执行
    animateTo(target, time, delay, easing, callback)
    animateTo(target, time, easing, callback)
    animateTo(target, time, delay, callback)
    animateTo(target, time, callback)
    animateTo(target, callback)
    animateTo(target)
    

    参数
    target 设置动画的对象
    time 动画时长
    delay 动画延迟执行的时长
    easing 缓动函数名称
    callback 动画执行完成后的回调函数
    forceAnimate 对于相同的属性,是否强制执行

    //将圆的半径缓慢的增加至100,颜色改变为红色
            circle.animateTo({
                shape:{
                    r:100
                },
                style:{
                    fill:'red'
                },
                position:[10,10]    //x,y轴分别平移10
            },3000,100,'cubicOut',function(){
                console.log('done')
            });
    

    旋转,放大,缩小,平移

    //旋转,放大,缩小,平移
     rect.animateTo({
           // rotation:Math.PI/3,     //正值代表逆时针旋转,负值代表顺时针旋转
           rotation:Math.PI,
           origin:[240,190],
           scale:[1.5,1.5],   //x,y轴方向放大至1.5倍
           position:[100,100]    //x,y轴分别平移100
       })
    

    在这里插入图片描述
    stopAnimation(forwardToLast)函数
    .stopAnimation(Boolean) 是否将动画跳到最后一帧。 true为跳到最后,false为不跳,设置了该函数,不论Boolean为什么,动画停止

    circle.stopAnimation(true);    //跳到动画最后一帧
    

    animate函数 动画对象
    delay(time) 延迟开始时间
    done(callback) 设置动画结束的回调函数
    during(callback) 为关键帧添加回调函数,在关键帧运行后执行
    isPaused() 获得动画是否处于暂停状态。Boolean类型
    pause() 暂停动画
    resume() 恢复动画
    start(easing) 执行动画(缓动函数)
    stop(forwardToLast) 停止动画(boolean,是否将动画跳到最后一帧)
    when(time,props) 定义关键帧,即动画对象在某个时刻的属性。

    3、组的概念
    组。Group 是一个容器,可以插入子节点,Group 的变换也会被应用到子节点上。

     //getBoundingRect() 获取元素包围盒
            var g=new zrender.Group({
                slient:true                   //组内子孙元素是否响应鼠标事件
            });
            var rect=new zrender.Rect({
                style:{
                    fill:'blue'
                },
                shape:{
                    x:10,
                    y:10,
                    width:50,
                    height:40
                }
            });
            var circle=new zrender.Circle({
                style:{
                    fill:'blue'
                },
                shape:{
                    cx:200,
                    cy:50,
                    r:30
                }
            });
            g.add(rect);   //添加子节点
            g.add(circle);
            zr.add(g);
    
            //.getBoundingRect()得到组内所有元素的包围盒
            console.log(g.getBoundingRect());
            //返回所有子元素,类型:Element[]。
            console.log('cc',g.children());
            //返回特定名字的子元素
            console.log('circle',g.childOfName('circle'));
            //返回子元素个数
            console.log('num',g.childCount());
    
    
            //遍历所有子节点
            g.eachChild(function(item){ 
                console.log('a',item);
            })    
    
            //在组内删除元素
            // g.remove(circle)   //指定删除
            // g.removeAll()      //清空组内所有元素
    
            //整体变换,如
            g.attr({
                position:[100,100],       //x轴,y轴分别平移100
            })      
    

    4、线

     //直线
            var line =new zrender.Line({
                style:{
                    stroke:'red',       //线的颜色
                    lineWidth:3,        //线宽
                    lineDash:[0]        //虚线样式
                },
                shape:{
                    x1:30,              //起始点横坐标
                    y1:30,              //起始点纵坐标
                    x2:100,             //结束点横坐标
                    y2:100,             //结束点横坐标
                    percent:1         //已显示的百分比,用于绘制动画。
                }
            });
            zr.add(line);
            //多边形折线段
            var polyline=new zrender.Polyline({
                style:{
                    stroke:'blue',       //线的颜色
                    lineWidth:1,        //线宽
                    lineDash:[0] 
                },
                shape:{
                    points:[[10,20],[100,120],[100,200]]     //点集
                }
            })
            zr.add(polyline)
            //贝塞尔曲线
            var bezierCurve=new zrender.BezierCurve({
                style:{
                    stroke:'yellow',
                    lineWidth:3
                },
                shape:{
                    x1:70,            //起始点横坐标
                    y1:10,            //起始点纵坐标
                    x2:150,           //结束点横坐标
                    y2:150,           //结束点横坐标
                    cpx1:60,           //控制点横坐标
                    cpy1:50            //控制点纵坐标
                }
            });
            zr.add(bezierCurve)
    

    在这里插入图片描述
    5、文字

     //初始化zrender
            var zr=zrender.init(document.getElementById("zrCircle"),{
                renderer:'canvas',   //渲染方式
                width:'600',     //画布宽度
                height:'600'     //画布高度
            });
    
            var text=new zrender.Text({
                style:{
                    text:'这是一段文字'+'\n'+'换行',
                    textPadding:[3,5,3,5],
                    fontSize:16
                }
            });
            zr.add(text);
            //可以通过getBoundingRect()获取文字所占的空间
            console.log('文字所占空间',text.getBoundingRect());
    
            //特别注意的是rect必须设置宽高,才能获取到其所占的空间
            var rect=new zrender.Rect({
                style:{
                    text:'这是文字',
                    fontSize:16,
                    textFill:'skyblue'   //字体颜色
                },
                shape:{
                    x:150,
                    y:150
                }
            })
            zr.add(rect);
            console.log(rect.getBoundingRect())
            //返回{x: 10, y: 10, width: 0, height: 0}
    
            //文字包围盒
            var text=new zrender.Text({
                style:{
                    text:'这是一段文字',
                    textBackgroundColor:'red',     //包围盒背景
                    textBorderColor:'#ccc',         //包围盒描边颜色
                    textBorderWidth:1,             //包围盒描边线宽
                    textPadding:[10,20,10,20]      //文字内边距,同css Padding
                }
            });
    

    在这里插入图片描述
    6、线性渐变
    zrender.LinearGradient(x, y, x2, y2, colorStops, globalCoord) 起始横坐标,起始纵坐标,结束横坐标,结束纵坐标,组成渐变色的颜色,取值范围

    //线性渐变
            var linearColor = new zrender.LinearGradient(0, 0, 0, 1, [
                {
                    offset: 0,      
                    color: '#efe3ff'
                },
                {
                    offset: 1,
                    color: '#6cb3e9'
                }
            ]);
            var rect = new zrender.Rect({
                shape: {
                    x: 0,    
                    y: 0,    
                    width: 100,     
                    height:100
                },
                style: {
                    fill:linearColor
                },
                position: [10,10]
            
            });
            zr.add(rect );
    
    

    在这里插入图片描述

    展开全文
  • 是一个轻量级的Canvas类库,MVC封装,数据驱动,提供类Dom事件模型,让canvas绘图大不同
  • zrender源码分析--初探

    2019-09-20 17:05:41
    先看下,本次例子做的效果 然后开始代码: 调用init接口初始化 //zrender_demo.html varzr=zrender.init(document.getElementById('main'));...进入init方法,发现做2件事情:A、初始化ZRender...
  • zrender-2.1.1.zip

    2016-05-06 17:02:17
    zrender-2.1.1 官网下载,完整源码,附实例

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,705
精华内容 1,082
热门标签
关键字:

zrender