如何在画布上使用 Konva 绘制 SVG 图像

如何在画布上显示 SVG 图像？

浏览器并不总是能够将 *.svg 图像绘制到画布上。然而，现在的情况有所改善，如果您想要使用 Konva 渲染矢量图像，您现在有几种可用的选项：

选项 1：使用 Konva.Image

在大多数情况下，您可以像使用其他图像（例如 *.png 或 *.jpg）一样使用 *.svg 图像。您可以使用 Konva.Image 形状。

Konva.Image.fromURL('/image.svg', (image) => {
  layer.add(image);
});

这种方法在许多情况下都能很好地工作，但并不是完全跨浏览器兼容。例如，有些 SVG 在 Firefox 浏览器中可能不可见（对此情况有解决方法）。

选项 2：使用 Konva.Path

使用 Konva.Path。这种方法适用于简单的路径形状。如果您有一个包含多个路径的大型 SVG，您可能需要手动将其分割成几个 Konva.Path 形状。

选项 3：使用外部库将 SVG 渲染到画布上

使用外部库（例如 canvg）将 SVG 绘制到 <canvas> 元素中。然后使用该画布用于 Konva.Image。

这种方法已经在至少一个大型生产应用中经过测试，证明了其可靠性和渲染精度。

演示

下面是一个演示，展示了原生绘制和使用库的绘制方式。

Konva GIF demoview raw

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@9.3.18/konva.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva SVG Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>

  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      var SOURCE = '/assets/tiger.svg';
      // try to draw SVG natively
      Konva.Image.fromURL(SOURCE, (imageNode) => {
        layer.add(imageNode);
        imageNode.setAttrs({
          width: 150,
          height: 150,
        });
      });

      // draw svg with external library
      var canvas = document.createElement('canvas');
      canvg(canvas, SOURCE, {
        renderCallback: function () {
          var image = new Konva.Image({
            image: canvas,
            x: 200,
            width: 150,
            height: 150,
          });
          layer.add(image);
        },
      });
    </script>
  </body>
</html>