当前位置：首页 > article >正文

fabricjs 添加图片并实时更新小车位置

article 2025/2/28 2:54:17

需求：添加小车图片到画布中，后端通过ws实时更新小车位置

实际过程中遇到的问题：

设置中心点：我想把图片的中心设置为后端传来的坐标点，可以通过设置对象的originX和originY属性来改变对象的旋转和定位基点。
让小车永远处于最高级，因为我这个画布有其他图形，例如矩形代表站点的意思，小车经过这个站点，即使这个站点处于被选中状态，也要让小车处于画布最高级。
你可以通过禁用preserveObjectStacking属性来实现

  canvas = new fabric.Canvas(canvasRef.value, {
    preserveObjectStacking: true
  });

在设置小车图像为最高层级时，统一使用canvas.moveTo(object, index)方法，而不是canvas.bringToFront(object)。 index代表了对象的z-index，因此将小车的z-index设置为一个足够大的值可以确保它始终保持在最顶层。
3. 设置图片的大小：可以使用 .scaleToWidth 和 .scaleToHeight 方法来设置图片的大小
4. 在上方过程中，我发现移动过程中，可能会导致图片大小设置失效->解决办法：每次remove旧的图片，添加新的图片重新设置大小
5. 有时候小车在矩形上面，但我想触发点击矩形的事件，会被小车阻挡->解决办法：img.evented = false;

最终代码：

// 添加小车图片
const addCarImg = (point: MousePosition, angle: number) => {
  const containsCar = canvas.getObjects().filter((item: any) => item.type === 'img');
  if (containsCar.length) {
    canvas.remove(containsCar[0]);
  }
  fabric.Image.fromURL('./image.png', function (img) {
    img.scaleToWidth(rectWidth);
    img.scaleToHeight(rectWidth);
    // 设置初始位置 // 以图片的中心为基点（旋转或定位的基点）originX: 'center', originY: 'center',
    img.set({
      left: point.x,
      top: point.y,
      angle,
      type: 'img',
      originX: 'center',
      originY: 'center'
    });

    img.selectable = false;
    // 不允许图片的所有事件
    // eslint-disable-next-line spellcheck/spell-checker
    img.evented = false;
    // 添加图片到画布上
    canvas.add(img);
    canvas.moveTo(img, Number.MAX_SAFE_INTEGER);
  });
};