javascript - 在javascript中使框边缘跟随鼠标指针

Question

我不明白为什么这不起作用。我这里有的是我自己用 DIV 制作的黑色 Canvas 。在该 Canvas 中，我希望用户定义我成功的第一个点，但是单击第一个点后，当鼠标移动时，该框必须正确调整大小并跟随鼠标，就像在绘画程序。这是我遇到困难的地方。

有没有一种方法可以解决这个问题，使其至少可以工作并且不使用 Jquery？如果我能够获得适用于 Internet Explorer 7(或至少 8)的解决方案，那就更好了。

<div ID="CANVAS" style="background:#000;width:600px;height:400px"></div>

<script>
var startx=-1,starty=-1,points=0,box;
var canvas=document.getElementById('CANVAS');
canvas.onclick=dopoint;
canvas.onmousemove=sizebox;

function dopoint(e){
  if (points==0){
    var area=canvas.getBoundingClientRect();
    box=document.createElement('DIV');
    box.style.position='relative';
    box.style.border='2px solid yellow';
    canvas.appendChild(box);
    startx=e.clientX-area.left;
    starty=e.clientY-area.top;
    box.style.left=startx+'px';
    box.style.top=starty+'px';
    box.style.width='10px';
    box.style.height='10px';
  }
  points=1-points;
}

function sizebox(e){
  if (points==1){
    var x=e.clientY,y=e.clientY; //here I'm thinking subtract old point from new point to get distance (for width and height)
    if (x>startx){
      box.style.left=startx+'px';
      box.style.width=(x-startx)+'px';
    }else{
      box.style.left=x+'px';
      box.style.width=(startx-x)+'px';
    }
    if (y>starty){
      box.style.top=starty+'px';
      box.style.height=(y-starty)+'px';
    }else{
      box.style.top=y+'px';
      box.style.height=(starty-y)+'px';
    }
  }
}

</script>

Answer 1

除了一些小问题之外，你的代码几乎很好。我已经更正了它，并在我更改的行上写了一些评论。

https://jsfiddle.net/1brz1gpL/3/

var startx=-1,starty=-1,points=0,box;
var canvas=document.getElementById('CANVAS');
canvas.onclick=dopoint;
canvas.onmousemove=sizebox;

function dopoint(e){
  if (points==0){
    var area=canvas.getBoundingClientRect();
    box=document.createElement('DIV');
    box.style.position='absolute'; // here was relative and changed to absolute

    box.style.border='2px solid yellow';
    canvas.appendChild(box);
    startx=e.clientX; // removed -area.left
    starty=e.clientY; // removed -area.right
    box.style.left=startx+'px';
    box.style.top=starty+'px';
    box.style.width='0px'; // updated to 0px instead of 10 so it won't "jump" after you move the mouse with less then 10px
    box.style.height='0px'; // same
  }
  points=1-points;
}

function sizebox(e){
  if (points==1){
    var x=e.clientX,y=e.clientY; // here was x = e.clientY and changed to x = clientX
    if (x>=startx){
      box.style.left=startx+'px';
      box.style.width=(x-startx)+'px'; // here it was x+startx and changed to x-startx
    }else{
      box.style.left=x+'px';
      box.style.width=(startx-x)+'px';
    }
    if (y>starty){
      box.style.top=starty+'px';
      box.style.height=(y-starty)+'px';
    }else{
      box.style.top=y+'px';
      box.style.height=(starty-y)+'px';
    }
  }
}