Question

我无法弄清楚为什么这不起作用。我这里有的是我自己用DIV制作的黑色帆布。在那个画布中，我希望用户定义我成功的第一个点，但是在点击第一个点后，当鼠标移动时，框必须正确调整尺寸并按照鼠标移动，就像在一个矩形框中画一个矩形框一样。油漆程序。这是我遇到困难的地方。

有没有办法可以解决这个问题，使它最少运行而不使用Jquery？如果我能为Internet Explorer 7（或至少8个）获得解决方案，那就更好了。

Dining:

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';
    }
  }
}

在javascript中制作框边缘跟随鼠标指针

1 个答案: