Permettre aux utilisateurs de dessiner une ligne (flèche) sur un div/img

Question

En utilisant le plugin jQuery: imgareaselect (http://odyniec.net/projects/imgareaselect/), je laisse les utilisateurs sélectionner des zones d'une image pour ajouter des commentaires (juste comme flickr). Je souhaite que les utilisateurs dessinent des flèches pointant sur des zones d'image spécifiques au lieu de tracer des zones.

Une idée si (et comment) je peux modifier imgareaselect pour dessiner des lignes (avec une tête de flèche) au lieu de boîtes de sélection? J'ai lu que je pourrais utiliser Canvas ou processing.js, mais je pense que ceux-ci ne fonctionnent pas ou ont des limitations sur Internet Explorer 2.

Merci, Yasser

Answer 1

Vous pouvez faire un ensemble d'images fléchées pour superposer, en utilisant CSS positionnement absolu, au-dessus de la photo. Par exemple, faites 18 flèches, chacune pivotée de la dernière de 360 ​​°/18 = 20 °. L'utilisation de la technique sprite CSS devrait vous permettre de varier la longueur de la flèche.

Dans la description qui suit, je me réfère à la début de la flèche la fin près de la zone de texte, et la fin comme l'endroit qui est pointé sur l'image.

Pour calculer le (sens horaire) Angle de flèche à utiliser étant donné une paire de coordonnées xy du pixel pointé et ceux de la zone de texte emplacement, nous utilisons:

var radians = Math.atan2(startY - endY, startX - endX), 
    degrees = radians * 180/Math.PI; 
if (degrees < 0) degrees += 360; 

Ensuite, votre script peut choisir le plus proche flèche préfabriqué:

var approxDegrees = Math.round(degrees/20) * 20; 

Lorsque la flèche est chargée, positionner son coin supérieur gauche (par rapport à la fin) selon:

var approxRadians = approxDegrees/180 * Math.PI, 
    imageX = arrowLength * Math.cos(approxRadians), 
    imageY = arrowLength * Math.sin(approxRadians); 

où l est la longueur de la flèche. Enfin, taillez la flèche:

var width = Math.abs(endX - startX); 
var height = Math.abs(endY - startY); 

et mettre le centre de la zone de texte sur le début de la flèche.

var textX = (startX + textWidth)/2; 
var textY = (startY + textHeight)/2;