J'ai une application Web où j'aimerais que l'utilisateur dessine une ligne de la manière suivante: quand il clique sur Comment puis-je le faire en utilisant jQuery et / ou l'un de ses plugins?
5 Réponses :
Vous pouvez le faire à l'aide de SVG (+ svgweb pour IE8- http: // code. google.com/p/svgweb/ )
SVG peut être créé de manière dynamique. JQuery + SVGWeb fonctionne parfaitement, il vous suffit de savoir comment créer des nœuds SVG et vous n'avez besoin que de jqueriser ce nœud. Après que Jquerifiing dans la plupart des cas n'a utilisé qu'une seule méthode Vous pouvez le faire en utilisant RAPHAEL http://raphaeljs.com/ (basé sur SVG et VML )
Vous pouvez le faire à l'aide de Canvas ( http://flashcanvas.net/ pour IE8-) < / p>
pour la programmation SVG sera de cette façon:
Moment de la création d'un premier point: vous créez une ligne vide Ensuite, vous liez sur sur Vous pouvez le faire avec CSS / JS, mais le problème principal est dans les calculs pour IE8-, qui n'a que le filtre matriciel pour les transformations. vous ne pouvez pas le faire avec jQuery et classique HTML.
attr ()
var ligne (aussi ces coordonnées des points seront x1 et y1 )
Mousemove repeindre de x2 , y2 propriétés de la ligne
MOUSEDOWN après MOUSEMOVE Vous gelez la dernière position de la ligne.
Déteste être ce gars, mais vous pourrait le faire avec seulement JS et HTML. Je ne suis tout simplement pas assez bon à la trigonométrie pour préparer une réponse rapide. Vous auriez besoin d'un élément avec une rotation CSS et une bordure unique.
Et combien de problèmes vous obtiendrez de filtres dans IE? Il n'a que le filtre matriciel pour les transformations, qui ont de nombreux problèmes avec des calculs.
En outre, ce ne sera pas la meilleure performance pour animer (je veux dire changement sur chaque mouseMove), c'est-à-dire le filtre
Il y a tout un tas de façons d'aborder ce problème et je pense que votre réponse est bonne alors je l'a suscité. Je ne suis tout simplement pas d'accord avec vous lorsque vous dites "Vous ne pouvez pas le faire avec jQuery et classique HTML".
défi accepté.
J'ai essayé de le faire avec des transformations CSS et un tas de mathématiques en JavaScript - après une demi-heure, j'ai ceci:
Faites 2 clics sur le carré gris et une ligne doit être dessinée. Il y a toujours un petit bug qui dessine la ligne qui ne va pas lorsque l'angle est> 45 degrés. Peut-être que quelqu'un d'autre sait comment résoudre ce problème. Peut-être au lieu d'utiliser Math.Asin (Arcsinus), utilisez une autre fonction trigonométrique, mais je ne suis vraiment pas bon à cela. Je pensais que je le posterais même s'il y a un petit bug, je pense que c'est un bon début pour vous.
Ne fonctionne pas si bien, mais c'est amusant! Et bien fait pour un bon essai!
Oh, grand homme! C'est vraiment bien et vous avez passé du temps à le faire. Cela m'a donné une idée
Utilisez une version modifiée de cela pendant un moment maintenant. Fonctionne bien.
http://www.ofdream.com/code/css/xline2 .php
Donc, en premier clic, déposez-vous et faites-y en tant que espace réservé, peut-être un petit cercle, puis continuez à redessiner une ligne pendant qu'ils déplacent leur souris ou tirez-la quand ils cliquent la deuxième fois, en utilisant l'espace réservé d'origine comme guide.
J'ai récemment fait une autre fonction d'assistante pour cela, car mon outil implique de déplacer des lignes autour de: c'est la version jQuery, et dans cette itération i N'intervenez aucune exigence IE, alors je l'ignore. Je pourrais être adapté de la fonction d'origine assez facilement.
J'ai essayé un certain nombre d'approches différentes ce week-end et la solution qui a fonctionné le mieux pour moi est d'Adam Sanderson: http://monkeyandcrow.com/blog/drawing_lines_with_css3/
Sa démo est ici: http://monkeytandcrow.com/samples/css_lines/
Le noyau de celui-ci est très simple, ce qui est toujours bon.
La classe usage: html < / p>
Utilisation de la toile HTML5, vous devriez pouvoir le faire avec juste un événement OnClick, mais je n'ai aucune expérience de toile moi-même. Toute JQuery fera pour vous est l'événement contraignant et obtenez la position de la souris.
Google est votre ami: Amaslo.com/2012 /06/Drawing-Diagonal-line-in-htmlcssjs-with.h tml