CODEWITHSUNDEEP
html5-canvaspaperjs
Nino Cocchiarella
Nino Cocchiarella

Reputation: 69

Paper.js, force Cartesian coordinate system with origin at center

Using paper.js and loving it. I want to use the Cartesian coordinate system though, as opposed to the "document"-style system that is default.

When I draw on a canvas with plain js (without paper.js), I enforce the transformation like this (on $(document).ready()):

ctx = canvas.getContext("2d");
ctx.scale(1, -1);
ctx.translate(0, (-canvas.height/2));

But with the way paper.js runs in the browser, this doesn't work.
The view object in paper has a method transform(), yet the following code throws an error, even though the view object is clearly available by the output to the console:

console.log(view);
view.transform( new Matrix(1,0,0,-1,300,300) );

// console output:
// CanvasView {_context: CanvasRenderingContext2D, _eventCou......
// Uncaught TypeError: view.transform is not a function

I'm thinking I need to call transform upon some document load event? But I don't see any straightforward events such that in paper's API.

Is there a simple way to just simply apply a linear transformation to the whole view once, in the beginning, to get a Cartesian system?

Upvotes: 2

Views: 1479

Answers (1)

Nino Cocchiarella
Nino Cocchiarella

Reputation: 69

Figured out the following works:

project.activeLayer.transform( new Matrix(1,0,0,-1,view.center.x, view.center.y) );

Upvotes: 1

Related Questions