Question

我使用fabricjs在我的画布上添加animated sprite。与fabricjs网站上的demo不同，我使用的是.svg sprite而不是.png，因此它应该在没有质量损失的情况下进行扩展。

然而，当我尝试扩展svg精灵时，质量损失是巨大的。我已经将精灵测试为一个静态物体，并且它没有任何质量问题。

以下是一个示例，顶部图片是具有默认大小的精灵，在下面我已经增加了它的大小，你可以看到边缘很讨厌。

什么可能导致svg在缩放为动画精灵时出现质量问题？

这是精灵（粗略测试图像）http://imgh.us/sprite1_2.svg

HTML / JS

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="http://fabricjs.com/lib/fabric.js"></script>
  <script src="http://fabricjs.com/js/sprite.class.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

</head>
<body>
 <canvas id="canvas" width="500" height="300" style="border:1px solid #444;"></canvas>

  <div id="add">Click here to add Animated SVG sprite</div>

 <script> 
  var canvas = this.__canvas = new fabric.Canvas('canvas');
  var src1 = "img/sprite1_2.svg";

    $("#add").click(function(){
      fabric.Sprite.fromURL(src1, createSprite(1),{"width":50,"height":72});
    });

      function createSprite(i) {
      return function(sprite) {
        sprite.set({
        left: i * 100 + 50,
        top: i * 100 + 50,
        hasBorders: false,
        padding: 0,
        });
        canvas.add(sprite);
        setTimeout(function() {
        sprite.play();
        }, fabric.util.getRandomInt(1, 10) * 100);
      };
      }

      (function render() {
      canvas.renderAll();
      fabric.util.requestAnimFrame(render);
    })();
  </script> 
</body>
</html>

（我发现我可以让这个演示工作的唯一方法是在FF中，如果svg在本地托管，由于SecurityError。这阻止了我制作一个工作小提琴/ jsbin）

缩放期间SVG质量损失

0 个答案: