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

最新推荐文章于 2023-02-02 15:41:17 发布

Aster_.

最新推荐文章于 2023-02-02 15:41:17 发布

阅读量1.9k

点赞数 1

分类专栏：项目学习 ZRender 文章标签： canvas zrender 前端

本文链接：https://blog.csdn.net/qq_41604498/article/details/100132693

版权

项目学习同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

ZRender

2 篇文章 0 订阅

订阅专栏

最近做项目使用到了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>

Aster_.

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ZRender使用中关于图片裁剪、拖拽问题

最近做项目使用到了ZRenderZRender 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 ECharts 的渲染器，绘图的时候特别方便。如果想在画布中绘制图片，使用new zrender.Image假如图片路径会存放在一个数组里面，然后通过for循环，绘制图片，那么图片都在同一个位置，最后绘制的会覆盖住之前的。所以设置draggable属性为...
复制链接

扫一扫