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);

两张图一开始是重叠的,通过拖拽,可以将上面的一张移开,但是我发现下面的一张却拖拽不了(没有裁剪的时候是可以都可以拖拽的),虽然两张图确实是都被裁剪了,但是却出现了这样的问题
ZRender使用中关于图片裁剪、拖拽问题_第1张图片
查看源码,在获取e.target处加了console.log(e.target);
ZRender使用中关于图片裁剪、拖拽问题_第2张图片
果然,下面先绘制的那张鼠标获取不到对象,是undefined,难怪拖拽不了,这个_dragStart里面的if根本就进不去。
各种试验之后,我把circleCut的定义也放到了for循环里面,然后就可以了,两张都可以拖拽了。。:)
不知道是什么原因
ZRender使用中关于图片裁剪、拖拽问题_第3张图片
完整代码如下,添加了一个点击图片就可以将当前图片置顶功能,这里写的比较粗糙,只是做项目的时候需要通过选择图片的名称将图片置顶显示,故试一下childOfName方法。


<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>Documenttitle>
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)