How to repeat Paths in Free Drawing?

user_1110291 0
Viewed 269

Please look at
https://stackblitz.com/edit/js-wxidql
Here is my code.

import { fabric } from "fabric";

const canvas = new fabric.Canvas("c", { isDrawingMode: true });
canvas.setBackgroundColor("rgb(255,73,64)", canvas.renderAll.bind(canvas));
canvas.on("path:created", e => {
  let mousePath = e.path;
  let offsetPath = new fabric.Path();
  let offsetLeft = mousePath.left + 60;
  let offsetTop = mousePath.top + 60;
  offsetPath.setOptions({
    path: mousePath.path,
    left: offsetLeft,
    top: offsetTop,
    width: mousePath.width,
    height: mousePath.height,
    fill: '',      
    stroke: 'black'       
  });
  canvas.add(offsetPath);
  canvas.requestRenderAll();
});

Here is an resulting image of my drawing session. my drawing of happy face in top left

I drew the happy face in the top left corner of the canvas with my mouse. The offset image was added by my code. How can I change my code to make the offset drawing look like the one drawn with my mouse?

Edit: from https://github.com/fabricjs/fabric.js/wiki/When-to-call-setCoords I tried using
offsetDraw.setCoords(); but I was unable to find a way to make it work.

Edit: What I have presented here is a minimized example. I am working on an larger project where I save each path drawn by the user. Later I recreate those paths in an animation like sequence.

Edit: I made some changes to my code in a effort to understand fabricjs.

const canvas = new fabric.Canvas("c", { isDrawingMode: true });
canvas.setBackgroundColor("rgb(255,73,64)", canvas.renderAll.bind(canvas));
canvas.on("path:created", e => {
  let mousePath = e.path;
  let offsetPath = new fabric.Path();
  let offsetLeft = mousePath.left + 60;
  let offsetTop = mousePath.top + 60;
  offsetPath.setOptions({
    path: mousePath.path,
    //left: offsetLeft,
    //top: offsetTop,
    width: mousePath.width,
    height: mousePath.height,
    fill: '',      
    stroke: 'black'       
  });
  canvas.add(offsetPath);
  canvas.requestRenderAll();
  console.log("mousePath left " + mousePath.left + " top " + mousePath.top);
  console.log("offsetPath left " + offsetPath.left + " top " + offsetPath.top);
});

In that code, I commented out the setting of the left and top properties of the offsetPath and added console.log lines. I drew a circle in the top left corner of the canvas with my mouse. The resulting image was the following. altered code result

The following was printed in the console.

mousePath left 7.488148148148148 top 10.5
offsetPath left -0.5 top -0.5

I don't understand the results. Why was the offset circle rendered in that position?

Edit: I drew another test with my mouse. Concentric Circles

It seems that the code repeats the paths of concentric circles rather well. But, the vertical lines are moved out of their correct position. Their displacements increase as the distance from the center increases. Why?

fabricjs
2 Answers

I found a solution for my own question. But, if someone has a better one, then please post it. Look at https://stackblitz.com/edit/js-ncxvpg
The following is the code.

const canvas = new fabric.Canvas("c", { isDrawingMode: true });
canvas.setBackgroundColor("rgb(255,73,64)", canvas.renderAll.bind(canvas));
canvas.on("path:created", e => {
  let mousePath = e.path;
  mousePath.clone(clone => {
    clone.setOptions({
      left: mousePath.left + 100,
      top: mousePath.top + 100
    });
    canvas.add(clone);
  });
});

If someone has an explaination as to why my original code didn't work, then please post it. result

user_11102910

thanks for sharing your comments on my question. I am facing a similar issue, just that if I click anywhere on the Canvas the first time. Then the offset issue vanishes. This happens for any object that I programmatically insert into the canvas.

In my case, I suspect that the canvas.pointer is having some offset of the current mouse position. However, when I click and add one very small path of 1pixel, then the pointer offset gets corrected. After this, all subsequent paths or objects created programatically are shown at the correct positions.

user_13848590
Related