Fabric JS：如何使用坐标（x，y）设置图像位置

Question

在裁剪图像之后，我没有保存裁剪后的图像，但我得到了包含X、Y、宽度和高度数据的数据。我在织物画布中使用完整的图像，然后需要通过这些数据在织物画布中设置图像的位置。

简而言之：我需要设置画布图像的坐标（x，y）。不是画布本身。仅仅是画布上的图像。 我尝试使用setOriginX、setOriginY，但结果并不符合需求。它获取0,0位置。 以下是代码

var canvas = new fabric.Canvas('canvas');
var imgElement = document.getElementById('myimg');
var CanImg = new fabric.Image(imgElement, {
    setScaleX: img_data.x,
    setScaleY: img_data.y
});
$('#canvas').attr('width',img_data.width);
$('#canvas').attr('height',img_data.height);
canvas.setHeight(img_data.height);
canvas.setWidth(img_data.width);
CanImg.selectable = false;
canvas.add(CanImg);

如何最好地实现这个功能？

- Kavan Pancholi

---

请问您能否提供一些代码、参考链接或图片，以便更好地理解您的需求？ - Innodel

编辑了带有问题代码的问题。 - Kavan Pancholi

Answer 1

您可以参考此链接中的“画布背景和叠加层”。他们已经解释了如何将图像设置为画布背景的方法。如您所说，您已经裁剪了图像数据，那么您只需先裁剪图像，然后按照给定的链接设置图像即可。

- Innodel

---

裁剪图片没问题。我已经完成了这个任务。我只是想在fabric js中使用类似的代码： context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height); 我希望在fabric js中使用sx和sy来裁剪图片。 - Kavan Pancholi