Question

我想在用户输入行号和列号后在图像上添加网格线。但我对html JS CSS来说太新了。

例如：

<img src="web-image/preview.jpg">
<input type="number" name="row">
<input type="number" name="column">

如果用户输入row = 2和column = 3。中间将有一条水平线，横跨三分之一的两条线和三分之一的＃34; preview.jpg＆＃34;。网格只需要绘图，我不需要划分图像分成部分或使它们可点击。

Answer 1

您可以从Jquery .on()开始并使用append()，查看此快速代码：

＆＃13;

$('button').on('click', function() {
  $('.grid table').html('');
  var rows = $('input[name="row"]').val(),
    cols = $('input[name="column"]').val();
  for (i = 0; i < rows; i++) {
    $('.grid table').append('<tr></tr>')
  }
  for (t = 0; t < cols; t++) {
    $('.grid table tr').each(function() {
      $(this).append('<td></td>')
    })
  }
})

＆＃13;

.grid {
  position: relative;
  display: inline-block;
  height:300px;
}
.grid table {
  border-collapse: collapse;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.grid table td {
  border:1px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
  <table></table>
  <img src="http://lorempixel.com/300/300">
</div>
<br>
<input type="number" name="row">
<input type="number" name="column">
<button>Create Grid</button>

＆＃13;

Answer 2

在您的JS中，您可以使用模糊或键盘来检测用户何时完成该字段。我不确定你在网格线方面究竟需要什么，但这只是增加了水平条纹。你可以用你需要的任何东西替换

。

$('input[name="row"]').blur(function(){
   if($(this).val() == 2){
     //add your bars
     $('body').append('<hr><hr>');
   }
});

Answer 3

我确信有更好的方法可以做到这一点，但这应该很容易理解。这很有趣！

// Reference used elements
var wrapper = document.getElementById('wrapper');
var btn = document.getElementById('update');
var rows = document.getElementById('rows');
var cols = document.getElementById('cols');

btn.addEventListener("click", drawLines);

function drawLines() {
  // Clean up
  removeLines();

  var rowCount = rows.value;
  var colCount = cols.value;
  var wrapperHeight = wrapper.clientHeight;

  // Create rows
  for (var i = 1; i < rowCount; i++) {
    var line = document.createElement('div');
    line.className = 'line row';
    line.style.top = (wrapperHeight / rowCount) * i + 'px';

    wrapper.appendChild(line);
  }

  // Create columns
  for (var i = 1; i < colCount; i++) {
    var line = document.createElement('div');
    line.className = 'line column';
    line.style.left = (wrapperHeight / colCount) * i + 'px';

    wrapper.appendChild(line);
  }
}

function removeLines() {
  var lines = document.getElementsByClassName('line');
  while (lines.length > 0) {
    lines[0].parentNode.removeChild(lines[0]);
  }
}

#wrapper {
  width: 300px;
  height: 300px;
  position: relative;
}
.line {
  background: white;
  position: absolute;
}
.row {
  height: 1px;
  left: 0;
  right: 0;
}
.column {
  width: 1px;
  top: 0;
  bottom: 0;
}

<div id="wrapper">
  <img id="img" src="http://placehold.it/300x300">
</div>

<input id="rows" type="number" name="row" placeholder="Rows">
<input id="cols" type="number" name="column" placeholder="Columns">
<button id="update">Update</button>

在图像上创建具有用户输入大小的网格

3 个答案: