zrender如何实现path绘制？

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

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

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

阅读 3.2k

<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>

demo:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Pin</title>
  <script src="../dist/zrender.js"></script>
</head>

<body>
  <div id="main" style="width:1000px;height:500px;"></div>
  <script type="text/javascript">
    var zr = zrender.init(document.getElementById('main')); var Pin = zrender.Path.extend({
      type: 'pin', shape: { // x, y on the cusp 
        x: 0, y: 0, width: 0, height: 0
      },
      buildPath: function (path, shape) {
        var x = shape.x; var y = shape.y; var w = shape.width / 5 * 3; // Height must be larger than width
        var h = Math.max(w, shape.height); var r = w / 2; // Dist on y with tangent point and circle center 
        var dy = r * r / (h - r); var cy = y - h + r + dy; var angle = Math.asin(dy / r); // Dist on x with tangent point and circle center
        var dx = Math.cos(angle) * r; var tanX = Math.sin(angle); var tanY = Math.cos(angle); path.arc(x, cy, r, Math.PI - angle, Math.PI * 2 + angle); var cpLen = r * 0.6; var cpLen2 = r * 0.7; path.bezierCurveTo(x + dx - tanX * cpLen, cy + dy + tanY * cpLen, x, y - cpLen2, x, y); path.bezierCurveTo(x, y - cpLen2, x - dx + tanX * cpLen, cy + dy + tanY * cpLen, x - dx, cy + dy); path.closePath();
      }
    });
    var pin = new Pin({ shape: { x: 100, y: 100, width: 20, height: 40 }, scale: [2, 2] });
    zr.add(pin);
  </script>
</body>

</html>

zrender如何实现path绘制？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

为什么会出现CORS error？