SVG анимация в холсте Konva - PullRequest
Новая
       33

SVG анимация в холсте Konva

0 голосов
/ 31 октября 2019

Я хотел бы добавить анимированный 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 Ответ

1 голос
/ 01 ноября 2019

Насколько я знаю, на данный момент не существует решений для такого варианта использования.

Может быть, лучше просто использовать SVG вместо canvas (Konva). Или сделайте рисунки прямо на холсте, без SVG.

...