Copy link to clipboard
Copied
I get different dimensions for the canvas with canvas.width and canvas.style.width, despite turning off responsive scaling. If I try to place an object at the canvas.style.width (i.e. parseFloat(canvas.style.width.split("px")[0])), then it is placed as I expect it to be, but not with canvas.width.
For example:
1) No Responsive Rescaling:
canvas.style.width: 100px
stage.scaleX: 1.25
canvas.width: 125
when object.x: canvas.width - Object gets placed incorrectly, very far away from the edge.
when object.x: canvas.style.width - Object gets placed correctly, at the edge as expected.
2) With Responsive Rescaling:
canvas.style.width: 101.072px
stage.scaleX: 1.2634048257372654
canvas.width: 126
when object.x: canvas.width - Object gets placed incorrectly, very far away from the edge.
when object.x: canvas.style.width - Object gets placed incorrectly, farther from the edge, acting as if the scaling hasn't changed (I tried console logging it. The dimensions do change).
I tried scaling the content with the document, and without it to no avail.
I could probably subtract the old stage scaling from the newer one after scaling, but how do I get the older stage scale factor in that case?
What am I doing wrong?
I have attached screenshots for four combinations of configurations to this question.
Hi.
When the responsive settings are used, the scale of the stage will most likely change. And this change has to be taken into account.
You can divide canvas size by the stage scale like so:
this.object.x = canvas.width * 0.5 / stage.scaleX;
this.object.y = canvas.height * 0.5 / stage.scaleY;
Or just use the dimensions stored in the global lib object (the same ones from the Document Settings) :
this.object.x = lib.properties.width * 0.5;
this.object.y = lib.properties.height * 0.5;
...
Copy link to clipboard
Copied
Hi.
When the responsive settings are used, the scale of the stage will most likely change. And this change has to be taken into account.
You can divide canvas size by the stage scale like so:
this.object.x = canvas.width * 0.5 / stage.scaleX;
this.object.y = canvas.height * 0.5 / stage.scaleY;
Or just use the dimensions stored in the global lib object (the same ones from the Document Settings) :
this.object.x = lib.properties.width * 0.5;
this.object.y = lib.properties.height * 0.5;
I hope it helps.
Regards,
JC
Copy link to clipboard
Copied
Thank you
Copy link to clipboard
Copied
You're welcome.