Transform and re-map coordinates - javascript angular 8
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Given the dimensions of a viewport, and the co-ordinates of the four points of a rectangle as an array, and the dimensions of another viewport Y, return the top,right,left, and bottom values and width and height of the rectangle placed in the viewport Y.

Input:


width: 600,
height: 800,
polygon: [
{
"x": "332.97",
"y": "243.38"
},
{
"x": "369.46",
"y": "243.38"
},
{
"x": "369.46",
"y": "251.72"
},
{
"x": "332.97",
"y": "251.72"
}
]
viewport-X. Width: 456
viewport-y. Height: 591

I need the output to be something like this

Expected output (example format only, not actual values/numbers)

{
"top": 308.0357142857143,
"left": 496.42857142857133,
"width": 167.85714285714283,
"height": 158.92857142857142,
"bottom": 466.96428571428567,
"right": 664.2857142857142
}

Assume the new viewports top/left is at (0,0) and bottom right is at (width, height).

in your code I would like a param to be able to set the decimal rounding in case we want to have 8 digits of precision vs 2 etc..

please use https://stackblitz.com/ for your posted solution so we can all run it easily in angular 8 sandbox

is width and height (given in example) the newest viewport size?
Chlegou 27 days ago
yes you got it!
Qdev 27 days ago
Hi, I don't get how the expected values are derived from the given input data. Could you please elaborate a bit more. I first understood it as scaling the coordinates proportional to the viewport sizes. But that doesn't give the expected values given in the description. Thanks. Best regards, Jonas.
Sanjo 27 days ago
same thoughts, i have tried calculations manually, but wasn't the same results. for example: top = ( 243.38 ) * (600 / 456) = 320.2368421052632 =/= 308.0357142857143 (given value)
Chlegou 27 days ago
hey guys sorry, the second set of numbers was an example of the transform not the actual new values.
Qdev 27 days ago
awarded to kerncy
Tags
javascript

Crowdsource coding tasks.

2 Solutions

Winning solution

Hi QDev,

Please try my solution : https://stackblitz.com/edit/angular-dufr49

I had to modify your input a little bit to have a valid JSON object so it's easier to parse, I hope it will be OK for you. Do not hesitate if you have any question.

Best regards


Solution

Scaling of the rectangle proportional to the viewport size ratio.

Input viewports have been named input.fromViewport and input.toViewport for clarification.
If required this can be changed.

Source code:

The file extension of the two files can be changes to .ts if required.

The solution has not been integrated into the default Angular app of the Stackblitz project.

Let me know if you need any modifications.

Best regards

Jonas

View Timeline