Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Fabric JS: Set X Y Coordinates in Canvas Image | Set Position in Canvas Image

How to set X, Y Coordinates in canvas image?

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

e.g: sx and sy in HTML canvas drawImage() Method.

What is similar to this in fabric.js?

How to set position in image in canvas in Fabric js?

like image 323
Kavan Pancholi Avatar asked Sep 30 '22 15:09

Kavan Pancholi


1 Answers

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

this is in native JS

  • img Specifies the image, canvas, or video element to use
  • sx Optional. The x coordinate where to start clipping
  • sy Optional. The y coordinate where to start clipping
  • swidth Optional. The width of the clipped image
  • sheight Optional. The height of the clipped image
  • x The x coordinate where to place the image on the canvas
  • y The y coordinate where to place the image on the canvas
  • width Optional. The width of the image to use (stretch or reduce the image)
  • height Optional. The height of the image to use (stretch or reduce the image)

in fabric:

var canvas = new fabric.Canvas('canvas', { selection: false });
    fabric.Image.fromURL("http://timeplusq.com/dakshin/clip03.png", function(obj) {
    canvas.add(obj.set({
        width: 294,
        hasControls: false,
        //cornerColor: 'green',cornerSize: 16,transparentCorners: false,
        selection: false,       
        lockRotation:false,
        //lockMovement: false,lockMovementY: false,lockMovementX: false,
        //lockUniScaling: false,lockScalingY:false, lockScalingX:false,
        hoverCursor: 'default',
        hasRotatingPoint: false,
        hasBorders: true,borderColor: 'red',borderSize: 2,
        transparentBorder: false,
        height: 294,
        angle: 0,
        cornersize: 10,
        left: 2, 
        top: 2
    }));
    canvas.setActiveObject(canvas.item(0));
    canvas.item(0).selectable = false;
    canvas.backgroundColor = 'rgba(0,0,255,0.3)';
    //img.bringToFront();
    canvas.renderAll();
    });

JSFIDDLE

like image 58
alessandrio Avatar answered Oct 25 '22 13:10

alessandrio