使用zrender绘制基本图形

最新推荐文章于 2022-10-24 08:55:47 发布

「已注销」

最新推荐文章于 2022-10-24 08:55:47 发布

阅读量7.5k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 canvas zrender

本文链接：https://blog.youkuaiyun.com/u011318142/article/details/90746531

本文将介绍如何利用Zrender库在HTML5 Canvas上绘制各种基础图形，包括设置图形属性、坐标系统以及图形交互等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于zrender实现在canvas中绘制基本图形

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>demo1</title>
	<script type="text/javascript" src="js/echarts.js"></script>
</head>
<body>
	<div id="main" style="height:600px;width:600px;"></div>
	<script type="text/javascript">
		var main = echarts.init(document.getElementById('main'));
		var option = {
			title:{
				text:'ECharts demo'
			},
			legend:{
				data:['销量']
			},
			xAxis:{
				data:["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
			},
			yAxis:{},
			series:[{
				name:'销量',
				type:'bar',
				data:[5,20,36,10,10,20]
			}]
		};
		main.setOption(option);
	</script>
	<input type="text" id="text"placeholder="请输入文字"/><br/><br/>
	<input type="button" name="" value="写入文字" id="btn"/><br/><br/>
	<input type="file" id="file"placeholder="请输入图片"/><br/><br/>
	<input type="button" name="" value="导入图片" id="btn1"/><br/><br/>
	<canvas id="mycv" width="600px" height="600px" style="border:1px solid black">
		您的浏览器不支持canvas
	</canvas>
	<script text="text/javascript">
	var canvas1 = document.getElementById("mycv");
	var text= document.getElementById("text");
	var btn = document.getElementById("btn");
	var arr=[];
	var imgs=[];//canvas中的所有图像
	var img;//当前操作的图像
	btn.onclick = function(){
		var value = text.value;
		if(canvas1.getContext){
			var ctx = canvas1.getContext("2d");
			ctx.font = "bold 30px arial";
			ctx.fillStyle="black";
			ctx.fillText(value,150,150);
		}
	}
	var btn1 = document.getElementById("btn1");
	btn1.onclick = function(){
		let reader = new FileReader();
		reader.readAsDataURL(document.querySelector("#file").files[0]); 
		reader.onload = function (e) { 
			let result = e.target.result; // base64格式图片地址
			img = new Image();
			img.src = result; // 设置image的地址为base64的地址
			img.onload = function () {
				if(canvas1.getContext){
					var ctx = canvas1.getContext("2d");
					ctx.drawImage(img, 0, 0, 100, 100);
					arr.push(ctx.getImageData(0, 0, canvas1.width, canvas1.height));
					imgs.push([img,0,0,100,100]);
				}

			}
		};
	}
	canvas1.onmousedown = function (e) {
		let ax, ay, x, y;

		canvas1.onmousemove = function (e) {
			x = e.clientX;
			y = e.clientY;
			arr.pop();
			imgs.pop();
			ctx = canvas1.getContext("2d");
			// //先清除之前的然后重新绘制
			ctx.clearRect(0, 0, canvas1.width, canvas1.height);
			// 	if (arr.length != 0) {
			// 	ctx.putImageData(arr[arr.length - 1], 0, 0, 0, 0, canvas1.width, canvas1.height);
			// }
			imgs.forEach(function(item, index){
				ctx.drawImage(item[0], item[1], item[2],item[3],item[4]);
			});
			ctx.drawImage(img, x-50, y-250, 100, 100);
			arr.push(ctx.getImageData(0, 0, canvas1.width, canvas1.height));
			imgs.push([img,x-50, y-250, 100, 100]);
		};
		canvas1.onmouseup = function () {
			canvas1.onmousemove = null;
			canvas1.onmouseup = null;
		};
	}
	</script>
</body>
</html>

var type = "pen";//当前画图的类型
//用于保存所有画出的图形，包括图片
var objs = [];
var canvas;
var zr;
 //设置类型
function setType(t){
    type=t;
    //界面展示当前操作名称
    var operate = document.getElementById("operate");
    switch(t){
        case "img":
            operate.innerText="导入图片";
            break;
        case "pen":
            operate.innerText="铅笔";
            break;
        case "line":
            operate.innerText="直线";
            break;
        case "circle":
            operate.innerText="圆";
            break;
        case "rect":
            operate.innerText="矩形";
            break;
        case "isogon":
            operate.innerText="正多边形";
            break;
        case "":
            operate.innerText="移动";
            break;
    }
    //类型为空代表移动，其他时候设置图形不可移动防止画新图形时改变原有图形的位置
    objs = zr.storage._displayList;
    if(type == ""){
        for (let index = 0; index < objs.length; index++) {
            var tmpobj = objs[index];
            objs[index].attr({"draggable":true})
        }
    } else{
        for (let index = 0; index < objs.length; index++) {
            var tmpobj = objs[index];
            objs[index].attr({"draggable":false})
        }
    }
    zr.refresh();
}

window.onload = function() {
    var btn1 = document