[SOLVED] Help Calculate Scale Ratio of Screen 2D


I am trying to code a simple drag of a Image Element with touch controls.
So, my logic was to add the delta position between each touchmove to the position of the Image Element. Then i noticed that the Screen 2D is being scaled so it will not be a 1:1 ratio with the screen.

Long story short. I failed to get the correct ratio.

        var ratioHeight = this.screen2D.scaleBlend;
        var ratioWidth = 1- this.screen2D.scaleBlend;

        this.ratioScale = ratioWidth*  this.screen2D.referenceResolution.x / this.screen2D.resolution.x  + ratioHeight * this.screen2D.referenceResolution.y / this.screen2D.resolution.y ;

This is what i tough, but its not right unless Scale Blend is on 1 or 0.
I feel that i am way off the mark.

Thanks in advance.

I’ve done canvas position to world here https://playcanvas.com/editor/scene/598304

Haven’t yet done screen to canvas but perhaps that’s some clue that might help?

1 Like


Reading your code i bumped into screen corners.

var corners = this.entity.element.screenCorners;
var widthElementOnScreen = corners[1].x -corners[0].x;
this.ratioScale = this.entity.element.calculatedWidth / widthElementOnScreen;

With the two corners i get the screen size of the elements and with calculatedWidth i get the original width. Boom simple division i got the ratio of the scale.

1 Like