CODEWITHSUNDEEP
paperjs
Dilip
Dilip

Reputation: 668

How to resize and reposition PaperJs drawing with canvas size change?

I'm creating an application using Paperjs to drawing some sketch on an image, persisting the sketch without the background and display back the sketch along with background image.

In my Paperjs canvas, I have a raster image and on top of that I'm making some sketch pointing a part of the background image. After the drawing is done, I'm doing JSON export, excluding background raster image, to persist the drawing. Now when I export it back, the background raster image is generated dynamically and the Paper canvas size is set to the size of the image. But if the browser window size is different then the size of the image will be different than where the original drawing is created.

The issue that I'm facing if the image size isn't the used while creating the sketch, its pointing to the different part of the image. Is there any way we can proportionally change the paperjs drawing so that the sketch points to the same point of the background raster image?

Any help would be appreciated.

Below is an example :

With actual size -

enter image description here

After resize

enter image description here

Upvotes: 1

Views: 1000

Answers (1)

Dilip
Dilip

Reputation: 668

I'm able to achieve what I wanted to with the below changes. Thanks @arthur.sw for your help. Here originalViewSize is the original size on which the actual sketch was created.

Steps:

  • Update view size
  • Calculate x-axis and y-axis scale factor
  • Update bounds for background image
  • Update active layer positions
  • Scale active layer

// Changing view size and calculating scale factor for x & y-axis

paperScope.view.viewSize = new Size(originalViewSize.width + 200, originalViewSize.height + 100);
const xScale = paperScope.view.viewSize.width /originalViewSize.width;
const yScale = paperScope.view.viewSize.height /originalViewSize.height;

// Update b/g image bounds

backgroundRaster.bounds = paperScope.view.bounds;
paperScope.project.activeLayer.position.x = paperScope.project.activeLayer.position.x * xScale;
paperScope.project.activeLayer.position.y = paperScope.project.activeLayer.position.y * yScale;
paperScope.project.activeLayer.scale(xScale, yScale);

Upvotes: 3

Related Questions