Desenare sageata intre doua elemente html in javascript

[andras]

Salut,
Exista o posibilitate sa trasez o sageata din punctul A in punctul B pe o suprafata? Spre exemplu cu tasta CTRL apasata (sau alta tasta) dau click succesiv in A apoi in B iar aplicatia sa deseneze o sageata intre aceste puncte.
Imi trebuie pentru a ilustra pe o diagrama de sah (pentru incepatori) directiile de actiune a unei anumite piese (exemplu: un turn din a1 ameninta o piesa din a8).
Multumesc.

Salut
Pentru a desena ceva cu JavaScript se foloseste mai mult elementul Canvas. Dar daca ceea ce vrei e sa trasezi o sageata intre doua elemente (div-uri) html, cel mai indicat e cu SVG.
Vezi daca iti e de folos script-ul de la:
https://coursesweb.net/javascript/draw-a ... ml-element
- Cu el poti sa trasezi sageti intre coordonatele clicurilor intr-un element html.

Multumesc, functioneaza cu scriptul indicat de tine. O mica problema am, deseneaza doar linia rosie intre id-uri, nu pune si sageata la capatul liniei (marker-ul). Am cautat <svg class="arrsvg" ... (asa e in script) dar n-am gasit-o, poate de acolo e problema.

Nu stiu care e cauza, ar trebui sa functioneze la fel cum e in exemplu de pe pagina cu acel script.
Poate problema e de la un alt cod html /js din pagina. Daca se poate, da adresa paginii unde folosesti script-ul.

Salut,
Am revenit dupa ceva probleme (s-a defectat atit serverul developper cit si laptopul meu personal, am cumparat un laptop nou, acum totul e OK).
Aplicatia deseneaza doar linia rosie intre id-uri, nu pune si sageata la capatul liniei (marker-ul). Se poate vedea pe:
superbit.ro:1003/strategy/index.php -> Users -> login (admin) -> Courses (meniu) -> Courses (buton) -> Set new Position ->

In diagrama se pune un exemplu simplu, ex. rege alb pe e6, rege negru pe e8, turn alb pe a1 -> OK Position -> se face mutarea pentru alb (drag-drop) turn alb de la a1 la a8 mat -> Save diagram -> Enable drawing -> si se traseaza o linie de la a1 la a8 pe a doua diagrama.
Linia apare fara sageata. Cum pun sageata si cum salvez de aici in .jpg cele 2 diagrame (separat) dar sa cuprinda si sagetile trasate pe suprafata lor?
Multumesc.

In codul JavaScript din script-ul pentru desenare sageti cu svg, inlocuieste codul variabilei "var arrsvg" din functia drawArrow() cu acesta:

Cod: Selectaţi tot

var arrsvg = '<svg class="arrsvg" style="position:absolute; top:0; left:0; margin:0; width:99.8%; height:99.9%;"><defs><marker id="arrow" markerWidth="8" markerHeight="8" refx="3" refy="4" orient="auto"><path d="M1,1 L1,7 L7,4 L1,1" style="fill:red;" /></marker></defs><path d="M'+ c_e1.x +','+ c_e1.y +' L'+ c_e2.x +','+ c_e2.y +'" style="stroke:red; stroke-width: 2.3px; fill: none; marker-end: url('+ location.href.replace(/[#]*$/ig, '') +'#arrow);"/></svg>';

- Sau copii iar script-ul de la link-ul dat la primul raspuns.

Despre salvare acele diagrame cu sageti SVG in format jpg, nu cunosc alta metoda mai simpla decat screenshoot si copiere intr-un editor de imagini.

- Am vazut ca elementul unde vrei sa trasezi sagetile e un <canvas>. In cazul acesta poti folosi un script care sa deseneze sagetile direct in elementul <canvas>; asa vei putea salva direct acel Canvas ca imagne, folosind functia: canvas_elm.toDataURL().
- Ma gandesc sa fac un astfel de script sa-l pun pe site, ca cel cu SVG, sa deseneze sageata intre 2 click-uri in canvas si la clic pe un buton sa salveze ca imagine JPG /PNG. Poate in weekend, oricum va fi anuntat pe forum.

In varianta asta functioneaza foarte bine, pune sageata unde trebuie.
- Este excelenta ideea ta de a pune pe site un astfel de script, va avea multe aplicabilitati in special pentru cei care construiesc aplicatii cu elemente de grafica in canvas.

Vezi script-ul de la pagina:
https://coursesweb.net/javascript/draw-a ... cks-canvas
- deseneaza sageti marcatoare in element Canvas, intre coordonatele clic-ului. Are si optiune de a salva continutul din canvas intr-o imagine in format jpg.