Question

我想要一个在坐标x和y中绘制一个框的函数。我找不到比我想要的更多/更少回答的指南。提前谢谢。

Answer 1

我前段时间写过这个脚本，所以可能有办法更新它，但想法是将光标的位置放在上面并附加一个onmousemove监听器。每次移动鼠标时，都会根据位置调整盒子的大小。然后在mouseup上删除onmousemove监听器。

dragBox = (function() {

  var _curX;
  var _curY;
  var _workingEl;
  var _docEl = document.documentElement;

  if (_docEl.scrollTop === 0) {
    var testDocEl = _docEl.scrollTop;
    _docEl.scrollTop++;
    _docEl = testDocEl+1 === _docEl.scrollTop-- ? _docEl : document.body;
  }

  return {

    drag: function(e) {
      var evt = e ? e : window.event;
      _width = Math.abs(_curX - evt.clientX);
      _height = Math.abs(_curY - evt.clientY);
      if (evt.shiftKey) {
        var minDimension = Math.min(_width, _height) + 'px';
        _workingEl.style.width = minDimension;
        _workingEl.style.height = minDimension;
      } else {
        _workingEl.style.width = _width + 'px';
        _workingEl.style.height = _height + 'px';
      }
      _workingEl.style.left = Math.min(_curX, evt.clientX) + _docEl.scrollLeft + 'px';
      _workingEl.style.top = Math.min(_curY, evt.clientY) + _docEl.scrollTop + 'px';
    },

    draw: function(e) {
      var evt = e ? e : window.event;
      if (evt.which === 1) {
        _curX = evt.clientX;
        _curY = evt.clientY;
        _workingEl = document.createElement('div');
        _workingEl.className = 'drawing';
        document.body.appendChild(_workingEl);
        window.onmousemove = dragBox.drag;
        window.onmouseup = function() {
          window.onmousemove = null;
          _workingEl.className = 'done';
          _workingEl = false;
        }
      }
    }

  };

})();
window.onmousedown = dragBox.draw;

修改

以下是如何使用设置数据创建框。您只需设置高度和宽度样式，然后给它一个等于x坐标的左侧位置和y坐标的顶部位置。

https://jsfiddle.net/RDay/47nmp90w/4/

var createButton = document.getElementById('create');
var xPosInput = document.getElementById('x-pos');
var yPosInput = document.getElementById('y-pos');
var widthInput = document.getElementById('width');
var heightInput = document.getElementById('height');
var target = document.getElementById('target');

createButton.onclick = function() {
  var xPos = xPosInput.value;
  var yPos = yPosInput.value;
  var width = widthInput.value;
  var height = heightInput.value;

  var box = document.createElement('div');
  box.className = 'box';
  box.style.left = xPos + 'px';
  box.style.top = yPos + 'px';
  box.style.width = width + 'px';
  box.style.height = height + 'px';
  box.style.left = xPos + 'px';

  target.appendChild(box);

};

如何在设定的协调下绘制一个方框

1 个答案:

修改