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

一、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>

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

hammer.js移动端拖拽缩放旋转元素
第一步下载hammer.js并引入下载地址可以是:http://hammerjs.github.io/ 第二步复制下面这些代码,放在你的js里面 function drag(drag){var ...
H5头像完整制作，可拖拽缩放，可添加装饰图标（装饰图标支持缩放、旋转、拖拽）
H5头像制作类的程序本以为到处都可以搜索到,可是真写这个项目的时候才发现太困难了,因为根本没有现成的功能模块可以拼凑,着实费了不少力气,好在最终圆满交工. 还是先看效果源码获取渠道小程序内联系客服 ...
iOS学习笔记-068.手势识别02——捏合、拖拽、旋转手势
手势识别02捏合拖拽旋转手势一捏合手势 1 UIPinchGestureRecognizerh 2 代码示例 3 图示二拖拽手势 1 UIPanGestureRecognizerh 2 代码示例 ...
vue-draggable-resizable-gorkys 可拖拽缩放的组件
说明:组件基于vue-draggable-resizable进行二次开发. 文章引用于vue-draggable-resizable 可拖拽缩放的组件 - SegmentFault 思否 git引用于 ...
解决d3.event在v7版本无效影响zoom拖拽缩放问题
近期由于代码内关于d3版本的更新,由原来的v3 v4更新值v7.0.0,导致原有关于d3的波点图内zoom方法的拖拽缩放.tooltip提示框问题开始报错,即d3.event数据废弃了 1.设置d3图 ...
Unity触摸屏幕拖拽物体旋转物体放大缩小物体单击双击长按
Unity触摸屏幕拖拽物体旋转物体放大缩小物体单击双击长按拖拽物体 using System.Collections; using System.Collections.Generic; ...
3dmax java_Java3D读取3DMax模型并实现鼠标拖拽、旋转、滚轮缩放等功能
/**-------------------------------------------------代码区--------------------------------------------- ...
openlayers拖拽、旋转、缩放、拉伸变形 (十二)
gis应用中拖动旋转和缩放是编辑中比较常见的功能,在openlayers中拖拽可以通过ol.interaction.Translate来实现,但是其他功能没有,所以要用的openlayers的一个扩展 ...
Unity鼠标控制摄像机拖拽、旋转、缩放（模拟编辑器摄像机功能）
网上有不少类似内容了,不过有些不全面,甚至有有残缺,少了上下文,导致复制代码以后报错,笔者很讨厌这种太监代码!! 话说真传一句话,假传万卷书,代码全文如下:复制到自己脚本中,挂到摄像机上即可运行 us ...
python canvas画移动物体_如何实现Canvas图像的拖拽、点击等操作
上一篇Canvas的博文写完后,有位朋友希望能对Canvas绘制出来的图像进行点击.拖拽等操作,因为Canvas绘制出的图像能很好的美化.好像是想做炉石什么的游戏,我也没玩过. Canvas在我的理解 ...

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

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

最新文章

热门文章