[英]Fabric JS: Set X Y Coordinates in Canvas Image | Set Position in Canvas Image
How to set X, Y Coordinates in canvas image? 如何在画布图像中设置X,Y坐标?
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
eg: sx and sy in HTML canvas drawImage() Method. 例如:HTML canvas中的sx和sy drawImage()方法。
What is similar to this in fabric.js? fabric.js中的相似之处是什么?
How to set position in image in canvas in Fabric js? 如何在Fabric js中设置画布中的位置?
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
this is in native JS 这是原生JS
- img Specifies the image, canvas, or video element to use
img指定要使用的图像,画布或视频元素
- sx Optional.
sx可选。 The x coordinate where to start clipping
x坐标从哪里开始裁剪
- sy Optional.
sy可选。 The y coordinate where to start clipping
y坐标从哪里开始裁剪
- swidth Optional.
swidth可选。 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
x x坐标将图像放在画布上的位置
- y The y coordinate where to place the image on the canvas
y y坐标将图像放置在画布上的位置
- width Optional.
width可选。 The width of the image to use (stretch or reduce the image)
要使用的图像宽度(拉伸或缩小图像)
- height Optional.
height可选。 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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.