在 FabricJS 中标准化绘图？答案

【问题标题】：Normalize drawing in FabricJS?在 FabricJS 中标准化绘图？
【发布时间】：2017-08-28 05:00:17
【问题描述】：

简而言之，我正在制作一个应用程序，人们可以在其中协作并在图像上绘图。

我现在有一个概念验证，但我注意到如果合作的两个人使用不同大小的窗口，绘图在其他人的浏览器上显示的比例不正确。

解决方案是标准化绘图输入，以便点表示为它们跨越的画布的百分比，而不是绝对像素值。但是，我不知道如何在 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);
    }
  });
});

【问题讨论】：

标签： javascript canvas fabricjs

【解决方案1】：

一个通用的解决方案是给你的绘图板一个虚拟的固定尺寸：

例如 15.000 x 15.000。

然后在每个客户端应用程序中，将画布设置为任意大小，例如 1000 x 1000，另一个将获得 800 x 800。

将画布缩放设置为每个缩放将可以看到绘图尽可能大，并在 15.000 空间坐标上保持相同的点值。

绘图粗细可能会随缩放级别而变化。

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

如果它不起作用，则某处存在错误，应该修复。

【讨论】：