你真的了解Canvas吗--解密十二【ZRender篇】
目录
🔟②入口
CompoundPath
beforeBrush
afterBrush
buildPath
Polygon多边形
ZRText
step - 1
step - 1.1
step - 1.2
step - 1.3
step - 2
主流程
总结
这次已经是该专栏的第十二篇文章了,经过这一系列文章的讲解,相信大家一定有所收获了。今天讲的主题是Polygon多边形、文字ZRText和复合Path(path的集合)
老规矩,先来看入口文件
🔟②入口
const zr = zrender.init(document.getElementById('main'), {
renderer: window.__ZRENDER__DEFAULT__RENDERER__
});
let r = 100;
let cx = r;
let cy = r + 10;
let compoundPath = new zrender.CompoundPath({
segmentIgnoreThreshold: 20,
shape: {
paths: []
},
style: {
fill: null,
stroke: '#000',
lineWidth: 2
}
})
zr.add(compoundPath);
for (let i = 0; i <