Konva 画布中的 SVG 动画

Posted 2023-03-25

【中文标题】Konva 画布中的 SVG 动画

【英文标题】：SVG Animations in Konva canvas

【发布时间】：2020-02-27 06:22:34

【问题描述】：

我想将动画 SVG 添加到 Konva 画布。我尝试使用 Image 对象添加它。 SVG 显示，但它不是动画的。

我还尝试向图层添加动画，如 Konva 的视频演示中所示，但这也不起作用。

有人知道如何完成这项工作吗？

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

      // main API:
      var imageObj = new Image();
      imageObj.onload = function() 
        var image = new Konva.Image(
          x: 50,
          y: 50,
          image: imageObj,
          width: 240,
          height: 180
        );

        // add the shape to the layer
        layer.add(image);
        layer.batchDraw();
      ;
      
      var animation=new Konva.Animation(function()
      
      ,layer);
      animation.start();
      
      
      imageObj.src = 'data:image/svg+xml;base64,DQogICAgPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDYwLjcgNDQuNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNjAuNyA0NC40OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQogICAgICAgIDxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+DQogICAgICAgIDwhW0NEQVRBWw0KICAud2hpdGUge2ZpbGw6I0ZGRkZGRn0NCi5ncmF5IHtmaWxsOiNFMEUwRTB9DQoueWVsbG93IHtmaWxsOiNGRkVCM0J9DQogIF1dPg0KICAgIDwvc3R5bGU+DQoNCiAgICAgICAgPGcgaWQ9IkNsb3VkXzUiPg0KICAgIAkgICAgICAgIDxnIGlkPSJXaGl0ZV9jbG91ZF81Ij4NCiAgICAJCSAgICAgICAgPHBhdGggaWQ9IlhNTElEXzQ5XyIgY2xhc3M9IndoaXRlIiBkPSJNNDcuMiw0NC40SDcuOWMtNC4zLDAtNy45LTMuNS03LjktNy45bDAsMGMwLTQuMywzLjUtNy45LDcuOS03LjloMzkuNGM0LjMsMCw3LjksMy41LDcuOSw3LjkgdjBDNTUuMSw0MC45LDUxLjYsNDQuNCw0Ny4yLDQ0LjR6Ii8+DQogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9IlhNTElEXzQ4XyIgY2xhc3M9IndoaXRlIiBjeD0iMTcuNCIgY3k9IjI3LjIiIHI9IjkuMyIvPg0KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJYTUxJRF80N18iIGNsYXNzPSJ3aGl0ZSIgY3g9IjM0LjUiIGN5PSIyNS41IiByPSIxNS42Ii8+DQogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSINCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlVHlwZT0iWE1MIg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBkdXI9IjZzIg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDswLjU7MSINCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHR5cGU9InRyYW5zbGF0ZSINCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIwOzU7MCINCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY2FsY01vZGU9ImxpbmVhciI+DQogICAgICAgICAgICAgICAgPC9hbmltYXRlVHJhbnNmb3JtPg0KICAgIAkgICAgICAgIDwvZz4NCiAgICAgICAgICAgICAgICA8cGF0aCBpZD0iTW9vbl81IiBjbGFzcz0ieWVsbG93IiBkPSJNMzMuNiwxNy45Yy0wLjItNy43LDQuOS0xNC40LDEyLTE2LjRjLTIuMy0xLTQuOS0xLjUtNy42LTEuNWMtOS44LDAuMy0xNy41LDguNS0xNy4yLDE4LjMgYzAuMyw5LjgsOC41LDE3LjUsMTguMywxNy4yYzIuNy0wLjEsNS4yLTAuOCw3LjUtMS45QzM5LjMsMzIsMzMuOCwyNS42LDMzLjYsMTcuOXoiLz4NCiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JheV9jbG91ZF81Ij4NCiAgICAJCSAgICAgICAgPHBhdGggaWQ9IlhNTElEXzQ1XyIgY2xhc3M9ImdyYXkiIGQ9Ik01NC43LDI2LjhIMzMuNGMtMy4zLDAtNi0yLjctNi02djBjMC0zLjMsMi43LTYsNi02aDIxLjNjMy4zLDAsNiwyLjcsNiw2djAgQzYwLjcsMjQuMSw1OCwyNi44LDU0LjcsMjYuOHoiLz4NCiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iWE1MSURfNDNfIiBjbGFzcz0iZ3JheSIgY3g9IjQ1LjciIGN5PSIxNS4xIiByPSIxMC43Ii8+DQogICAgICAgICAgICAgICAgICAgIDxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSINCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgYXR0cmlidXRlVHlwZT0iWE1MIg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBkdXI9IjZzIg0KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICBrZXlUaW1lcz0iMDswLjU7MSINCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIHR5cGU9InRyYW5zbGF0ZSINCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgdmFsdWVzPSIwOy0zOzAiDQogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIGNhbGNNb2RlPSJsaW5lYXIiPg0KICAgICAgICAgICAgICAgIDwvYW5pbWF0ZVRyYW5zZm9ybT4NCiAgICAJICAgICAgICA8L2c+DQogICAgICAgICAgICA8L2c+DQogICAgICAgICAgPC9zdmc+';

     

*
  margin:0;
  padding:0;

<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/4.0.13/konva.min.js"></script>
 <div id="container"></div>

【参考方案1】：

据我所知，目前还没有针对此类用例的解决方案。

最好只使用 SVG 而不是画布 (Konva)。 或者直接在画布上画图，不用 SVG。

【讨论】：

我只想指出，如果 Konva 的维护者想要实现这一点，由于画布规范 actually forbid the drawing of animated images through drawImage 他们将不得不进行 SMIL js 实现（如 FakeSmile）， js 实现 CSS 动画（我不知道），并使其顺利运行 svg 到画布方法 parser à la canvg。

所以，转换为 Konva 动画是一个晚上的工作，但手动将它们编码为 Konva 确实是最简单的解决方案。感谢您的回答！