您的位置:首页 > 其它

zrender基础入门,简单的案例图形绘制

2020-06-29 04:48 459 查看

一、简单介绍

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

流程图:

二、使用入口

(1)npm install zrender,因为zrender不是浏览器自带不同于前面的canvas与svg,需要先下载
(2)在header中引入

<script src="./node_modules/zrender/dist/zrender.js"></script>

三、案例上代码

看注释!!!看注释!!!看注释!!!

<!DOCTYPE html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/zrender/dist/zrender.js"></script>
</head>

<body>
<div id="container" style="width:800px;height: 800px;"></div>
<script>
//初始化dom对象
const zrder = zrender.init(document.getElementById('container'));

//开始绘制

//绘制矩形
//实例化矩形对象
const rect = new zrender.Rect({
shape: {
x: 0,
y: 0,
height: 50,
width: 50
},
style: {
fill: 'yellow',
lineWidth: 2
}
})
//添加矩形对象到zrder上面
zrder.add(rect)

//绘制线段
const line = new zrender.Polyline({
shape: {
points: [
[80, 80],
[190, 120],
[300, 200]
]
},
style: {
stroke: 'red',
lineWidth: 2,
}
})
zrder.add(line)

//更改属性,先创建一个矩形
const rect2 = new zrender.Rect({
shape: {
x: 60,
y: 100,
height: 50,
width: 50
},
style: {
fill: 'blue',
lineWidth: 2
}
})
zrder.add(rect2)
//修改颜色从蓝色变为绿色
rect2.attr('style', {
fill: 'green'
});

//绘制圆形
var circle = new zrender.Circle({
shape: {
cx: 150,
cy: 50,
r: 40
},
style: {
fill: 'none',
stroke: '#F00'
}
});
zrder.add(circle);

//绘制心
var heart = new zrender.Heart({
shape: {
cx: 350,
cy: 200,
width: 40,
height: 50,
},
style: {
fill: 'red',
stroke: '#F00'
}
});
zrder.add(heart);

//绘制水滴
var droplet = new zrender.Droplet({
shape: {
cx: 150,
cy: 250,
width: 10,
height: 30,
},
style: {
fill: 'none',
stroke: 'brown'
}
});
zrder.add(droplet);

</script>
</body>

</html>

四、结果展示

五、学习推荐

官方网址

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: