Image Position moving

Image Position moving

by Vivek kt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.5/fabric.js"></script>
<button id="zoomIn">+</button>
    <button id="zoomOut">-</button>
    <canvas id="canvas"></canvas>

CSS

canvas {
    border: 1px solid #999;
}

JavaScript

var canvas = window._canvas = new fabric.Canvas('canvas', {
    preserveObjectStacking: true
});

var imageObj = new Image(), path = 'http://i.imgur.com/tEeSJcr.jpg';

imageObj.src = path;

imageObj.onload = function () {
    var image = new fabric.Image(imageObj);

    canvas.setHeight(250);
    canvas.setWidth(250);
    image.set({
        id: 'img',
        left: 0,
        top: 0,
        selectable: true,
        hasBorders: false,
        hasControls: false,
        hasRotatingPoint: false
    });
    canvas.add(image);
};


canvas.on('object:moving', function (e) {
    var obj;
    obj = e.target;
    obj.setCoords();

    var boundingRect = obj.getBoundingRect();
    var zoom = canvas.getZoom();
    var viewportMatrix = canvas.viewportTransform;

    //there is a bug in fabric that causes bounding rects to not be transformed by viewport matrix
    //this code should compensate for the bug for now
    boundingRect.top = (boundingRect.top - viewportMatrix[5]) / zoom;
    boundingRect.left = (boundingRect.left - viewportMatrix[4]) / zoom;
    boundingRect.width /= zoom;
    boundingRect.height /= zoom;

    var canvasHeight = obj.canvas.height / zoom,
        canvasWidth = obj.canvas.width / zoom;
    
    if(boundingRect.top > 0){
        obj.top = 0;
    }
    
    if(boundingRect.left > 0){
        obj.left = 0;
    }
    
    if (boundingRect.top < canvasHeight - boundingRect.height){
        obj.top = canvasHeight - boundingRect.height;
    }
    
    if (boundingRect.left < canvasWidth - boundingRect.width){
        obj.left = canvasWidth - boundingRect.width;
    }
    
});

$('#zoomIn').click(function () {
    if (canvas.getZoom() < 3) {
        canvas.setZoom(canvas.getZoom() + 0.1);
    }
});

$('#zoomOut').click(function () {
    if (canvas.getZoom() !== 1) {
        canvas.setZoom(canvas.getZoom() - 0.1);
    }
});