zrender如何实现path绘制？

作者站长头像
站长
· 阅读数 25

把一个svg图像转成json用zrender绘制把每个元素的属性啥的映射好

new zrender.Path.extend({
                    
                    shape: {
                        pathData: 路径,
                        id: node.shape.id,
                    },
                    style: {
                        fill: 'red',
                        stroke: 'red',
                        lineWidth: 1
                    }
                
                });

这样写绘制不出来，不知道这个实例的opt参数项，或者有没有直接绘制svg的

回复
1个回答
avatar
test
2024-07-01

<div class="example-container"></div>

<script>
window.onload = function() {
    var container = document.getElementsByClassName('example-container')[0];
    var zr = zrender.init(container);
    var path = new zrender.path.createFromString('M8 15A7 7 0 108 1a7 7 0 000 14zM4.5 8.2l.7-.7L7 9.3l3.8-3.8.7.7L7 10.7 4.5 8.2z')

    zr.add(path)

};
</script>

https://ecomfe.github.io/zrender-doc/public/api.html#zrenderp...

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容