How to multiply each value in an array of coordinates-CodePudding

I have an array of coordinates:

const markerCoords = [
{ topLeftX: 68.5, topLeftY: 19 },
{ topLeftX: 57.5, topLeftY: 57.5 },
{ topLeftX: 140.5, topLeftY: 52 },
{ topLeftX: 136, topLeftY: 70 },
{ topLeftX: 134.3, topLeftY: 88.3 },
{ topLeftX: 270.5, topLeftY: 68.8 },
{ topLeftX: 211.7, topLeftY: 135.3 },
{ topLeftX: 245.5, topLeftY: 189.7 },
{ topLeftX: 199.5, topLeftY: 222.5 },
{ topLeftX: 128.5, topLeftY: 241.6 },
{ topLeftX: 174.3, topLeftY: 263.5 },
{ topLeftX: 167.8, topLeftY: 285.7 },
{ topLeftX: 134, topLeftY: 309 },
{ topLeftX: 251, topLeftY: 304.6 }];

And I want to multiply each value by x, and map the new coordinates to a new similar array. Like so:

const newMarkerCoords = markerCoords.map({topLeftX, topLeftY} => {topLeftX * x, topLeftY * x})

It is to place markers on the correct spots, when I scale the image map bigger.

CodePudding user response：

You were pretty close, here's a working sample of what you tried to do:

const markerCoords = [
{ topLeftX: 68.5, topLeftY: 19 },
{ topLeftX: 57.5, topLeftY: 57.5 },
{ topLeftX: 140.5, topLeftY: 52 },
{ topLeftX: 136, topLeftY: 70 },
{ topLeftX: 134.3, topLeftY: 88.3 },
{ topLeftX: 270.5, topLeftY: 68.8 },
{ topLeftX: 211.7, topLeftY: 135.3 },
{ topLeftX: 245.5, topLeftY: 189.7 },
{ topLeftX: 199.5, topLeftY: 222.5 },
{ topLeftX: 128.5, topLeftY: 241.6 },
{ topLeftX: 174.3, topLeftY: 263.5 },
{ topLeftX: 167.8, topLeftY: 285.7 },
{ topLeftX: 134, topLeftY: 309 },
{ topLeftX: 251, topLeftY: 304.6 }];

const x = 2;
    
newMarkerCoords = markerCoords.map(({topLeftY, topLeftX}) => {return {topLeftY: topLeftY * x, topLeftX: topLeftX * x}})

console.log(newMarkerCoords);

CodePudding user response：

This is probably what you want:

const newMarkerCoords = markerCoords.map(item => {return {topLeftX:item.topLeftX*x, topLeftY:item.topLeftY*x};})

CodePudding user response：

I think this is the problem with your code:

const markerCoords = [
{ topLeftX: 68.5, topLeftY: 19 },
{ topLeftX: 57.5, topLeftY: 57.5 },
{ topLeftX: 140.5, topLeftY: 52 },
{ topLeftX: 136, topLeftY: 70 },
{ topLeftX: 134.3, topLeftY: 88.3 },
{ topLeftX: 270.5, topLeftY: 68.8 },
{ topLeftX: 211.7, topLeftY: 135.3 },
{ topLeftX: 245.5, topLeftY: 189.7 },
{ topLeftX: 199.5, topLeftY: 222.5 },
{ topLeftX: 128.5, topLeftY: 241.6 },
{ topLeftX: 174.3, topLeftY: 263.5 },
{ topLeftX: 167.8, topLeftY: 285.7 },
{ topLeftX: 134, topLeftY: 309 },
{ topLeftX: 251, topLeftY: 304.6 }];

let newMarkerCoords = markerCoords.map(({topLeftY, topLeftX}) => {
    return {topLeftY: topLeftY * 2, topLeftX: topLeftX * 2}
});

console.log(newMarkerCoords);

You were not returning correctly from the map function the curly braces make the body of the function but were not returning anything.

const markerCoords = [
{ topLeftX: 68.5, topLeftY: 19 },
{ topLeftX: 57.5, topLeftY: 57.5 },
{ topLeftX: 140.5, topLeftY: 52 },
{ topLeftX: 136, topLeftY: 70 },
{ topLeftX: 134.3, topLeftY: 88.3 },
{ topLeftX: 270.5, topLeftY: 68.8 },
{ topLeftX: 211.7, topLeftY: 135.3 },
{ topLeftX: 245.5, topLeftY: 189.7 },
{ topLeftX: 199.5, topLeftY: 222.5 },
{ topLeftX: 128.5, topLeftY: 241.6 },
{ topLeftX: 174.3, topLeftY: 263.5 },
{ topLeftX: 167.8, topLeftY: 285.7 },
{ topLeftX: 134, topLeftY: 309 },
{ topLeftX: 251, topLeftY: 304.6 }];

let newMarkerCoords = markerCoords.map(({topLeftY, topLeftX}) => Object.assign({}, {topLeftY: topLeftY * 2, topLeftX: topLeftX * 2}));

console.log(newMarkerCoords);

You can do something like it.