ZRender使用中关于图片裁剪、拖拽问题

最近做项目使用到了ZRender
ZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器，绘图的时候特别方便。
如果想在画布中绘制图片，使用new zrender.Image

假如图片路径会存放在一个数组里面，然后通过for循环，绘制图片，那么图片都在同一个位置，最后绘制的会覆盖住之前的。所以设置draggable属性为true，图片就可以随意拖拽，下面的图片也就看的到了。
如果在绘制前先对图片进行裁剪的话，像下面这样：

 var data=['../sth/sth/uname.jpg','../sth/sth/QQ图片20190312124017.jpg'];var zr = zrender.init(document.getElementById('main'));var group = new zrender.Group();          var circleCut= new zrender.Circle({    **//裁剪区域，注意此时circleCut是写在for循环外的额**shape: {cx: 275,cy: 275,r: 75},style:{fill:'#fff',stroke:'#000',lineWidth:2}});for(var i = 0;i<data.length;i++){var img1 = new zrender.Image({style: {image: data[i],x: 200,y: 200,width: 150,height: 150},draggable: true})img1.setClipPath(circleCut);group.add(img1); }zr.add(group);

两张图一开始是重叠的，通过拖拽，可以将上面的一张移开，但是我发现下面的一张却拖拽不了（没有裁剪的时候是可以都可以拖拽的），虽然两张图确实是都被裁剪了，但是却出现了这样的问题

查看源码，在获取e.target处加了console.log(e.target);

果然，下面先绘制的那张鼠标获取不到对象，是undefined,难怪拖拽不了，这个_dragStart里面的if根本就进不去。
各种试验之后，我把circleCut的定义也放到了for循环里面，然后就可以了，两张都可以拖拽了。。：）
不知道是什么原因

完整代码如下，添加了一个点击图片就可以将当前图片置顶功能，这里写的比较粗糙，只是做项目的时候需要通过选择图片的名称将图片置顶显示，故试一下childOfName方法。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><div id="main" style="width:500px;height:500px;border: 1px solid teal"></div><script></script><script src="./zrender.js"></script><script type="text/javascript">var data=['../sth/sth/uname.jpg','../sth/sth/QQ图片20190312124017.jpg'];var zr = zrender.init(document.getElementById('main'));var group = new zrender.Group();var level = 2;for(var i = 0;i<data.length;i++){var circleCut1= new zrender.Circle({    //裁剪区域，现在是在循环内了shape: {cx: 275,cy: 275,r: 75},style:{fill:'#fff',stroke:'#000',lineWidth:2}});var img1 = new zrender.Image({style: {image: data[i],x: 200,y: 200,width: 150,height: 150},name:'photo'+i,zlevel:1，draggable: true})img1.setClipPath(circleCut1);group.add(img1); }zr.add(group); //childOfName方法的使用var photo = group.childOfName('photo0');photo.on('click',function(){console.log('clickphoto0');photo.animateTo({zlevel:level})level++;})var photo1 = group.childOfName('photo1');photo1.on('click',function(){console.log('clickphoto1');photo1.animateTo({zlevel:level})level++;})</script>
</body>
</html>

ZRender使用中关于图片裁剪、拖拽问题相关推荐

android 选择相册拍照图片仿gridview九宫格 recycleview九宫格图片(可拖拽)
九宫格图片(可拖拽) 自己项目用到的一个功能实现九宫格显示图片支持拍照和图库,可以拖拽排序.基本可以直接在项目使用上图: [下载地址(CSDN竟然不能选择下载0资源积分)] 下载地址(githu ...
拖拽删除元素、拖拽排序、拖拽预览图片和拖拽移动元素
介绍 HTML5 提供了专门的拖拽与拖放的 API,目前各浏览器都已支持,包括 IE.HTML 拖放(Drag and Drop)接口使应用程序能够在浏览器中使用拖放功能.例如,用户可使用鼠标选择可拖 ...
关于PyQt5在Label标签插入图片并且实现图片的拖拽和缩放
作为菜鸟为了实现这两个功能,肯定是要借鉴一下大佬的文章的,下面的链接就是我思路的源头: https://blog.csdn.net/qq_36780295/article/details/108844 ...
vue+element-ui实现富文本(含有图片粘贴拖拽上传)
vue+element-ui实现富文本(含有图片粘贴拖拽上传) Just For Share | 仅仅分享首先需要安装 cnpm i vue-quill-editor -D 富文本编辑器 cnpm ...
前端zrender框架使其可拖拽
废话不多说,上代码,代码都有注释 loadCamera: function (item, i) { //加载方法 item是实体类参数//两个miter是为了适应屏幕自适应let widthMiter ...
html设置图片不可拖拽,js css3实现图片拖拽效果
本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 body{ text-align: center; } .container{ display: flex; just ...
C#实现外部图片的拖拽到应用程序的简单功能，附全部源码，供有需要的参考...
通用权限管理系统组件源码里,有职员管理的功能,实现了直接可以把照片拖拽过来的功能,用起来会很方便. 管理软件能支持拖拽功能,会好用很多,用户体验也会改善很多.想做好一个组件需要把放放面面都彻底做好才可 ...
vue+openlayers中实现图片展示与图片的拖拽和放大缩小（一）
前言: openlayers中渲染图片是有多种方法的, Icon ,Image 等等都可以实现将图片放到地图上面,但是操作图片的话,方法比较少了,这里是配合 ol-ext 来实现的. 相关资料: 1. ...
unity3D如何实现2D sprite，3D物品和UI图片的拖拽效果
[Unity学习笔记] (一)如何实现2d sprite和3D物品的拖拽效果 1.调节camera >- Projection到Orthographic模式 Unity camera proje ...

ZRender使用中关于图片裁剪、拖拽问题

ZRender使用中关于图片裁剪、拖拽问题相关推荐

最新文章

热门文章