javascript - 如何使用 Javascript 动态绘制网格框以捕捉到网格

Question

我正在开发带有对齐网格选项的拖动功能。我可以使用对齐网格选项进行拖动，但在如何在 html 中绘制网格系统方面遇到了困难。

我有一个下拉菜单，其中包含可用的捕捉到网格大小(例如 10*10,20*20,30*30)，然后在一个父容器 div 中，我放置了四个通过捕捉到网格进行拖动的框。我能够通过捕捉到网格大小来计算 XY 位置。但我想根据用户选择的网格大小值绘制一个网格框。

对于创建网格框，是否可以为父容器设置背景图像？或者我们需要创建一个额外的 html 元素吗？

HTML 代码:

<label style="margin-right:5px;">Snap To Grid : </label>
<select id="snapToGrid">
    <option value="10">10*10</option>
    <option value="20">20*20</option>
    <option value="30">30*30</option>
    <option value="40">40*40</option>
    <option value="50">50*50</option>
</select>

<div id="status">

</div>
<br />
<div id="parentContainer">
    <div id="container">
        <div class="box" style="left:0px;top:0px;">
            1stBox
        </div>
        <div class="box" style="left:104px;top:0px;">
            2ndBox
        </div>
        <div class="box" style="left:0px;top:104px;">
            3rdBox
        </div>
        <div class="box" style="left:104px;top:104px;">
            4thBox
        </div>
    </div>
</div>

Javascript代码

 $(document).ready(function () {

    var mousedown = false;
    var mouseStartXposition;
    var zoomContainer = $("#container");
    var $box;
    var snapToGridContainer = $("#snapToGrid");
    var snapToGridValue;
    $(".box").mousedown(function(event){
        mousedown = true;            
        $box = $(this);
        snapToGridValue = parseInt(snapToGridContainer.val());            
    });

    $("#parentContainer, .box").mouseup(function(){
        mousedown = false;
    });

    $("#parentContainer").mousemove(function(event){           
        if(mousedown){
            var clientX = event.clientX;
            var clientY = event.clientY;
            // Include Scroll Left and Top
            clientX = clientX + $("#container").scrollLeft();
            clientY = clientY + $("#container").scrollTop();

            clientX = clientX - zoomContainer.offset().left;
            clientY = clientY - zoomContainer.offset().top;

            var snapedX = clientX - (clientX % snapToGridValue);
            var snapedY = clientY - (clientY % snapToGridValue);

            //  apply to boxes
            $box.css({
                top:snapedY,
                left:snapedX
            })
        }
    });

});

我已附上 JSFiddle 链接。

JSFiddle Link

我想要像下面这样的网格框，上面应该有四个框。

Answer 1

您可以使用Linear gradient作为背景

更新

百分比计算基于简单的公式

将您的 div 视为 100%，现在将其分为 n 个部分(网格)，这将成为每个部分在原始 div 中占据的面积百分比，如果您想将其转换为像素可以将结果乘以 div 的实际宽度(如果我们谈论的是方形 div，则高度并不重要)(以像素为单位)

例如(假设仅方形网格)如果网格是 2X2 则 100/2 = 50%

假设容器为 500px 以像素为单位宽的 grid_width = 50/100*500 ; //250px

  var mousedown = false;
  var mouseStartXposition;
  var zoomContainer = $("#container");
  var $box;
  var snapToGridContainer = $("#snapToGrid");
  var snapToGridValue = 10; // made 10 grid (first option) as default
 
  //handle changing of grid class and snap value
  function initGrid() {
    $('#parentContainer').removeClass();
    $('#parentContainer').addClass('grid g-'+$('#snapToGrid').val());

    snapToGridCount = parseInt(snapToGridContainer.val()); // how many grids

    //calc. the percentage of space a single grid would occupy
    snapToGridPct = 100/snapToGridCount; //%
    //convert that into absolute pixels considering our container div size
    //ie. how much space in pixel a grid would occuppy
    snapToGridValue = (snapToGridPct/100) * 500; // 500 is width(and height) of #parentContainer

    //for decimal results
    snapToGridValue = parseInt((snapToGridValue))
  }

$(document).ready(function() {

  $('#snapToGrid').change(initGrid)

  $(".box").mousedown(function(event) {
    mousedown = true;
    $box = $(this);

    //UI feedback
    $box.css('cursor', 'pointer')
    $box.mouseup(function () {
      $(this).css('cursor', 'inherit');
    })
  });

  $("#parentContainer, .box").mouseup(function() {
    mousedown = false;
  });

  $("#parentContainer").mousemove(function(event) {
    if (mousedown) {
      var clientX = event.clientX;
      var clientY = event.clientY;

      // Include Scroll Left and Top
      clientX = clientX + $("#container").scrollLeft();
      clientY = clientY + $("#container").scrollTop();

      clientX = clientX - zoomContainer.offset().left;
      clientY = clientY - zoomContainer.offset().top;
 
      var snapedX = clientX - (clientX % snapToGridValue);
      var  snapedY = clientY - (clientY % snapToGridValue);

      $box.css({
        top: snapedY,
        left: snapedX
      })
    }
  });

  initGrid();//start on page load
});

#container {
  position: relative;
  transform-origin: top left;
  box-sizing: content-box;
}

#parentContainer {
  width: 500px;
  height: 500px;
  overflow: auto;
  box-sizing: content-box;
}

.box {
  width: 100px;
  height: 100px;
  position: absolute;
  border: 1px solid red;
  box-sizing: border-box; /* important otherwise we need to do math for the border calculation*/
}

.grid {
  width: 500px;
  height: 500px;
  box-sizing: border-box;
  border: none;
  background: 
   linear-gradient(0deg, #CCC 1px, rgba(0, 0, 0, 0) 1px),
   linear-gradient(90deg, #CCC 1px, rgba(0, 0, 0, 0) 1px), 
   linear-gradient(0deg, rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0) 1px), 
   linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0) 1px)
 
}

/* pixel % calculated as : 100 / number_of_grids; */

.g-10 {
  background-size: 10% 10%, 10% 10%, 10% 10%, 10% 10%;
}

.g-20 {
  background-size: 5% 5%, 5% 5%, 5% 5%, 5% 5%;
}

.g-30 {
  background-size: 3.3% 3.3%, 3.3% 3.3%, 3.3% 3.3%, 3.3% 3.3%;
}

.g-40 {
  background-size: 2.5% 2.5%, 2.5% 2.5%, 2.5% 2.5%, 2.5% 2.5%;
}

.g-50 {
  background-size: 2% 2%, 2% 2%, 2% 2%, 2% 2%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label style="margin-right:5px;">Snap To Grid : </label> <span id="lod"></span>
<select id="snapToGrid">
  <option value="10" selected>10*10</option>
  <option value="20">20*20</option>
  <option value="30">30*30</option>
  <option value="40">40*40</option>
  <option value="50">50*50</option>
</select>

<div id="parentContainer" class="grid g-10">
  <div id="container">
    <div class="box" style="left:0px;top:0px;"></div>
  </div>
</div>