CODEWITHSUNDEEP
javascriptsvgfabricjs
Eugene
Eugene

Reputation: 983

Different behavior of different types of images when user does zoom

In my project, I have a functionality of zoom, which works as here http://pixie.vebto.com/

Zoom works fine for all objects on the canvas, except SVG images. When I do zoom, SVG image scales not proportionally and changes its position inside of the bounding box. It leads to a situation that sometimes the SVG image will be clipped, instead of to be displayed fully.

You can play with buttons Zoom in and Zoom out in the example, to see how is it happen. On the canvas also a usual image (not SVG) and it works fine.

Why is it happen and what should I do to make an SVG image works as a normal image, without such strange scaling?

Example - 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>

Upvotes: 0

Views: 55

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101860

I'm not familiar with FabricJS, but I believe your problem is that the SVG you are using has no width or height. Its header looks like this:

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

I'm not sure how Fabric handles images internally, but I imagine it is trying to read the image's naturalWidth and naturalHeight, which won't contain suitable values in the case of SVGs like this.

If we update the SVG so it has width and height...

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

attributes, your test seems to work as you would expect.

$("#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>

Upvotes: 1

Related Questions