javascript - 如何在一组坐标处绘制一个框

Question

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

Answer 1

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

https://jsfiddle.net/47nmp90w/

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);

};