Matematické Fórum

Používám v Javascriptu (JS) jistou knihovnu, která převádí souřadnicový bod z obrazovky na číslo s desetinou čárkou float. Float je myslím číslo od 0.0 do 1.0 ... nebo tak nějak Algoritmus je zde:

Layout.ForceDirected.prototype.setMousePoint = function(x,y) {
var size = this.currentBB.topright.subtract(this.currentBB.bottomleft);
this.mousepoint.x = (x / this.canvas.width) * size.x + this.currentBB.bottomleft.x;
this.mousepoint.y = (y / this.canvas.height) * size.y + this.currentBB.bottomleft.y;
    return this.mousepoint;    
};

Canvas je čtverec na obrazovce na který se kreslí, je to objekt který má vlastnost šířky .width a vlastnost výšky .height. Odečtením souřadnic rohů (currentBB) dostaneme jeden bod jako výsledek, tedy objekt který má členy x a y .

Co je currentBB není zas tak podstatné. V JS to chodí tak, že jak napíšete něco nalevo (this.currentBB.topRight neboli souřadnice horního pravého rohu) a přidáte k tomu prototypovou funkci (substract) tak se provede ta funkce a to co jste dali vlevo bude vstupní argument té funkce. Takže řádek

this.currentBB.topright.subtract(this.currentBB.bottomleft);

odečítá currentBB.bottomleft (souřadnici vlevo dole) od souřadnice nahoře vpravo. Opět, jak to vypočítává není podstatné, ale pro jistotu tu uvedu jak ty funkce fungují:

Vector.prototype.subtract = function(v2) {
return new Vector(this.x - v2.x, this.y - v2.y);
};

Vector.prototype.multiply = function(n) {
return new Vector(this.x * n, this.y * n);
};

Vector.prototype.divide = function(n) {
return new Vector((this.x / n) || 0, (this.y / n) || 0); // Avoid divide by zero errors..
};

Vector.prototype.magnitude = function() {
return Math.sqrt(this.x*this.x + this.y*this.y);
};

Vektor je objekt který má dva členy: x a y. Ty funkce tedy vezmou vektor vlevo a změní hodnotu jeho členů tak, že počítají s číslem v argumentu funkce. Tolik na vysvětlení jak fungují funkce v té knihovně.

Teď k problému. Takže autor knihovny počítá se vzdáleností mezi dvěma body, problém je ale v tom že vypočítaná nebo nalezená vzdálenost není v pixelech, ale ve float. Z výše uvedené funkce by měl vyplývat návod jak převést vzdálenost ve float na px. Mě ale matematika nikdy nešla (jsem diskalkulik) takže se zde obracím na pomoc odvození vzorce. Já pro tuto dedukci nemám vytvořené synaptické spoje.

Je tam ještě jedna funkce, která je opakem té první a ta převádí souřadnice float na pixely:

Layout.ForceDirected.prototype.toScreen = function(p, distance) {
var size = this.currentBB.topright.subtract(this.currentBB.bottomleft);
var sx = p.subtract(this.currentBB.bottomleft).divide(size.x).x * this.canvas.width;
var sy = p.subtract(this.currentBB.bottomleft).divide(size.y).y * this.canvas.height;
// this.distance =
return new Springy.Vector(sx, sy);
};

sx je souřadnice x v px, xy je souřadnice y v px.

ještě musím vysvětlit, že poté co se provede dělené s danou hodnotou divide(size.x) se pracuje s výsledkem x tak že se vynásobí šířkou canvasu.

canvas.width je šířka plátna.
size.x by měl obsahovat aktuální šířku plochy na kterou smíme kreslit (size je obdelník či čtverec který může být menší než velikost canvasu).

A z toho potřebuju odvodit jak převést číslo float na pixel. Nejdříve jsem si říkal, že by mohlo stačít jen vzít ten řádek:

var sx = p.subtract(this.currentBB.bottomleft).divide(size.x).x * this.canvas.width;

jenže problém je v tom že tam se počítá s šířkou, kdežto na dalším řádku s výškou. Ale vzdálenost mezi dvěma body je uhlopříčka jehož úhel neznám. Existuje způsob jak odvodit výpočet převodu vzdálenosti mezi dvěma body?

PS:
Pokud vás přeci jen zajímá výpočet vzdálenosti mezi dvěma body je to takto:

var d = point1.p.subtract(point2.p);
var distance = d.magnitude() + 0.1;

d tedy drží hodnoty x a y jakožto rozdíl v šířce a délce, čili délku stran pomyslného trojúhelníku. Výsledek je ve float.

Ještě přidávám obrázek s příkladem na výpočet size. Rohy topright a bottomleft jsem zkrátil na tr a bl. Doufám že výsledek size je správně, takto to chápu:



Pozn. ve skutečnosti ty hodnoty mají být float ne integer.

Plátno obrázku představuje canvas (html prvek pro kreslení) a barevné čáry představují jednotlivé hodnoty canvasu; průsečíky v dané barvě představují pravý horní a levý dolní roh obdelníkové oblasti ve které budeme vykreslovat (zkrátka ohraničená oblast ve které se budou kreslit nějaké věci; obrazně je to jako okraje v sešitě).

Hodnoty naměřené v programu (příklad):
this.currentBB.topright = {x: 5.846244520970394 , y: 6.276303652164488}
this.currentBB.bottomleft = {x: -5.8327515659356255, y: -5.747108221682714}
size == {x: 11.67899608690602, y: 12.023411873847202};
x = 228, y = 235;
x / this.canvas.width == 0.19
x / this.canvas.width * size.x == 2.2190092565121438
this.currentBB.bottomleft.x == -5.8327515659356255
y / this.canvas.height == 0.235
y / this.canvas.height) * size.y == 2.8255017903540924
this.currentBB.bottomleft.y ==  -5.747108221682714



PRVNÍ PSEUDO-VZOREC ZJEDNODUŠENĚ:
point.x = (px.x / canvas.width) * size.x + bl.x

DRUHÝ PSEUDO-VZOREC ZJEDNODUŠENĚ:
pixel.x = ( (point.x - bl) /size.x ) * canvas.width

vstupní hodnoty px.x a point.x se týkají pozice myši na plátnu.

OTÁZKA:
Jak převést vzdálenost (uhlopříčku) mezi dvěma body v jednotkách point na px?