Question

在我的项目中，我有一个缩放功能，它在这里工作http://pixie.vebto.com/

缩放适用于画布上的所有对象，SVG图像除外。当我进行缩放时，SVG图像不按比例缩放并改变其在边界框内的位置。这会导致有时会剪切SVG图像，而不是完全显示。

您可以在示例中使用按钮放大和缩小来查看它是如何发生的。在画布上也是一个通常的图像（不是SVG），它工作正常。

为什么会发生这种情况，我应该怎么做才能使SVG图像像普通图像一样工作，没有这种奇怪的缩放？

示例 - https://jsfiddle.net/Eugene_Ilyin/pj47vqpp/

$("#in").click(function(){
    canvas.setZoom(canvas.getZoom() + 0.1);
    canvas.setHeight(1500 * canvas.getZoom());
  	canvas.setWidth(1500 * canvas.getZoom());
});
$("#out").click(function(){
    canvas.setZoom(canvas.getZoom() - 0.1);
    canvas.setHeight(1500 * canvas.getZoom());
  	canvas.setWidth(1500 * canvas.getZoom());
});

var canvas  = new fabric.Canvas('c');

var img1 = new fabric.Image(new Image());
          img1.set({
            left: 10,
            top: 10
          });
          img1.name = 'SVGTextImage';
img1.setSrc("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMjAwIiB2ZXJzaW9uPSIxLjEiPgogICAgICAgICAgPGRlZnM+CiAgICAgICAgICAgIDxwYXRoIGlkPSJmaWVsZE9uZV9fbGluZSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDE1MCAxMDApIiBmaWxsPSJub25lIiBzdHJva2U9InRyYW5zcGFyZW50IiBzdHJva2Utd2lkdGg9IjMiIGQ9Ik0gMTUwLCAxMDAgbSAtNTIsIDAgYSAgNTIsNTIgMCAxLDEgIDEwNCwwIGEgIDUyLDUyIDAgMSwxIC0xMDQsMCAiLz4KICAgICAgICAgIDwvZGVmcz4KICAgICAgICAgIDxnIGZpbGw9Im5hdnkiPgogICAgICAgICAgICA8dGV4dCBpZD0iZmllbGRPbmVfX291dHB1dFdyYXAiIHN0eWxlPSJ0ZXh0LWFuY2hvcjogbWlkZGxlOyBsZXR0ZXItc3BhY2luZzogN3B4OyIgdGV4dExlbmd0aD0iMTg1IiBmb250LWZhbWlseT0iSGlyYWdpbm8gTWluY2hvIj4KICAgICAgICAgICAgICA8dGV4dFBhdGggaWQ9ImZpZWxkT25lX19vdXRwdXQiIHN0YXJ0T2Zmc2V0PSI1MCUiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bGluazpocmVmPSIjZmllbGRPbmVfX2xpbmUiIGZvbnQtc2l6ZT0iMjUiIGNsYXNzPSJuZy1iaW5kaW5nIj5XYXZ5IHRleHQgaXMgdGhlPC90ZXh0UGF0aD4KICAgICAgICAgICAgPC90ZXh0PgogICAgICAgICAgPC9nPgogICAgICAgIDwvc3ZnPg==", function() {
					img1.setCoords();
          img1.width = 1000;
          img1.height = 1000;
          img1.scaleX = 0.3;
          img1.scaleY = 0.3;
          canvas.renderAll();
        });
        
        var img2 = new fabric.Image(new Image());
          img2.set({
            left: 320,
            top: 10
          });
          img2.name = 'Regular image';
          img2.setSrc('http://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg', function() {
					img2.setCoords();
          img2.width = 500;
          img2.height = 500;
          img2.scaleX = 0.3;
          img2.scaleY = 0.3;
          canvas.renderAll();
        });
canvas.add(img1);
canvas.add(img2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.3/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="in">Zoom+</button>
<button id="out">Zoom-</button>
<canvas id="c" width="1500" height="1500"></canvas>

Answer 1

我不熟悉FabricJS，但我相信你的问题是你使用的SVG没有width或height。它的标题如下：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" version="1.1">

我不确定Fabric如何在内部处理图像，但我想它正在尝试读取图像的naturalWidth和naturalHeight，在这样的SVG中，它不包含合适的值

如果我们更新SVG，那么它有width和height ...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" version="1.1"
     width="300" height="200">

属性，您的测试似乎按预期工作。

$("#in").click(function(){
    canvas.setZoom(canvas.getZoom() + 0.1);
    canvas.setHeight(1500 * canvas.getZoom());
  	canvas.setWidth(1500 * canvas.getZoom());
});
$("#out").click(function(){
    canvas.setZoom(canvas.getZoom() - 0.1);
    canvas.setHeight(1500 * canvas.getZoom());
  	canvas.setWidth(1500 * canvas.getZoom());
});

var canvas  = new fabric.Canvas('c');

var img1 = new fabric.Image(new Image());
          img1.set({
            left: 10,
            top: 10
          });
          img1.name = 'SVGTextImage';
img1.setSrc("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMDAgMjAwIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIzMDAiIGhlaWdodD0iMjAwIj4NCiAgICAgICAgICA8ZGVmcz4NCiAgICAgICAgICAgIDxwYXRoIGlkPSJmaWVsZE9uZV9fbGluZSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDE1MCAxMDApIiBmaWxsPSJub25lIiBzdHJva2U9InRyYW5zcGFyZW50IiBzdHJva2Utd2lkdGg9IjMiIGQ9Ik0gMTUwLCAxMDAgbSAtNTIsIDAgYSAgNTIsNTIgMCAxLDEgIDEwNCwwIGEgIDUyLDUyIDAgMSwxIC0xMDQsMCAiLz4NCiAgICAgICAgICA8L2RlZnM+DQogICAgICAgICAgPGcgZmlsbD0ibmF2eSI+DQogICAgICAgICAgICA8dGV4dCBpZD0iZmllbGRPbmVfX291dHB1dFdyYXAiIHN0eWxlPSJ0ZXh0LWFuY2hvcjogbWlkZGxlOyBsZXR0ZXItc3BhY2luZzogN3B4OyIgdGV4dExlbmd0aD0iMTg1IiBmb250LWZhbWlseT0iSGlyYWdpbm8gTWluY2hvIj4NCiAgICAgICAgICAgICAgPHRleHRQYXRoIGlkPSJmaWVsZE9uZV9fb3V0cHV0IiBzdGFydE9mZnNldD0iNTAlIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeGxpbms6aHJlZj0iI2ZpZWxkT25lX19saW5lIiBmb250LXNpemU9IjI1IiBjbGFzcz0ibmctYmluZGluZyI+V2F2eSB0ZXh0IGlzIHRoZTwvdGV4dFBhdGg+DQogICAgICAgICAgICA8L3RleHQ+DQogICAgICAgICAgPC9nPg0KICAgICAgICA8L3N2Zz4=", function() {
					img1.setCoords();
          img1.width = 1000;
          img1.height = 1000;
          img1.scaleX = 0.3;
          img1.scaleY = 0.3;
          canvas.renderAll();
        });
        
        var img2 = new fabric.Image(new Image());
          img2.set({
            left: 320,
            top: 10
          });
          img2.name = 'Regular image';
          img2.setSrc('http://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg', function() {
					img2.setCoords();
          img2.width = 500;
          img2.height = 500;
          img2.scaleX = 0.3;
          img2.scaleY = 0.3;
          canvas.renderAll();
        });
canvas.add(img1);
canvas.add(img2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.3/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="in">Zoom+</button>
<button id="out">Zoom-</button>
<canvas id="c" width="1500" height="1500"></canvas>

当用户进行缩放时，不同类型图像的不同行为

1 个答案: