|
| Javascript og Vektor regning? Fra : Stig Johansen |
Dato : 21-03-08 09:32 |
|
NB xpost : dk.edb.internet.webdesign.clientside,dk.videnskab
Ingen fut, da jeg er i tvivl om hvor det passer bedst.
Ja, man må nok sande, at det er 30+ år siden jeg rodede med vektor regning
osv.
Problemstillingen:
Jeg har et billede i noget html, med en given størrelse, Eksempelvis 600x600
px.
Lad os betragte det som et koordinatsystem.
Jeg har så en funktion, der registrerer hvor på billedet der er foretaget et
museklik, dvs. et punkt (Xc, Yc).
Jeg er så ude på at afgøre om, og hvilket predefineret polygon, der er
klikket i.
I første omgang har jeg kun brug for en firesidet polygon.
Det kunne være (X1,Y1),(X2,Y2),(X3,Y3),(X4,Y4)
Jeg kan simplethen ikke huske de korrekte notationer, så bær over med mig.
Men jeg ser så polygonet som disse 4 vektorer:
Vektor 1 (X1,Y1) ----> (X2,Y2)
Vektor 2 (X2,Y2) ----> (X3,Y3)
Vektor 3 (X3,Y3) ----> (X4,Y4)
Vektor 4 (X4,Y4) ----> (X2,Y2)
For at gøre det nemt (for mig) kan vi sætte betingelser med rækkefølge i
forhold til koordinaterne.
Hvis vi laver et rent rektangel, er det nemt at teste i forhold til
kordinaterne, men der hvor filmen knækker (for mig) er, når det eksempelvis
er en trapez.
Det jeg ikke rigtig kan finde ud af er hvordan jeg finder ud af om f.eks. Xc
ligger til højre eller venstre for eksempelvis en
Vektor (10,10)------> (100,100)
Det er muligvis meget banalt, men jeg er helt blank.
--
Med venlig hilsen
Stig Johansen
| |
Uffe Kousgaard (21-03-2008)
| Kommentar Fra : Uffe Kousgaard |
Dato : 21-03-08 11:50 |
|
"Stig Johansen" <wopr.dk@gmaill.com> wrote in message
news:47e3730c$0$90274$14726298@news.sunsite.dk...
> Jeg har så en funktion, der registrerer hvor på billedet der er foretaget
> et
> museklik, dvs. et punkt (Xc, Yc).
> Jeg er så ude på at afgøre om, og hvilket predefineret polygon, der er
> klikket i.
Brug html <AREA> tag til hotspot, så behøver du ikke selv regne på, hvilken
polygon der er klikket i.
> I første omgang har jeg kun brug for en firesidet polygon.
> Det kunne være (X1,Y1),(X2,Y2),(X3,Y3),(X4,Y4)
<AREA SHAPE="POLY" COORDS="X1,Y1,X2,Y2,X3,Y3,X4,Y4" HREF="....">
Og så havde du altså sat FUT, selvom du skrev det modsatte !
| |
Stig Johansen (21-03-2008)
| Kommentar Fra : Stig Johansen |
Dato : 21-03-08 13:51 |
|
Uffe Kousgaard wrote:
> Brug html <AREA> tag til hotspot, så behøver du ikke selv regne på,
> hvilken polygon der er klikket i.
Jo, tak, det bruger jeg når der ikke er slået Javascript til. dog <map> og
ikke <area> - det må jeg lige se på mht w3c.
Det med JS'et er til noget ekstra lir.
> Og så havde du altså sat FUT, selvom du skrev det modsatte !
Sorry, påskefrokost i går, måske skulle man holde sig fra kodekæppen idag.
--
Med venlig hilsen
Stig Johansen
| |
P.C. (21-03-2008)
| Kommentar Fra : P.C. |
Dato : 21-03-08 10:13 |
|
"Det jeg ikke rigtig kan finde ud af er hvordan jeg finder ud af om
f.eks. Xc
ligger til højre eller venstre for eksempelvis en
Vektor (10,10)------> (100,100) "
Det er ret nemt ; du har kun X og Y kooerdinater og du kan altså kigge
på X værdien og Y værdien. -- Så du kan blot kontrolere om først X
værdien af Xc er større eller mindre end det punkt du kontrolerer .
Det er rimeligt nemt at give regler for hvor to punkter ligger i
forhold til hinanden på den måde. Men du er nok først nødt til at
beskrive reglerne ; f.eks om Xa ligger til højre for Xb , findes ved
om X værdien af Xa er større end X værdien af Xb. Hvis så samtidig Y
værdien af Xa er større end Xb , så ligger Xa over og til højre for
Xb. Det kan så være en ide at bruge højreåndsreglen for at bestemme
punkternes placering og få lidt orden i punkternes rækkefølge..
| |
P.C. (21-03-2008)
| Kommentar Fra : P.C. |
Dato : 21-03-08 10:49 |
|
On Mar 21, 5:12 pm, "P.C." <per.cor...@privat.dk> wrote:
> "Det jeg ikke rigtig kan finde ud af er hvordan jeg finder ud af om
> f.eks. Xc
> ligger til højre eller venstre for eksempelvis en
> Vektor (10,10)------> (100,100) "
>
> Det er ret nemt ; du har kun X og Y kooerdinater og du kan altså kigge
> på X værdien og Y værdien. -- Så du kan blot kontrolere om først X
> værdien af Xc er større eller mindre end det punkt du kontrolerer .
> Det er rimeligt nemt at give regler for hvor to punkter ligger i
> forhold til hinanden på den måde. Men du er nok først nødt til at
> beskrive reglerne ; f.eks om Xa ligger til højre for Xb , findes ved
> om X værdien af Xa er større end X værdien af Xb. Hvis så samtidig Y
> værdien af Xa er større end Xb , så ligger Xa over og til højre for
> Xb. Det kan så være en ide at bruge højreåndsreglen for at bestemme
> punkternes placering og få lidt orden i punkternes rækkefølge..
Undskyld hvis det ikke er klart nok, en løsning er nok først at
oprette et Array med fire elementer ABCD.
Så finder du først det punkt ud af de fire der har mindst X og
santidigt mindst Y værdi og det punkt sætter du ind på A's plads.
Så finder du det punkt ud af de tre der er tilbage, der har højere Y
værdi men mindste X værdi og det sætter du ind på B pladsen i dit
Array.
Så finder du det punkt der har større X værdi og Y værdi end A , det
sætter du så ind som C i dit Array.
Så kontrolerer du om det sidste punkt har samme Y værdi som A og samme
X værdi som C og har det det, så kan du sætte det punkt ind som D.
Der er nok en fejl et eller andet sted men det er jo dig der skal
skrive de helt rigtige regler for at sætte punkteren rigtigt ind, så
dette er bare et forslag og
der er selvfølgelig andre måder at kontrolere punkterne , --- hvis det
så er et kvadrat vil A have samme X værdi som B og B vil have samme Y
værdi som C, er det en trapez så må du udregne vektor retningen og
kontrolere om vektor AB er paralell med CD --- det er jo nemt.
| |
Filip Larsen (21-03-2008)
| Kommentar Fra : Filip Larsen |
Dato : 21-03-08 12:01 |
| | |
Stig Johansen (21-03-2008)
| Kommentar Fra : Stig Johansen |
Dato : 21-03-08 13:57 |
| | |
Stig Johansen (21-03-2008)
| Kommentar Fra : Stig Johansen |
Dato : 21-03-08 14:36 |
|
> Filip Larsen wrote:
> > http://www.webmasterworld.com/javascript/3551991.htm
Det virker squ'
Ud fra linket lavede jeg denne lille test:
// start -----------
var xp = new Array();
var yp = new Array();
xp[0] =280 ;
yp[0] =90 ;
xp[1] =274;
yp[1] =22 ;
xp[2] =319;
yp[2] =22 ;
xp[3] =315 ;
yp[3] =90 ;
xp[4] =280;
yp[4] =90 ;
function pnpoly(x, y) {
var npol = xp.length;
var i, j, c = false;
for (i = 0, j = npol-1; i < npol; j = i++) {
if ((((yp[i] <= y) && (y < yp[j])) ||
((yp[j] <= y) && (y < yp[i]))) &&
(x < (xp[j] - xp[i]) * (y - yp[i]) / (yp[j] - yp[i]) + xp[i]))
c =!c;
}
return c;
}
//---------------
Oven på lidt påskefrokost i går tror jeg ikke lige jeg forstår _hvorfor_ det
virker, men en
alert (' in poly ? ' + pnpoly(X, Y) );
viser true og false jfr. klik.
Men det må blive til et matematisk studium på et tidspunkt.
Takker igen mange gange.
--
Med venlig hilsen/Best regards
Stig Johansen
| |
|
|