Le dessin d'un rectangle à l'aide de clic, déplacement de la souris, et cliquez sur

Je suis en train de dessiner un rectangle par un clic de l'utilisateur, déplacement de la souris, et cliquez sur. Il y a deux problèmes avec mon code.

Tout d'abord, après un rectangle est dessiné, il est automatiquement supposer qu'un autre sera établi. Deuxièmement, le point de départ sur la deuxième rectangle est le dernier clic qui a créé le premier rectangle.

http://jsbin.com/uqonuw/3/edit

  • Pouvez-vous bande démo des parties impliquant le dessin problème? Je ne suis pas du tout convaincu que nous avons besoin les pièces, y compris spin, ou l'analyse de la document.location.
  • Votre 2 problèmes sont les mêmes, d'où je le vois. Je pense que vous pourriez envisager d'utiliser un test simple pour voir si c'est le "premier" ou cliquez sur le "deuxième"
InformationsquelleAutor | 2013-07-01
  1. 34

    Proximité. Donc, la question n'est pas vraiment à propos de la "toile" élément HTML5, une toile, mais c'est vraiment un div.

    http://jsfiddle.net/d9BPz/546/

    Dans l'ordre pour moi de voir ce que votre code a été d'essayer d'accomplir, j'ai eu de la ranger. Ce qui devait arriver était de suivi de la place de l'élément.

    Nous faisons deux choses, à chaque fois que l'on clique sur la toile. Nous sommes la création d'un élément rectangle, ou la finition d'un élément rectangle. Donc, quand nous avons fini, il fait sens pour définir "élément" (précédemment nommé "d") à la valeur null. Lors de la création d'un élément, il est nécessaire d'affecter le nouvel élément DOM "élément".

    Chaque fois que la souris bouge, nous voulons obtenir la position de la souris. Si l'élément est dans le processus de la création (ou "not null"), alors nous avons besoin pour redimensionner l'élément.

    Puis nous envelopper le tout dans une fonction, et c'est tout là est à lui:

    function initDraw(canvas) {
var mouse = {
x: 0,
y: 0,
startX: 0,
startY: 0
};
function setMousePosition(e) {
var ev = e || window.event; //Moz || IE
if (ev.pageX) { //Moz
mouse.x = ev.pageX + window.pageXOffset;
mouse.y = ev.pageY + window.pageYOffset;
} else if (ev.clientX) { //IE
mouse.x = ev.clientX + document.body.scrollLeft;
mouse.y = ev.clientY + document.body.scrollTop;
}
};
var element = null;    
canvas.onmousemove = function (e) {
setMousePosition(e);
if (element !== null) {
element.style.width = Math.abs(mouse.x - mouse.startX) + 'px';
element.style.height = Math.abs(mouse.y - mouse.startY) + 'px';
element.style.left = (mouse.x - mouse.startX < 0) ? mouse.x + 'px' : mouse.startX + 'px';
element.style.top = (mouse.y - mouse.startY < 0) ? mouse.y + 'px' : mouse.startY + 'px';
}
}
canvas.onclick = function (e) {
if (element !== null) {
element = null;
canvas.style.cursor = "default";
console.log("finsihed.");
} else {
console.log("begun.");
mouse.startX = mouse.x;
mouse.startY = mouse.y;
element = document.createElement('div');
element.className = 'rectangle'
element.style.left = mouse.x + 'px';
element.style.top = mouse.y + 'px';
canvas.appendChild(element)
canvas.style.cursor = "crosshair";
}
}
}

    Utilisation: Passer le niveau du bloc de l'élément que vous souhaitez faire un rectangle de toile.
    Exemple:

    <!doctype html>
<html>
<head>
<style>
#canvas {
width:2000px;
height:2000px;
border: 10px solid transparent;
}
.rectangle {
border: 1px solid #FF0000;
position: absolute;
}
</style>
</head>
<body>
<div id="canvas"></div>
<script src="js/initDraw.js"></script>
<script>
initDraw(document.getElementById('canvas'));
</script>
</body>
</html>
    • Cette solution se brise lorsque la fenêtre défile. Les rectangles ne sera pas placé dans la position correcte, puis.
    • Confirmé dans firefox - essayez de cliquer, de défilement, puis en déplaçant la souris.
    • Pourquoi est la toile d'une plaine <div> élément au lieu de <canvas>, et est-il un moyen de modifier le JS à utiliser ce dernier?
    InformationsquelleAutor Spencer Lockhart
  2. 12

    Voici comment cliquer-déplacer-cliquer pour créer un rectangle

    Créer ces variables:

    var isDrawing=false;
var startX;
var startY;

    Dans votre gestionnaire d'événement mousedown:

    • Si ce n'est que le début de clic, de définir la isDrawing le drapeau et l'ensemble de la commande startX/Y.
    • Si c'est la fin cliquez sur, désactivez la isDrawing flage et dessiner le rectangle.

    Vous pouvez également modifier le curseur de la souris de sorte que l'utilisateur sait qu'ils sont le dessin.

    if(isDrawing){
isDrawing=false;
ctx.beginPath();
ctx.rect(startX,startY,mouseX-startX,mouseY-startY);
ctx.fill();
canvas.style.cursor="default";
}else{
isDrawing=true;
startX=mouseX;
startY=mouseY;
canvas.style.cursor="crosshair";
}

    Ici est un Violon: http://jsfiddle.net/m1erickson/7uNfW/

    Au lieu de cliquer-déplacer-cliquer, et en utilisant le glisser pour créer un rectangle?

    Créer ces variables:

    var mouseIsDown=false;
var startX;
var startY;

    Dans votre gestionnaire d'événement mousedown, définir la mouseIsDown le drapeau et l'ensemble de la commande startX/Y.

    Vous pouvez éventuellement modifier le curseur de manière à ce que l'utilisateur sait leur glisser un rectangle.

          mouseIsDown=true;
startX=mouseX;
startY=mouseY;
canvas.style.cursor="crosshair";

    Dans votre gestionnaire d'événement mouseup, désactivez la mouseIsDown drapeau et dessiner le rectangle

    Si vous avez changé le curseur, le changer en arrière.

          mouseIsDown=false;
ctx.beginPath();
ctx.rect(startX,startY,mouseX-startX,mouseY-startY);
ctx.fill();
canvas.style.cursor="default";
    InformationsquelleAutor markE
  3. 2

    Pour ceux qui ont rencontré le problème de défilement, j'ai trouvé une solution.


    Vous avez besoin pour obtenir le décalage (à l'aide de la fenêtre.pageYOffset) et de le réduire à partir de la position de la souris dans tous les recommandés, des extraits de donnée. Vous devriez prendre le large à partir de la taille ainsi.

    InformationsquelleAutor Barazu