javascript - 如何在没有canvas的情况下在html中手动绘制矩形？

Question

What I mean is understood better in this photo

在给定的照片中，我使用 Canvas 进行绘图；但是，我想通过另一种方式来做到这一点，因为我希望创建的矩形是可拖动的，并为创建的矩形提供 id。例如，如果我使用 div 而不是 canvas，我无法像照片中那样手动绘制矩形。也许，有办法，但我不知道。当我搜索这个主题时，大多数人都使用 paper.js 等，但它只是在调整大小或拖放时有用；因此，我不想使用这些。

function lettersOnly(input) {
  var regex = /[^a-z]/gi;
  input.value = input.value.replace(regex, "");
}

jQuery(document).ready(function($) {

  //Canvas
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');

  //Variables
  var canvasOffset = $("#canvas").offset();
  var canvasx = canvasOffset.left;
  var canvasy = canvasOffset.top;
  var last_mousex = 0;
  var last_mousey = 0;
  var mousex = 0;
  var mousey = 0;
  var mousedown = false;
  var shapes = [];
  var width;
  var height;
  // make var col a global variable
  var col = "black";
  var ad = "";

  //Mousedown
  $(canvas).on('mousedown', function(e) {
    last_mousex = parseInt(e.clientX - canvasx);
    last_mousey = parseInt(e.clientY - canvasy);
    mousedown = true;
  });

  //Mouseup
  $(canvas).on('mouseup', function(e) {
    const lastPos = {
      lastMouseX: last_mousex,
      lastMouseY: last_mousey,
      rectWidth: width,
      rectHeight: height,
      // save the color of the rect
      color: col,
      name: ad
    };
    shapes.push(lastPos);
    mousedown = false;
  });

  //Mousemove
  $(canvas).on('mousemove', function(e) {
    mousex = parseInt(e.clientX - canvasx);
    mousey = parseInt(e.clientY - canvasy);

    if (mousedown) {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      width = mousex - last_mousex;
      height = mousey - last_mousey;
      col = $("#color").val();
      ad = $("#name").val();
      if (shapes.length > 0) {
        for (var i in shapes) {
          // for every shape in the shapes array beginPath
          ctx.beginPath();
          //set the color of the stroke
          ctx.strokeStyle = shapes[i].color;
          //draw the rect
          ctx.rect(shapes[i].lastMouseX, shapes[i].lastMouseY, shapes[i].rectWidth, shapes[i].rectHeight);
          ctx.fillText(shapes[i].name, shapes[i].rectWidth - shapes[i].lastMouseX, shapes[i].rectHeight - shapes[i].lastMouseY);
          ctx.stroke();

        }
      }
      //for the new rect beginPath
      ctx.beginPath();
      ctx.rect(last_mousex, last_mousey, width, height);
      ctx.strokeStyle = col;
      ctx.lineWidth = 3;
      ctx.fillText(ad, 100, 100);
      ctx.stroke();

    }
    $('#output').html('Current Coordinate: ' + mousex + ', ' + mousey + '<br/>Last Coordinate: ' + last_mousex + ', ' + last_mousey);

  });
});

.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 14px;
}


/* Change the color of links on hover */

.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */

.topnav a.active {
  background-color: #4CAF50;
  color: white;
}

#color {
  border: 1px solid black;
  font-family: 'Times New Roman', Times, serif;
  font-size: 14px;
  margin: auto;
  padding: 0;
  position: absolute;
  top: 0;
  left: 45%;
  right: 0;
  text-align: center;
}

#name {
  border: 1px solid black;
  font-family: 'Times New Roman', Times, serif;
  font-size: 14px;
  margin: auto;
  padding: 0;
  position: absolute;
  top: 0;
  left: 45%;
  right: 0;
  text-align: center;
}

.submit {
  border: 1px solid black;
  margin: auto;
  padding: 0;
  width: 70px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-family: 'Times New Roman', Times, serif;
  font-size: 14px;
  text-align: center;
}

#canvas {
  cursor: crosshair;
  background-image: url("kroki2v3.png");
  background-repeat: no-repeat;
  background-size: contain;
  padding: 0;
  margin-left: 210;
  margin-top: 160;
  position: static;
  display: block;
}

#output {
  font-family: 'Times New Roman', Times, serif;
  font-size: 14px;
  top: 19%;
  left: 46%;
  position: absolute;
}

<html>

<head>
  <meta charset="utf-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <div>
    <table>
      <tr>
        <td><input type="text" id="color" style="margin-top: 70px" placeholder="Color" onkeyup="lettersOnly(this)" /></td>
        <td><input type="text" id="name" style="margin-top: 100px;" placeholder="Department Name" onkeyup="lettersOnly(this)" /></td>
        <td><input type="submit" class="submit" value="Submit" style="margin-top: 130px;" /></td>
      </tr>
    </table>
  </div>
  <div class="topnav">
    <a class="active" href="">Project</a>
    <a href="https://pavotek.com.tr/iletisim/">Contact</a>
    <a href="https://pavotek.com.tr/biz_kimiz/">About</a>
  </div>

  <div id="container" style="display: none;"><img src="kroki2v3.png" id="img01" alt="" style="display: none;"></div>
  <canvas id="canvas" width="1200" height="520"></canvas>
  <div id="output"></div>

</body>

</html>

Answer 1

有这样的事吗？当你说“画”时，这就是我想象的。

您需要在 mousedown 函数和 mousemove 函数中找到鼠标位置，然后从 mousemove x 和 y 位置中减去 mousedown x 和 y 位置即可设置宽度和高度。

您还需要设置一个变量来判断移动鼠标时鼠标是否实际按下，以确保 div 不会在不知情的情况下“绘制”。

“鼠标松开”后，您可以设置要使用的可拖动/可调整大小的功能。

这是一个fiddle ;

$(function() {
  var widget;
  var x;
  var y;
  var finX;
  var finY;
  var ismousedown = false;
  $(document).on({
    mousedown: function(event) {
      if ($(event.target).attr('class') == 'wrapper') {
        x = event.pageX;
        y = event.pageY;
        $('body').append('<div class="widget" style="top:' + y + 'px; left: ' + x + 'px;"></div>');
        widget = $('.widget').last();
        ismousedown = true;
      }
    },
    mousemove: function(event) {
      if (ismousedown == true) {
        finX = event.pageX;
        finY = event.pageY;
        widget.width(finX - x);
        widget.height(finY - y);
        widget.css({
          'width': (finX - x) + '!important',
          'height': (finY - y) + '!important',
          'display': 'block',
          'border': '2px dashed #ccc'
        });
      }
    },
    mouseup: function(event) {
      ismousedown = false;
      widget.css({
        'background': '#222',
        'border': '0',
        'cursor': 'move'
      });
      initDraggable();
    }

  });

  // in case you need to reinitialize later.
  function initDraggable() {
    $('.widget').draggable({});
  }
});

html,
body {
  height: 100% !important;
  position: relative;
}

.wrapper {
  position: relative;
  height: 100% !important;
  width: 100% !important;
}

.widget {
  display: block;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper">

</div>