SVG Path 路径

我们可以通过实例化一个 Konva.Path() 对象创建矩形。

我们经常会用到路径，比方说导入 SVG Path 到 canvas，使用字符串数据绘制复杂的图形而不需要创建一个自定义图形。

点击 Konva.Path documentation 查看详细属性和方法说明。

如果你想在 canvas 里面绘制 SVG 图片，请查看How to draw SVG image post.

Konva Path Demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Path Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var stage = new Konva.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight
      });

      var layer = new Konva.Layer();

      var path = new Konva.Path({
        x: 50,
        y: 40,
        data:
          'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
        fill: 'green',
        scale: {
          x: 2,
          y: 2
        }
      });

      // add the shape to the layer
      layer.add(path);

      // add the layer to the stage
      stage.add(layer);
    </script>
  </body>
</html>