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.
Desenare sageata intre doua elemente html in javascript
-
- Mesaje: 430
Desenare sageata intre doua elemente html in javascript
MarPlo
Mesaje: 4343
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.
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.
andras
Mesaje: 430
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.
MarPlo
Mesaje: 4343
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.
Poate problema e de la un alt cod html /js din pagina. Daca se poate, da adresa paginii unde folosesti script-ul.
andras
Mesaje: 430
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.
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.
MarPlo
Mesaje: 4343
In codul JavaScript din script-ul pentru desenare sageti cu svg, inlocuieste codul variabilei "var arrsvg" din functia drawArrow() cu acesta:
- 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.
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>';
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.
andras
Mesaje: 430
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.
- 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.
MarPlo
Mesaje: 4343
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.
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.
Subiecte similare
-
Produsul Dot a doua array in Javascript
JavaScript - jQuery - Ajax
Primul mesaj
Cum se poate implementa eficient o metoda dotProduct (pentru a obține produsul Dot din două array) fără a importa alte biblioteci Javascript?Ultimul mesaj
De...
Iată o metodă.
Se foloseste funcția map() pentru a crea un nou array cu rezultate înmulțite ale fiecărui index, apoi se aplica funcția reduce()... -
Partajare funcții între componente Vue.js
JavaScript - jQuery - Ajax
Primul mesaj
În aplicația am o mulțime de funcții utilitatere care fac diferite lucruri, de la analiza șirurilor până la realizarea toastelor și așa mai departe....Ultimul mesaj
Pentru asta poți utiliza Mixins.
1. Importa componenta de care ai nevoie.
2. adăuga un mixin array ca mai jos în componenta ta, chiar deasupra... -
Animație cu pauză între fiecare rotație
HTML - XHTML - CSS
Primul mesaj
Am un Div pe care vreau să-l rotesc de la 0 la 90 grade, pauză 2s, apoi de la 90 la 180, iar pauză 2s .., tot asa până la 360 de grade.Ultimul mesaj
Vreo idee...
Puteți face cu animații CSS transform: rotate() , ca în exemplu de mai jos.
Setezi timpul de rotatie la 12 secunde si incepi cele 4 rotatii... -
Valoarea id-ului din HTML atribuită unei variabile php
PHP - MySQL - XML
Primul mesaj
Încerc să extrag valorile id= min5 , id= max5 si să le pun în $_GET $_GET fara trimitere în altă paginăUltimul mesaj
cum aș putea proceda?
<div class=...
Nu prea inteleg ce vrei sa faci.
Codul php se executa pe server inainte de a fi pagina cu codul html si javascript.
In php, valorile pentru... -
Lungime obiect JSON in JavaScript
JavaScript - jQuery - Ajax
Primul mesaj
Am convertit un tabel din baze de date într-un obiect JSON.Ultimul mesaj
Aceasta este, în esență, un array bidimensional, fiecare înregistrare fiind pe cate un...
Poti sa folosesti Object.keys pentru a obține lista de chei din obiect ca un array, apoi obții cu 'length' lungimea din el:... -
Problemă cu 'this' în function.call() în JavaScript
JavaScript - jQuery - Ajax
Primul mesaj
De ce function.call() se comportă diferit cu ' this ' cand nu e adaugat ca argument, în JavaScript?Ultimul mesaj
Rezultatul cu 'this' în test.call() este același...
Functia call() necesita primul argument, care e pentru obiectul 'this', daca nu ai nevoie de el, adauga null .
test.call(null, ...args);
In...