[js/html5] Kromme pijltjes tekenen (vrijdagmiddagpuzzel)

[Rekcor]

Ik ben bezig met een appje, waarmee studenten straks gebogen pijltjes kunnen tekenen in een chemische reactie.

Zie: http://jsbin.com/opeqog/7/edit

Op zich werkt het aardig, maar ik krijg de kromming van het pijltje niet goed. De top van de kromming moet namelijk precies in het midden van het gebogen pijltje liggen, ook als je het pijltje onder een hoek tekent.

Iemand een idee?

[storeman]

Het lijntje begint nu altijd omhoog wijzend. Hoe wil je deze kromming dan uitvoeren. Een verbinding tussen twee punten is altijd een rechte lijn namelijk .

Edit:

Zoiets:
http://jsfiddle.net/67U6m/1/

Hij werkte niet op jouw pagina, dus heb ik m op jsfiddle gezet.

[ Voor 27% gewijzigd door storeman op 08-02-2013 15:41 ]

[Rekcor]

De volgende stap is inderdaad om de kromming aan de goede kant te plaatsen. Het gaat er nu om dat de top van de kromming op de goede plek zit.

Hier zit de top van de kromming precies in het midden (gewenste situatie, ook als ik de curve schuin teken):

__---''''''---__

Hier zit 'ie teveel naar links (=huidige situatie):

_-'''''''''''---__

Hier zit 'ie teveel naar rechts:

__--'''''''''''-_

[storeman]

Heb je al naar mijn laatste fiddle gekeken? Volgens mij doet die wat jij wilt.

[Rekcor]

storeman schreef op vrijdag 08 februari 2013 @ 16:03:
Heb je al naar mijn laatste fiddle gekeken? Volgens mij doet die wat jij wilt.

Als ik de lijn horizontaal trek, wel, maar als ik hem schuin teken, zit de top teveel naar rechts. Evengoed bedankt!

Mijn gedachte nu:
- teken een (denkbeeldige) lijn tussen x1,y1 en x2,y2
- teken een (eveneens denkbeeldige) cirkel, met als middelpunt het midden van bovenstaande denkbeeldige lijn (x1 + (x2-x1)/2 ), (y1 + (y2-y1)/2); en als straal h
- de top van de curve bevindt zich op de cirkel

Puzzel: waar op de cirkel?

[Coocoocachoo]

Volgens mij komt

JavaScript:

"cx1": startX+(e.offsetX-startX)/2, "cy1": startY-h-(e.offsetY-startY)/2, // Coordinaten top curve

het dichtst in de buurt van wat je wilt, maar bij een hoger eindpunt is de kromming hol ipv bol. Dat zou echter te fixen moeten zijn door de eerste startY te veranderen in e.offsetY als die hoger is.

[Rekcor]

Bedankt!

Maar toch nog niet helemaal wat ik wil. Heb zelf wat met cosinus en sinus zitten prutsen, om het punt op mijn denkbeeldige cirkel te berekenen, maar vooralsnog zonder succes.

[storeman]

Nog even wat zitten klooien en even uitgetekend/gerekend, volgens mij doet dit wat je wilt:

http://jsfiddle.net/67U6m/3/

[Rekcor]

Super, bedankt! Ik zat zelf erg dicht bij de oplossing, zie ik nu.