Javascript dessine une ligne dynamique

Question

Je cherche du code Javascript pour laisser l'utilisateur tracer une ligne (sur une image).

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

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

Je voudrais également une fonction appelable pour envoyer à la page les coordonnées de début et de fin.

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

et je l'ai trouvé beaucoup de script pour tracer des lignes (et d'autres formes de JS), mais n'a pas pu trouver ce que je cherche .

Merci

Answer 1

Comme il n'y a pas de méthode standard de dessin, si vous voulez prendre en charge les anciens navigateurs et IE, vous aurez besoin d'utiliser une bibliothèque. La bibliothèque traitera les questions multiplateformes de dessin avec SVG ou Microsoft VML

Je recommande Raphael JS

Answer 2

Pensez à utiliser l'élément canvas pour afficher l'image. Ensuite, dessiner une ligne (ou toute autre chose) est trivial.

Answer 3

Si vos comptes est assez bon, il est possible (bien fou) de le faire sans l'étiquette de toile pour le plus moderne navigateurs utilisant l'un de (le cas échéant):

• -webkit-transform: rotate
• -moz-transform: rotate
• -o-transform-rotate
• The Trident Matrix Filter

En créant par exemple. une div 1px haute, avec par exemple. un bord supérieur pour votre 'ligne', et en utilisant la souris faites glisser l'événement pour le positionner et le faire pivoter.

La folie se situe de cette façon mais ce serait un exercice assez amusant. (Vous devriez utiliser quelque chose comme Raphael JS, qui est cross browser et sain - voir ci-dessus)

Answer 4

raphael.js est un outil de rendu léger pour javascript (sous licence MIT) qui fonctionne dans FF, Safari, Chrome et IE6 +.

Il utilise SVG pour les 3 premiers et VML pour IE mais l'API est identique à travers les navigateurs et très douce.

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 tracer une ligne tout en faisant glisser et peut se porter garant pour sa facilité d'utilisation

Answer 5

je travaille sur quelque chose de similaire. Dessiner une ligne sur une toile est assez simple. Vous pouvez prendre de mon code ici.

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

l'auditeur se contentent de suivre mousedown.

Bien que j'ai trouvé, lorsque je veux charger des images, que la bibliothèque raphael pourrait être préférable d'utiliser. J'ai vu cela parce que Canvas semble agir comme une image plate. Donc, si je veux y ajouter un objet, permettez à l'utilisateur de manipuler cette image, il ne me laissera pas (à moins qu'il y ait quelque chose qui me manque). Raphael vous permet de dessiner et d'utiliser encore ces dessins et ces images en tant qu'objets.

Answer 6

Une solution multi-navigateur pour tracer des lignes en javascript, sans nécessiter de bibliothèques externes, se trouvent ici: http://bytes.com/topic/javascript/answers/88771-drawing-vector-lines-javascript

Cela fonctionne dans tous les navigateurs, y compris IE.

Answer 7

Une fois pris en charge, vous pouvez utiliser la toile, dans IE vous utilisez la fonction de rotation des filtres. Comme travaille ici sur les deux:

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