Question

我正在尝试通过单击画布上的两个点来绘制矩形。我需要获取第一个点的x，y坐标，使用strokeRect在第二个点击时绘制矩形。

这是我到目前为止所拥有的。

var rectangle = 0;

function plot_pt(event){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
if(rectangle==1){
  ctx.moveTo(clx, cly);
  clx = event.clientX-c.offsetLeft;
  cly = event.clientY-c.offsetTop;
if(rectangle != 0){
rectangle++;
} else {
ulx = event.clientX-c.offsetLeft;
uly = event.clientY-c.offsetTop;
ctx.beginPath();
ctx.moveTo(ulx, uly);
ctx.strokeRect(50, 50, 120, 140);
ctx.stroke();

Answer 1

您需要的第一件事就是获取点击的位置。您需要在top上找到left和click值。为此，您可以使用javascript或jquery。

这是代码。

$('.clickable').bind('click', function (ev) {
    var $div = $(ev.target);
    var $display = $div.find('.display');
    
    var offset = $div.offset();
    var x = ev.clientX - offset.left;
    var y = ev.clientY - offset.top;
    
    $display.text('x: ' + x + ', y: ' + y);
});

.clickable {
    border: 1px solid #333;
    background: #eee;
    height: 200px; width: 200px;
    margin: 15px;
    position: absolute;
}
.display {
    display: block;
    height: 16px;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    width: 100%;
    top: 50%; margin-top: -8px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='clickable'>
 <span class='display'></span>
</div>

现在，在获得坐标后，您可以轻松地在画布上绘制矩形。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.rect(x,y,width,height);
ctx.stroke();

Answer 2

这是你需要的。只需要妥善处理你的条件。

var rectangle = 0;

function plot_pt() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  if (rectangle == 0) {
    clx = event.clientX - c.offsetLeft;
    cly = event.clientY - c.offsetTop;
    ctx.moveTo(clx, cly);
    rectangle++;
  } else {
    ulx = event.clientX - c.offsetLeft;
    uly = event.clientY - c.offsetTop;
    ctx.beginPath();
    ctx.moveTo(ulx, uly);
    ctx.strokeRect(clx, cly, ulx - clx, uly - cly);
    ctx.stroke();
    rectangle = 0;
  }
}

canvas{
border:2px solid black;
}

<canvas id="myCanvas" height="400" width="400" onclick="plot_pt()"></canvas>

如果您需要将高度固定，只需将ctx.strokeRect(clx, cly, ulx - clx, uly - cly);更改为ctx.strokeRect(clx, cly, ulx - clx, 100);或您想要的高度，同样也可以更宽。希望它有所帮助。

Answer 3

像魅力一样工作。你想要的是什么：

＆＃13;

$(document).ready(function() {

  const canvas = document.getElementById('myCanvas');
  let ctx = canvas.getContext('2d');

  let firstClick = true;

  let firstX, firstY;
  $(canvas).click(function(e) {
    if (firstClick) {
      ({
        x: firstX,
        y: firstY
      } = getMousePos(canvas, e));

      $('#firstX').html(firstX);
      $('#firstY').html(firstY);

      firstClick = false;
    } else {
      let {
        x: secondX,
        y: secondY
      } = getMousePos(canvas, e);

      let width = secondX - firstX;
      let height = secondY - firstY;
      ctx.strokeRect(firstX, firstY, width, height);

      $('#secondX').html(secondX);
      $('#secondY').html(secondY);
      $('#width').html(width);
      $('#height').html(height);

      firstClick = true;
    }

  });

  function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left,
      y: evt.clientY - rect.top
    };
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
</canvas>
<p><span id="firstX"></span>, <span id="firstY"></span></p>
<p><span id="secondX"></span>, <span id="secondY"></span></p>
<p><span id="width"></span>, <span id="height"></span></p>

＆＃13;

通过单击画布上的两个点来绘制矩形

3 个答案: