CODEWITHSUNDEEP
canvaspaperjs
Noober
Noober

Reputation: 1626

Fitting a canvas data to another canvas in paperjs

I am trying to fit a paperjs canvas into another canvas. I am using importJSON to import the canvas into current paperjs canvas object. However, the sizes are different for the 2 canvases and therefore, not all content is visible. I tried to set the view of the paperjs project but that didn't work. This is what I tried:

canvasObj.project.importJSON(tabData.dataUrl);
canvasObj.project.view.viewSize = new paper.Size(window.innerWidth - this.canvasWidthSubtract, window.innerHeight - this.canvasHeightSubtract);

In this, I am first loading the canvas using importJSON and setting the view. However, not all the content is visible. How can fit the contents of importJSON to the canvas.

Upvotes: 0

Views: 148

Answers (1)

nicholaswmin
nicholaswmin

Reputation: 22949

You can simply resize the imported layer to fit the bounds of the View of your 2nd canvas.

You can easily do this with the item.fitBounds method as illustrated below.

const imported = project.importJSON(`[["Layer",{"applyMatrix":true,"selected":true,"children":[["Path",{"applyMatrix":true,"selected":true,"segments":[[351.69873,371.5],[395,296.5],[438.30127,371.5]],"closed":true,"fillColor":[0.91373,0.91373,1]}],["Path",{"applyMatrix":true,"selected":true,"segments":[[479.54915,481.55283],[454.54915,463.38926],[445,434],[454.54915,404.61074],[479.54915,386.44717],[510.45085,386.44717],[535.45085,404.61074],[545,434],[535.45085,463.38926],[510.45085,481.55283]],"closed":true,"fillColor":[0.91373,0.91373,1]}]]}]]`)
const layer = imported.pop()

layer.fitBounds(view.bounds)

The example above imports a JSON exported via project.exportJSON, then resizes it to always fit within the imported view bounds/size.

Upvotes: 1

Related Questions