Har drabbats av ett riktigt hjärnsläpp med en egentligen väldigt enkel matematisk uträkning. Det är nämligen så att jag har en yta med pixel koordinater och ska göra en "scaleAtOrigin" funktion så att den zoomar där musen är eller så.
Har dessa variabler att jobba med:
so far so good.. Alla dessa funktioner fungerar och gör jobbet. Nu är det så att jag ska göra en 'scaleAtOrigin' funktion som istället för att ändra den faktiska utgångspunkten för render transformen istället räknar ut dom nya positionsvariablerna till setMapPosition, och det är denna enkla matematik jag helt enkelt inte får till (pinsamt..).
värdet (x, y) som kommer in till funktionen är redan normaliserade från pixlar till koordinater genom clientToMapPosition funktionen. Kan tillägga att origin är 0 0 (top left) och det enda scaleAtOrigin funktionen ska göra är att räkna ut dom nya värdena eftersom att setMapPosition och dom andra funktionerna fungerar redan.
Någon som kan hjälpa mig med denna enkla matematiska formel då min hjärna inte tycks fungera som den ska just nu
?
EDIT: Kan lägga till exempel på funktionen redan från event listenern så att det blir enklare att se hela kedjan:
Har dessa variabler att jobba med:
Kod:
this.map = { x: 0, y: 0, scale: 1 };
this.offset = kartans_html_element.getBoundingClientRect();
clientToMapPosition(x, y) {
x -= this.offset.left;
y -= this.offset.top;
x -= this.map.x;
y -= this.map.y;
x = x / this.map.scale;
y = y / this.map.scale;
return {
x: x,
y: y
}
}
setMapPosition(x, y, scale) {
this.map.x = x;
this.map.y = y;
this.map.scale = scale;
this.applyTransform();
}
applyTransform() {
let transform = 'translate3d(' + this.map.x + 'px, ' + this.map.y + 'px, 0) scale(' + this.map.scale + ')';
this.surfaces.style.webkitTransformOrigin = '0 0';
this.surfaces.style.webkitTransform = transform;
}
so far so good.. Alla dessa funktioner fungerar och gör jobbet. Nu är det så att jag ska göra en 'scaleAtOrigin' funktion som istället för att ändra den faktiska utgångspunkten för render transformen istället räknar ut dom nya positionsvariablerna till setMapPosition, och det är denna enkla matematik jag helt enkelt inte får till (pinsamt..).
värdet (x, y) som kommer in till funktionen är redan normaliserade från pixlar till koordinater genom clientToMapPosition funktionen. Kan tillägga att origin är 0 0 (top left) och det enda scaleAtOrigin funktionen ska göra är att räkna ut dom nya värdena eftersom att setMapPosition och dom andra funktionerna fungerar redan.
Kod:
scaleAtOrigin(x, y, scale) {
let map_x = ?????
let map_y = ????? braindeaad...
this.setMapPosition(map_x, map_y, scale);
this.applyTransform();
}
Någon som kan hjälpa mig med denna enkla matematiska formel då min hjärna inte tycks fungera som den ska just nu
?EDIT: Kan lägga till exempel på funktionen redan från event listenern så att det blir enklare att se hela kedjan:
Kod:
canvas.element.addEventListener('dblclick', function(event) {
let origin = canvas.clientToMapPosition(event.clientX, event.clientY);
canvas.scaleAtOrigin(origin.x, origin.y, 1.2);
});
__________________
Senast redigerad av edm4life 2016-12-17 kl. 23:04.
Senast redigerad av edm4life 2016-12-17 kl. 23:04.
