3_1612075142.html

<!DOCTYPE html>
<html>
  <head>
    
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> 
    </script> 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


    <style>
   div.canvas-container{
    max-width: 640px;
    max-height: 480px;
    overflow: hidden;
    /*border: 1px solid red;*/
}
canvas{
    /*border-width: 1px solid black;*/
}
    </style>
  </head>
  <body>
  
    <button id="btnZoomIn">ZoomIn</button>
    <button id="btnZoomOut">ZoomOut</button>
    <button id="btnResetZoom">Reset Zoom</button>
    <button id="btnZoomToRight">Canvas: &#8594;</button>
    <button id="btnZoomToLeft">Canvas: &#8592;</button>
    <button id="btnZoomToUp">Canvas: &#8593;</button>
    <button id="btnZoomToDown">Canvas: &#8595;</button>
    <button id="btnZoomInByMouse">mouse: zoom-in</button>
    <button id="btnZoomOutByMouse">mouse: zoom-out</button>
    <button id="btnPanModeByMouse">mouse: Pan-mode</button>
    <button id="btnRectangle">Rectangle</button>
    <button id="btnCircle">Circle</button>
    <button id="btnLine"> Line </button>
  <!--   <button id="btnPolygon"> polygon </button>
 -->

    <span id="zoomByMouseStatus" style="border: 1px solid red; color: red; background-color: yellow;">No-Zoom</span>
    <br/>
    <canvas id="c" width="640" height="480"></canvas>


   <script type="text/javascript">
    var src = "https://iconizer.net/files/Practika/orig/twitter.png";

var SCALE_FACTOR = 1.3; //on clicking zoom, enlarge canvas in 30%. TBD

var zoomInByMouse = false;
var zoomOutByMouse = false;
var PanModeByMouse = false;

var zoomMax = 23;   //TBD
var mouseDown;

var canvasHeight = 480;
var canvasWidth = 640;


// canvas
var canvas = new fabric.Canvas('c');

var getFabricCanvases = (function () {
    var fabricCanvasCollection;
    return function getCanvases() {
        if (!fabricCanvasCollection) {
            fabricCanvasCollection = [];
            var fabricCanvas = $('.canvas-container canvas');
            fabricCanvas.each(function(index, item) {
                fabricCanvasCollection.push($(item));
            });
        }
        return fabricCanvasCollection;
    }
})();

canvas.on('mouse:down', function(e){
    if( zoomInByMouse ) {
        zoomByMouseCoords(e, "in");
    } else if( zoomOutByMouse ) {
        zoomByMouseCoords(e, "out");
    }
    else {
        mouseDown = true;
    }
});

canvas.on('mouse:up', function () {
    console.log("canvas.on(mouse:up):: up");
    mouseDown = false;
});

//canvas.backgroundColor = "#00fa00";
canvas.setBackgroundImage('https://images.pexels.com/photos/736230/pexels-photo-736230.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500', canvas.renderAll.bind(canvas), {
    backgroundImageOpacity: 0.5,
    backgroundImageStretch: false
});

canvas.on('mouse:move', function (e) {
    if (PanModeByMouse && mouseDown){
        console.log("canvas.on(mouse:move):PanModeByMouse:: movementX: " + e.e.movementX +", " +e.e.movementY);
        panToByMouseCoords(e.e.movementX, e.e.movementY);
    }
});

// text
var text = new fabric.Text('A Note..', {
    left: 200,
    top: 50
});
text.hasRotatingPoint = true;
canvas.add(text);

// circle
var circle = new fabric.Circle({
    left: 200,
    top: 150,
    radius: 50,
    fill: "#dde000"
});
circle.hasRotatingPoint = true;
canvas.add(circle);

//image
fabric.util.loadImage(src, function(img) {
    var object = new fabric.Image(img);
    object.set({
        left: 200,
        top: 300
    });
    object.hasRotatingPoint = true;
    object.scaleX = object.scaleY = .25;
    canvas.add(object);
    canvas.renderAll();
});

canvas.renderAll();

// button Zoom In
$("#btnZoomIn").click(function(){
    zoomIn();
});
// button Zoom Out
$("#btnZoomOut").click(function(){
    zoomOut();

    getFabricCanvases().forEach(function(elementValue) {
        var currentTop = Number(elementValue.css("top").replace(/[^\d\.\-]/g, '') );
        var currentLeft = Number(elementValue.css("left").replace(/[^\d\.\-]/g, '') );

        currentTop = zoomCalcYpos(currentTop);
        currentLeft = zoomCalcXpos(currentLeft);

        elementValue.css("top", currentTop);
        elementValue.css("left", currentLeft);
    });

});

// button Reset Zoom
$("#btnResetZoom").click(function(){
    resetZoom();
});

// button Zoom To Right
$("#btnZoomToRight").click(function(){
    zoomToRight();
});
// button Zoom To Left
$("#btnZoomToLeft").click(function(){
    zoomToLeft();
});
// button Zoom To Up
$("#btnZoomToUp").click(function(){
    zoomToUp();
});
// button Zoom To Up
$("#btnZoomToDown").click(function(){
    zoomToDown();
});

// button Zoom To Down
$("#btnZoomInByMouse").click(function(){
    zoomInByMouse = !zoomInByMouse;
    zoomOutByMouse = PanModeByMouse = false;
    document.getElementById('zoomByMouseStatus').innerHTML = "zoomIn: " +zoomInByMouse;    //FOR QA ONLY
    zoomCanvasSelection(!zoomInByMouse);
    console.log("btnZoomInByMouse: " +zoomInByMouse);
});
// button Zoom To Down
$("#btnZoomOutByMouse").click(function(){
    zoomOutByMouse = !zoomOutByMouse;
    zoomInByMouse = PanModeByMouse = false;
    document.getElementById('zoomByMouseStatus').innerHTML = "zoomOut: " +zoomOutByMouse;    //FOR QA ONLY
    zoomCanvasSelection(!zoomOutByMouse);
    console.log("btnZoomOutByMouse: " +zoomOutByMouse);
});

// button Pan
$("#btnPanModeByMouse").click(function(){
    PanModeByMouse = !PanModeByMouse;
    zoomInByMouse = zoomOutByMouse = false;
    document.getElementById('zoomByMouseStatus').innerHTML = "panMode: " +PanModeByMouse;    //FOR QA ONLY
    zoomCanvasSelection(!PanModeByMouse);
    console.log("btnPanModeByMouse: " +PanModeByMouse);

});

createListenersKeyboard();

function createListenersKeyboard() {
    document.onkeydown = onKeyDownHandler;
    //document.onkeyup = onKeyUpHandler;
}

function onKeyDownHandler(event) {
    //event.preventDefault();

    var key;
    if(window.event){
        key = window.event.keyCode;
    }
    else{
        key = event.keyCode;
    }

    switch(key){
        //////////////
        // Shortcuts
        //////////////
        // Zoom In (Ctrl+"+")
        case 187: // Ctrl+"+"
            if(ableToShortcut()){
                if(event.ctrlKey){
                    event.preventDefault();
                    zoomIn();
                }
            }
            break;
        // Zoom Out (Ctrl+"-")
        case 189: // Ctrl+"-"
            if(ableToShortcut()){
                if(event.ctrlKey){
                    event.preventDefault();
                    zoomOut();
                }
            }
            break;
        // Reset Zoom (Ctrl+"0")
        case 48: // Ctrl+"0"
            if(ableToShortcut()){
                if(event.ctrlKey){
                    event.preventDefault();
                    resetZoom();
                }
            }
            break;
        default:
            // TODO
            break;
    }
}

function ableToShortcut(){
    /*
     TODO check all cases for this

     if($("textarea").is(":focus")){
     return false;
     }
     if($(":text").is(":focus")){
     return false;
     }
     */
    return true;
}
/********************************/

function zoomToRight() {
    zoomMoveStepToPosition('left', '+');
}
function zoomToLeft() {
    zoomMoveStepToPosition('left', '-');
}
function zoomToDown() {
    zoomMoveStepToPosition('top', '+');
}
function zoomToUp() {
    zoomMoveStepToPosition('top', '-');
}
/********************************/

//panToByMouseCoords
function panToByMouseCoords(xDelta, yDelta) {

    getFabricCanvases().forEach(function(elementValue) {
        var currentTop = Number(elementValue.css("top").replace(/[^\d\.\-]/g, '') );
        var currentLeft = Number(elementValue.css("left").replace(/[^\d\.\-]/g, '') );

        console.log("panToByMouseCoords:: (currentTop, yDelta): (" + currentTop + ", " + yDelta +")" +", (currentLeft, xDelta): (" + currentLeft + ", " + xDelta +")");

        currentTop = zoomCalcYpos(currentTop + yDelta);
        currentLeft = zoomCalcXpos(currentLeft + xDelta);
        elementValue.css("top", currentTop);
        elementValue.css("left", currentLeft);
    });
}

//Zoom By Mouse Coordinates
function zoomByMouseCoords(event, direction) {
    //if selectable element was clicked, don't zoom, just return:
    /*if (canvas.getActiveObject()) {
     return false;
     }*/

    if( !direction || !event.e ) return;

    var pointer = canvas.getPointer(event.e);
    console.log("zoomByMouseCoords: direction: " +direction +", p.x: " +pointer.x +", p.y:" + pointer.y +", canvas.width: " +canvas.getWidth());

    if( direction.toLowerCase() == "in" ){
        if(canvas.getZoom().toFixed(5) > zoomMax){
            console.log("zoomByMouseCoords: Error: cannot zoom-in anymore");
            return;
        }
        zoomIn();
    }
    if( direction.toLowerCase() == "out" ){
        if( canvas.getZoom().toFixed(5) <=1 ){
            console.log("zoomByMouseCoords: Error: cannot zoom-out anymore");
            return;
        }
        zoomOut();
    }
    zoomToPosition( zoomInCalcXpos(pointer.x), zoomInCalcYpos(pointer.y));
}

// Zoom In
function zoomIn() {
    if(canvas.getZoom().toFixed(5) > zoomMax){
        console.log("zoomIn: Error: cannot zoom-in anymore");
        return;
    }

    canvas.setZoom(canvas.getZoom()*SCALE_FACTOR);
    canvas.setHeight(canvas.getHeight() * SCALE_FACTOR);
    canvas.setWidth(canvas.getWidth() * SCALE_FACTOR);
    canvas.renderAll();
}

// Zoom Out
function zoomOut() {
    if( canvas.getZoom().toFixed(5) <=1 ){
        console.log("zoomOut: Error: cannot zoom-out anymore");
        return;
    }

    canvas.setZoom(canvas.getZoom()/SCALE_FACTOR);
    canvas.setHeight(canvas.getHeight() / SCALE_FACTOR);
    canvas.setWidth(canvas.getWidth() / SCALE_FACTOR);
    canvas.renderAll();
}

// Reset Zoom
function resetZoom() {

    canvas.setHeight(canvas.getHeight() /canvas.getZoom() );
    canvas.setWidth(canvas.getWidth() / canvas.getZoom() );
    canvas.setZoom(1);

    canvas.renderAll();

    getFabricCanvases().forEach(function(item){
        item.css('left', 0);
        item.css('top', 0);
    });

}

function zoomCanvasSelection(isSelectable) {
    isSelectable = (isSelectable==true);
    canvas.selection = isSelectable;
    canvas.forEachObject(function(o) {
        o.selectable = isSelectable;
    });
}
function zoomInCalcXpos(xPos) {
    xPos *= canvas.getZoom();
    return zoomCalcXpos((canvasWidth/2) - xPos);
}
function zoomCalcXpos(xPos) {
    if (xPos>0){
        return 0;
    }
    if (xPos+canvas.getWidth() < canvasWidth){
        return canvasWidth - canvas.getWidth();
    }
    return xPos;
}

function zoomInCalcYpos(yPos) {
    yPos *= canvas.getZoom();
    return zoomCalcYpos( (canvasHeight/2) - yPos );
}
function zoomCalcYpos(yPos) {
    if (yPos>0){
        return 0;
    }
    if (yPos+canvas.getHeight() < canvasHeight) {
        return canvasHeight - canvas.getHeight();
    }
    return yPos;
}
function zoomToPosition(x,y) {
    zoomMoveToPosition('top', y);
    zoomMoveToPosition('left', x);
}
function zoomMoveToPosition(position, numericValue) {
    getFabricCanvases().forEach(function(elementValue) {
        elementValue.css(position, numericValue);
    });
}

function zoomMoveStepToPosition(position, operator) {
    getFabricCanvases().forEach(function(elementValue) {
        var current = Number(elementValue.css(position).replace(/[^\d\.\-]/g, '') );
        current = eval(current + operator + 20);

        if(position == "left" || position == "right" ) current = zoomCalcXpos(current);
        if(position == "top" || position == "bottom" ) current = zoomCalcYpos(current);

        elementValue.css(position, current);
    });
}


// button Rectangle
$("#btnRectangle").click(function(){
  //  var canvas = new fabric.Canvas('canvas');
var arrow = new Rectangle(canvas);
});

var Rectangle = (function () {
    function Rectangle(canvas) {
        var inst=this;
        this.canvas = canvas;
        this.className= 'Rectangle';
        this.isDrawing = false;
        this.bindEvents();
    }

   Rectangle.prototype.bindEvents = function() {
    var inst = this;
    inst.canvas.on('mouse:down', function(o) {
      inst.onMouseDown(o);
    });
    inst.canvas.on('mouse:move', function(o) {
      inst.onMouseMove(o);
    });
    inst.canvas.on('mouse:up', function(o) {
      inst.onMouseUp(o);
    });
    inst.canvas.on('object:moving', function(o) {
      //inst.disable();
    })
  }
    Rectangle.prototype.onMouseUp = function (o) {
      var inst = this;
      inst.disable();
    };

    Rectangle.prototype.onMouseMove = function (o) {
      var inst = this;
      

      if(!inst.isEnable()){ return; }
      console.log("mouse move rectange");
      var pointer = inst.canvas.getPointer(o.e);
      var activeObj = inst.canvas.getActiveObject();

      activeObj.stroke= 'red',
      activeObj.strokeWidth= 5;
      activeObj.fill = 'transparent';

      if(origX > pointer.x){
          activeObj.set({ left: Math.abs(pointer.x) }); 
      }
      if(origY > pointer.y){
          activeObj.set({ top: Math.abs(pointer.y) });
      }

      activeObj.set({ width: Math.abs(origX - pointer.x) });
      activeObj.set({ height: Math.abs(origY - pointer.y) });

      activeObj.setCoords();
      inst.canvas.renderAll();

    };

    Rectangle.prototype.onMouseDown = function (o) {
      var inst = this;
      inst.enable();

      var pointer = inst.canvas.getPointer(o.e);
      origX = pointer.x;
      origY = pointer.y;

      var rect = new fabric.Rect({
          left: origX,
          top: origY,
          originX: 'left',
          originY: 'top',
          width: pointer.x-origX,
          height: pointer.y-origY,
          angle: 0,
          transparentCorners: false,
          hasBorders: false,
          hasControls: false
      });

      inst.canvas.add(rect).setActiveObject(rect);
    };

    Rectangle.prototype.isEnable = function(){
      return this.isDrawing;
    }

    Rectangle.prototype.enable = function(){
      this.isDrawing = true;
    }

    Rectangle.prototype.disable = function(){
      this.isDrawing = false;
    }

    return Rectangle;
}());


// button Circle
$("#btnCircle").click(function(){
  let circle, isDown, origX, origY;

canvas.observe('mouse:down', function(o){
  isDown = true;
  var pointer = canvas.getPointer(o.e);
  origX = pointer.x;
  origY = pointer.y;
  circle = new fabric.Circle({
    left: pointer.x,
    top: pointer.y,
    radius: 1,
    strokeWidth: 1,
    stroke: 'black',
    fill: 'white',
    selectable: true,
    originX: 'center', originY: 'center'
  });
  canvas.add(circle);
});

canvas.observe('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  circle.set({ radius: Math.abs(origX - pointer.x) });
  canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});

    canvas.on('object:moving', ()=> {
      //inst.disable();
      //isDown = false;
      //canvas.remove(circle);
      
      console.log('moving')
    })

});


//button line
$("#btnLine").click(function(){
  let line, isDown;

canvas.on('mouse:down', function(o){
  isDown = true;
  let pointer = canvas.getPointer(o.e);
  let points = [ pointer.x, pointer.y, pointer.x, pointer.y ];
  line = new fabric.Line(points, {
    strokeWidth: 5,
    fill: 'red',
    stroke: 'red',
    originX: 'center',
    originY: 'center'
  });
  canvas.add(line);
});

canvas.on('mouse:move', function(o){
  if (!isDown) return;
  var pointer = canvas.getPointer(o.e);
  line.set({ x2: pointer.x, y2: pointer.y });
  canvas.renderAll();
});

canvas.on('mouse:up', function(o){
  isDown = false;
});
})


   </script>
  </body>
</html>