一、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 将说明赋值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();
});
七、完整代码。
<!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 将说明赋值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();
});
//点击左侧图片默认在右侧框左上角显示该图片
$("#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>