FabricJS: pan canvas while drawing

Question

Here is the link to the codepen: https://codepen.io/Jsbbvk/pen/RwGBwOO

const edgePadding = 80; 
const panSpeed = 5;
const expandCanvasEdge = (x, y) => {
  let pan = {
    x: 0,
    y: 0,
  };
  const width = canvas.getWidth(),
        height = canvas.getHeight();

  if (x <= edgePadding) {
    //left
    const speedRatio = 1 - Math.max(0, x) / edgePadding;
    pan.x = panSpeed * speedRatio;
  } else if (x >= width - edgePadding) {
    //right
    const speedRatio =
          1 - (width - Math.min(width, x)) / edgePadding;
    pan.x = -panSpeed * speedRatio;
  }

  if (y <= edgePadding) {
    //top
    const speedRatio = 1 - Math.max(0, y) / edgePadding;
    pan.y = panSpeed * speedRatio;
  } else if (y >= height - edgePadding) {
    //bottom
    const speedRatio =
          1 - (height - Math.min(height, y)) / edgePadding;
    pan.y = -panSpeed * speedRatio;
  }

  if (pan.x || pan.y) {
    canvas.relativePan(new fabric.Point(pan.x, pan.y));
  }
}

canvas.on('mouse:move', function(opt) {
  
  if (this.isMouseDown && this.isDrawingMode) {
    let {x, y} = canvas.getPointer(opt.e, true);
    expandCanvasEdge(x, y);
  }
  
  if (!this.isDrawingMode && this.isDragging) {
    //panning
    var e = opt.e;
    var vpt = this.viewportTransform;
    vpt[4] += e.clientX - this.lastPosX;
    vpt[5] += e.clientY - this.lastPosY;
    this.requestRenderAll();
    this.lastPosX = e.clientX;
    this.lastPosY = e.clientY;
  }
});

In the demo, when you draw close to the edge of the canvas, the canvas should pan to allow more drawing space.

However, while the panning is happening, the drawing (path) is static on the canvas; it doesn't stretch as the canvas pans.

Is there a way to fix this issue?

score 0 · Answer 1 · answered Jan 08 '21 at 11:50

I did some deep research for you and found a few examples. You can overcome this situation by using the relativePan function.

One of the examples I have found:

function startPan(event) {
  if (event.button != 2) {
    return;
  }
  var x0 = event.screenX,
      y0 = event.screenY;
  function continuePan(event) {
    var x = event.screenX,
        y = event.screenY;
    fc.relativePan({ x: x - x0, y: y - y0 });
    x0 = x;
    y0 = y;
  }
  function stopPan(event) {
    $(window).off('mousemove', continuePan);
    $(window).off('mouseup', stopPan);
  };
  $(window).mousemove(continuePan);
  $(window).mouseup(stopPan);
  $(window).contextmenu(cancelMenu);
};
function cancelMenu() {
  $(window).off('contextmenu', cancelMenu);
  return false;
}
$(canvasWrapper).mousedown(startPan);

You can determine a roadmap by examining the resources and demos here.

JSFiddle demo https://jsfiddle.net/tornado1979/up48rxLs/

You can browse https://stackoverflow.com/questions/34423822/how-to-implement-canvas-panning-with-fabric-js — Gucal, Jan 08 '21 at 11:51
Thanks for doing some research for me. However, the problem isn't panning the canvas; the problem is the free drawing while panning the canvas. I don't know if you saw the problem in the codepen, but as you draw close to the canvas edge (e.g. right edge), the lines don't stretch as intended. — Jsbbvk, Jan 09 '21 at 06:16

FabricJS: pan canvas while drawing

1 Answers1