javascript - Fabric JS: Set X Y Coordinates in Canvas Image | Set Position in Canvas Image - Stack Overflow

admin管理员组

文章数量:1398815

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?

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?

• javascript
• html
• canvas
• html5-canvas
• fabricjs

Share Improve this question Follow asked Oct 15, 2014 at 12:49 Kavan PancholiKavan Pancholi 60255 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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./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

本文标签： javascriptFabric JS Set X Y Coordinates in Canvas ImageSet Position in Canvas ImageStack Overflow