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

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

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

        
		

			

			

				
			
			

				
			
			
			

				
			
			

				添加说明
			
			

				
				确定
				取消
			
		
	

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

//点击左侧图片默认在右侧框左上角显示该图片
	$("#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 将说明赋值Text
		var 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();
	});

七、完整代码。

	 
		 
		  
	 
	
		

			

			

				
			
			

				
			
			
			

				
			
			

				添加说明
			
			

				
				确定
				取消