Javascript tirage ligne dynamique

Je suis à la recherche pour le code Javascript permettant à l'utilisateur de tracer une ligne (sur l'image).

Tout comme l'outil de ligne de Photoshop (par exemple):

L'utilisateur clique sur l'image, fait glisser la souris (alors que la ligne entre le point de départ et le point de la souris est dessiné dynamiquement sur la souris, faites glisser).

J'aurais aussi besoin d'une fonction appelable à envoyer la page de début et de fin de coordonnées.

J'ai trouvé cela très agréable de script pour la sélection de la zone:
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

et j'ai trouvé beaucoup de script pour le dessin des lignes (et d'autres formes en JS), mais ne pouvait pas trouver ce que je cherche.

Grâce

OriginalL'auteur Ranch | 2010-03-24

  1. 17

    Car il n'existe pas de méthode standard de dessin, si vous voulez soutenir les anciens navigateurs et IE,
    vous aurez besoin d'utiliser une bibliothèque. La bibliothèque de la poignée de la croix-plate-forme de problèmes de dessin avec SVG ou de Microsoft VML

    Je recommande Raphael JS

    +1 un Autre à prendre en compte est Google Fermeture de la Bibliothèque: code.google.com/closure/library (voir la goog.graphics package).
    Eh bien, je suppose que Raphael JS serait-il. J'ai pris un coup d'oeil à son API et il semble grand. Aurait besoin pour mettre en oeuvre la ligne en faisant glisser mon auto, mais je pouvais m'occuper de ça... Merci
    pouvez-vous poster un exemple?

    OriginalL'auteur The Who

  2. 3

    raphael.js est une chaussure légère outil de rendu de javascript (sous licence MIT), qui travaille dans FF, Safari, Chrome et IE6+.

    Il utilise SVG pour les 3 premiers et VML pour IE mais l'API est identique sur tous les navigateurs et très doux.

    http://raphaeljs.com/

    par exemple 

    //Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

//Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
//Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

//Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

    Je l'ai utilisé pour dessiner une ligne tout en faisant glisser et peut se porter garant pour sa facilité d'utilisation

    OriginalL'auteur plodder

  3. 2

    Une solution de navigateur pour le dessin des lignes en javascript, sans avoir besoin de bibliothèques externes, peuvent être trouvés ici: http://bytes.com/topic/javascript/answers/88771-drawing-vector-lines-javascript

    Cela fonctionne dans tous les navigateurs, y compris IE.

    Je cherchais pur JS code et cela fonctionne à merveille dans IE9 et Firefox8 (Testé à la fois, d'autres navigateurs peuvent être également pris en charge). Lorsque vous copier le code, vous avez une certaine mise en forme de chaîne à faire et aussi changer la couleur de la ligne de #FFFFFF #FF0000 (cause le fond est blanc!).

    OriginalL'auteur Benubird

  4. 1

    Envisager l'utilisation de la canvas élément pour afficher l'image. Ensuite, tracer une ligne (ou autre chose), il est trivial.

    Notez que canvas est relativement moderne donc, seuls les navigateurs récents, et IE n'a pas encore aujourd'hui: en.wikipedia.org/wiki/Canvas_element#Support

    OriginalL'auteur Eli Bendersky

  5. 1

    Si votre calcul est assez bon, il est possible (bien que mad) à le faire sans la balise canvas, pour la plupart des navigateurs modernes à l'aide de l'un des (le cas échéant):

    En créant par exemple. un 1px de haut div, avec par exemple. un border-top pour votre "ligne", et à l'aide de la souris, faites glisser l'événement de la position et de la faire tourner.

    La folie se trouve de cette façon mais il serait assez amusant de l'exercice. (Vous devriez utiliser quelque chose comme Raphael JS, ce qui est de la croix-navigateur et sane - voir ci-dessus)

    OriginalL'auteur adamnfish

  6. 1

    je suis en train de travailler sur quelque chose de semblable. Tracer une ligne sur une toile est assez simple. Vous pouvez prendre à partir de mon code ici.

    http://p-func.com/html5_test/test2.html

    Il suffit de suivre les événements mousedown auditeur.

    Bien que j'ai trouvé, quand on veut charger des images, que le raphaël de la bibliothèque pourrait être le meilleur à utiliser. J'ai vu ce parce que la Toile semble agir comme une image plate. Donc, si je veux ajouter un aimge, puis permettre à l'utilisateur de manipuler l'image, il ne me laisse pas (sauf si il y a quelque chose qui me manque).

    Raphaël vous permet de dessiner et d'utiliser ces dessins, et des images, comme des objets.

    OriginalL'auteur pfunc

  7. 0

    Lorsque pris en charge vous pouvez utiliser de la toile, c'est à dire vous d'utiliser les filtres fonction de rotation. Comme ici fonctionne à la fois:

    http://www.gatekeeperel.co.uk/interactives/web.html

    OriginalL'auteur user1164035