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

article/2025/9/21 5:03:21

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

二、下面是以图片做的简单demo，分为左中右三部分，左边是需要的图片，中间是绘图部分，右边是添加文字说明；

        <body><div id="container"><div id="imgDiv" style="width:30%;border:1px solid red;min-height:600px;float:left;"><div style="float:left;"><img id="img1" class="imgs" src="a.jpg" style="height:50px;width:50px;" title="img1"></div><div style="float:left;"><img id="img2" class="imgs" src="https://img.zcool.cn/community/01205956a1ca9b6ac7256cb04025c6.png@2o.png" style="height:50px;width:50px;" title="img2"></div></div><div id="canvasDiv" style="border:1px solid red;width:40%;float:left;"><canvas id="canvas"></canvas></div><div id="comment" style="border:1px solid red;min-height:600px;width:9%;float:left;"><button id="btn">添加说明</button></div><div id="text" style="width:254px;height: 50px;position: absolute;left:0;top:0;right:0;bottom: 0;margin: auto;display: none;"><input type="text" id="input" style="width:250px;"><button id="yes" style="float:left;">确定</button><button id="no" style="float:right;">取消</button></div></div></body>

三、点击左侧某一图片，该图片会默认显示到中部画布的左上角，鼠标左键在图片上按下可拖动图片，当画布上有多张图片时，点击的图片一直在最上层（代码片段不完整，直接使用效果不佳，最后会有完整代码）；

//点击左侧图片默认在右侧框左上角显示该图片$("#imgDiv div img").click(function(){src=this.src;width=this.width;height=this.height;//绘画图片var img = new zrender.Image({style: {image:src,x: 0,y: 0,width: width,height:height},zlevel:temp,id:idCount,draggable: true}).on('mousedown', function () {this.attr('zlevel',++temp);}).on('mousewheel',function(ev){var e = (ev||event).wheelDelta/20;//设置缩放大小this.attr('scale',[this.scale[0]+= e,this.scale[1]+= e]);//设置缩放中心this.attr('origin',[this.style.x+this.style.width/2,this.style.y+this.style.height/2]);}).on('dblclick',function(ev){//设置旋转角度this.attr('rotation',[this.rotation-Math.PI/12]);//设置旋转中心this.attr('origin',[this.style.x+this.style.width/2,this.style.y+this.style.height/2]);});group.add(img);idCount++;});

四、鼠标点击选择画布上某一图片，然后滚动鼠标滚轮可缩放图片，设置缩放中心为图片中心；

五、双击图片可使图片旋转，设置旋转中心为图片中心；

六、点击右侧添加说明，弹出输入框，输入文字说明，设置文字说明不能为空且不能超过32个字符，点击确定后，说明将显示在画布上，可拖动放置在目标位置（代码片段不完整，直接使用效果不佳，最后会有完整代码）；

//添加说明输入框$("#btn").click(function () {$("#text").show();$("#input").val("");$("#text").attr("z-index",temp+99);});//输入说明后点击确认$("#yes").click(function () {var input = $("#input").val();if(input==undefined||input.trim()==""){alert("输入为空！");return;}if(input.length>32){alert("最多支持32个字符！");return;}if(input.length>16){input=input.substring(0,16)+'\n'+input.substring(16,input.length+1);}//输入说明符合要求后 创建Text 将说明赋值Textvar text = new zrender.Text({style:{x: 200,y: 200,text:input},id:100,draggable: true}).on('mousedown', function () {this.attr('zlevel',++temp);});group.add(text);$("#text").hide();})//点击取消$("#no").click(function(){$("#text").hide();});

七、完整代码。

<!doctype html>
<script type="text/javascript" src="C:/Users/Sheado/Desktop/zrender.js"></script>
<script type="text/javascript" src="D:/workSpace/zhzf3.1/cats-case-web-zhzf/src/main/webapp/scripts/easyui/jquery.min.js"></script>
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> canvas5</title>  </head> <body><div id="container"><div id="imgDiv" style="width:30%;border:1px solid red;min-height:600px;float:left;"><div style="float:left;"><img id="img1" class="imgs" src="a.jpg" style="height:50px;width:50px;" title="img1"></div><div style="float:left;"><img id="img2" class="imgs" src="https://img.zcool.cn/community/01205956a1ca9b6ac7256cb04025c6.png@2o.png" style="height:50px;width:50px;" title="img2"></div></div><div id="canvasDiv" style="border:1px solid red;width:40%;float:left;"><canvas id="canvas"></canvas></div><div id="comment" style="border:1px solid red;min-height:600px;width:9%;float:left;"><button id="btn">添加说明</button></div><div id="text" style="width:254px;height: 50px;position: absolute;left:0;top:0;right:0;bottom: 0;margin: auto;display: none;"><input type="text" id="input" style="width:250px;"><button id="yes" style="float:left;">确定</button><button id="no" style="float:right;">取消</button></div></div></body>
</html>
<script>
window.onload = function() {var container = document.getElementById('canvas');//用canvas属性设置宽高，如果在样式设置宽高，图片会变形container.width=document.body.clientWidth*0.4;container.height=document.documentElement.clientHeight*0.75;var zr = zrender.init(container);var width;var height;var src;var temp = -99999;var idCount=1;var group = new zrender.Group();//添加说明输入框$("#btn").click(function () {$("#text").show();$("#input").val("");$("#text").attr("z-index",temp+99);});//输入说明后点击确认$("#yes").click(function () {var input = $("#input").val();if(input==undefined||input.trim()==""){alert("输入为空！");return;}if(input.length>32){alert("最多支持32个字符！");return;}if(input.length>16){input=input.substring(0,16)+'\n'+input.substring(16,input.length+1);}//输入说明符合要求后 创建Text 将说明赋值Textvar text = new zrender.Text({style:{x: 200,y: 200,text:input},id:100,draggable: true}).on('mousedown', function () {this.attr('zlevel',++temp);});group.add(text);$("#text").hide();})//点击取消$("#no").click(function(){$("#text").hide();});//点击左侧图片默认在右侧框左上角显示该图片$("#imgDiv div img").click(function(){src=this.src;width=this.width;height=this.height;//绘画图片var img = new zrender.Image({style: {image:src,x: 0,y: 0,width: width,height:height},zlevel:temp,id:idCount,draggable: true}).on('mousedown', function () {this.attr('zlevel',++temp);}).on('mousewheel',function(ev){var e = (ev||event).wheelDelta/20;//设置缩放大小this.attr('scale',[this.scale[0]+= e,this.scale[1]+= e]);//设置缩放中心this.attr('origin',[this.style.x+this.style.width/2,this.style.y+this.style.height/2]);}).on('dblclick',function(ev){//设置旋转角度this.attr('rotation',[this.rotation-Math.PI/12]);//设置旋转中心this.attr('origin',[this.style.x+this.style.width/2,this.style.y+this.style.height/2]);});group.add(img);idCount++;});zr.add(group);
}</script>