Question

简而言之，我正在创建一个人们可以协作并绘制图像的应用。

我现在有一个概念验证，但是我注意到如果两个人合作使用不同大小的窗口，那么图纸会在另一个人的浏览器中显示不正确的比例。 / p>

解决方案是规范化绘图输入，使点表示为它们跨越的画布的百分比，而不是绝对像素值。但是，我不知道如何在FabricJS中执行此操作。最后，我需要确定解决方案在缩放时也能正常工作。

任何有关规范化绘图输入的建议都将不胜感激！作为参考，这是我目前的代码。

警告：我之前从未使用过FabricJS，因此这段代码示例是几篇博文和SO答案的混搭。 这不是好的代码，如果FabricJS是我决定使用的库，将完全重构

重要的一行已被评论

document.addEventListener('DOMContentLoaded', () => {
  const room = window.location.href.split('/').pop();
  const socket = io.connect();

  socket.on('connect', () => {
    socket.emit('room', room);
  });

  var canvas = new fabric.Canvas('map', {
    isDrawingMode: true
  });

  let size = Math.min(window.innerWidth, window.innerHeight);
  canvas.setHeight(size);
  canvas.setWidth(size);

  var img = new Image();
  img.onload = function () {
    canvas.setBackgroundImage(img.src, canvas.renderAll.bind(canvas), {
      width: canvas.width,
      height: canvas.height,
    });
  };
  img.src = "/images/map.jpg";

  canvas.wrapperEl.addEventListener('wheel', (e) => {
    if (e.deltaY <= 0) {
      canvas.zoomToPoint({
        x: e.offsetX,
        y: e.offsetY
      }, canvas.getZoom() * 1.1);
    } else {
      canvas.zoomToPoint({
        x: e.offsetX,
        y: e.offsetY
      }, canvas.getZoom() * 0.9);
    }
  });

  canvas.on('path:created', function (e) {
    // This is where I need to normalize the path data
    canvas.remove(fabric.Path.fromObject(JSON.stringify(e.path)));
    socket.emit('draw_line', {
      line: e.path.toJSON(),
      room: room
    });
  });

  socket.on('draw_line', function (path) {
    // This is where I need to convert the path data from percentages to real size
    fabric.util.enlivenObjects([path], function (objects) {
      objects.forEach(function (o) {
        canvas.add(o);
      });
    });
  });

  var panning = false;
  canvas.on('mouse:up', function (e) {
    panning = false;
  });
  canvas.on('mouse:out', function (e) {
    panning = false;
  });
  canvas.on('mouse:down', function (e) {
    panning = true;
  });
  canvas.on('mouse:move', function (e) {
    //allowing pan only if the image is zoomed.
    if (panning && e && e.e && e.e.shiftKey) {
      var delta = new fabric.Point(e.e.movementX, e.e.movementY);
      canvas.relativePan(delta);
    }
  });
});

Answer 1

一般的工作解决方案是为绘图板提供虚拟固定尺寸：

例如，

15.000 x 15.000。

然后在每个客户端应用中，您可以根据需要制作画布，例如1000 x 1000，另一个将获得800 x 800。

将画布缩放设置为每个都可以看到所需的图形在15.000空间坐标上保持相同的点值。

绘图厚度可能会随缩放级别而变化。

canvas.setZoom(1000/15000)和canvas.setZoom(800/15000)就足够了。

如果它不起作用，某处有一个错误，应该修复。

在FabricJS中规范化绘图？

1 个答案: