Fabric JS:使用坐标(x,y)设置图像定位

Fabric JS: Set Image positioning with coordinates (x,y)

本文关键字:设置 定位 图像 JS 坐标 Fabric      更新时间:2023-09-26

在裁剪图像之后,我不保存裁剪的图像,但我得到了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);

这样做最好的方法是什么?

您可以在此链接中引用"画布背景和覆盖"。他们已经解释了如何将图像设置为画布背景的方法。现在,正如您所说,您已经裁剪了图像数据,您可以先裁剪图像,然后根据给定的链接设置图像