Fabric JS：在画布图像中设置X Y坐标 | 在画布图像中设置位置

Question

如何在画布图像中设置X，Y坐标？

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

例如：HTML canvas drawImage() 方法中的sx和sy。

fabric.js中类似于此的是什么？

如何在Fabric js中设置图像的位置？

- Kavan Pancholi

Answer 1

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

这是使用原生JS来实现的

• img：指定要使用的图像、画布或视频元素
  
• sx：可选项。剪裁开始的x坐标
  
• sy：可选项。剪裁开始的y坐标
  
• swidth：可选项。被剪裁图像的宽度
  
• sheight：可选项。被剪裁图像的高度
  
• x：在画布上放置图像的x坐标
  
• y：在画布上放置图像的y坐标
  
• width：可选项。要使用的图像的宽度（拉伸或缩小图像）
  
• height：可选项。要使用的图像的高度（拉伸或缩小图像）
  

在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

- alessandrio

---

我的问题是如何在fabric.js中设置图像的位置，就像我们在本地js中使用"sx和sy"一样。 - Kavan Pancholi

谢谢你的努力，但是你没有理解我的意思。我想要定位图片。在你的例子中，如果我只想显示整个图片中卡通形象的脸怎么办？ - Kavan Pancholi

仅调整：宽度：368，高度：1200，左侧：-45，顶部：-160 - alessandrio