Dessiner un rectangle avec un clic de souris et faire glisser – javascript

J'essayais de dessiner un rectangle (en fait une boîte de sélection) en Javascript, pour sélectionner les éléments SVG qui entrent dans la sélection. J'ai essayé de corriger le code pour le clic et de glisser le rectangle: http://jsfiddle.net/7uNfW/26/ mais il y a un problème que je ne peux pas comprendre dans la function handleMouseDown(e) et function handleMouseUp(e)

De plus, j'ai besoin d'avoir des idées sur la façon de choisir les éléments SVG dans la boîte.

Toute aide serait appréciée.

En ce qui concerne la création d'un rectangle Clink 'N Drag, j'ai réécrit le code pour devenir ceci . Il semble que ça fonctionne très bien.

Maintenant, pour la partie SVG, je ne suis pas sûr de la façon dont vous allez incorporer SVG dans une toile. Jetez un oeil à cette bibliothèque à la place: http://fabricjs.com/

Pour la tâche de détecter si votre boîte de sélection couvre un SVG, je peux vous donner les suggestions suivantes:

  • Rangez startX, startY, stopX, stopY lorsque la souris relâche.
  • Bouclez tous les fichiers SVG
  • Vérifiez s'il y a un chevauchement, peut-être comme suit:

.

 if ((svg.startY+svg.height) < startY) { return false; // svg too high } else if (svg.y > stopY) { return false; // svg too low } else if ((svg.x + svg.width) < startX) { return false; // svg too far left } else if (svg.x > stopX) { return false; // svg too far right } else { // Overlap return true; } 

Dans votre violon, vous vous mouseUp à mouseUp . La méthode jQuery est appelée mouseup . Cela représente une erreur dans la console.

En outre, vous essayez de mettre à jour le html d'un élément qui n'est pas dans DOM, #downlog .

Voici un violon qui montre quelque chose qui se passe maintenant: http://jsfiddle.net/7uNfW/33/

J'ai fait un travail similaire dans mon application basée sur le Web, où l'utilisateur peut créer plusieurs éléments Svg, puis les sélectionner à l'aide de la boîte de sélection. Maintenant À propos de la sélection de l'élément svg dans la boîte de sélection, j'ai utilisé 'Webworkers' pour des calculs mathématiques complexes. Vous trouverez ci-dessous l'algorithme de base pour vérifier si un élément svg est à l'intérieur de Selection rect ou non: –

1) Créez d'abord un Webwroker et passez la liste des éléments entiers créés sur votre toile.

2) Cette liste inclut la bbox de chaque élément

3) comparez maintenant chaque bbox élément avec votre Rect. Vérifiez la fonction ci-dessous:

 isInsideSelectionBox = function(selectionBox){ var inside = false; if(element.bbox.p1.x >= selectionBox.p1.x && element.bbox.p1.x <= selectionBox.p3.x && element.bbox.p1.y >= selectionBox.p1.y && element.bbox.p1.y <= selectionBox.p3.y){ inside = true; }else if(element.bbox.p2.x >= selectionBox.p1.x && element.bbox.p2.x <= selectionBox.p3.x && element.bbox.p2.y >= selectionBox.p1.y && element.bbox.p2.y <= selectionBox.p3.y){ inside = true; }else if(element.bbox.p3.x >= selectionBox.p1.x && element.bbox.p3.x <= selectionBox.p3.x && element.bbox.p3.y >= selectionBox.p1.y && element.bbox.p3.y <= selectionBox.p3.y){ inside = true; }else if(element.bbox.p4.x >= selectionBox.p1.x && element.bbox.p4.x <= selectionBox.p3.x && element.bbox.p4.y >= selectionBox.p1.y && element.bbox.p4.y <= selectionBox.p3.y){ inside = true; } return inside; }; 

Cela vous aidera. Vous devez appeler cette fonction sur l'événement mousemove du rectangle de sélection.

  • Si votre application est petite, traitant de 1 à 30 éléments, vous n'avez pas besoin de Webworkers