Canvas 与 bootstrap 配合得不好

Question

您好，我对 Canvas 标签有疑问。 我正在使用 bootstrap，我想创建一个带有图像的画布，在用鼠标单击后我可以在其中绘制一个点，但是因为我使用的是 bootstrap，画布区域拉伸并且这些点不在我单击的同一个位置鼠标

$().ready(function() {
  showImage();

  $("#image").click(function(e) {
    getMousePositionAtClick(e);
  });


  function showImage() {
    var canvas = document.getElementById('image');
    var ctx = canvas.getContext('2d');

    var img = new Image();
    img.src = 'images/Piantina.jpg';
    img.onload = function() {

      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
    };
  }

  function getMousePositionAtClick(e) {
    var rect = image.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;

    alert(rect.left);
    alert(rect.top);
    drawPoint(x, y);
  }

  function drawPoint(x, y) {
    var ctx = document.getElementById("image").getContext("2d");
    ctx.fillStyle = "#000";
    ctx.beginPath();
    ctx.arc(x, y, 3, 0, Math.PI * 2, true);
    ctx.fill();
  }
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-8" id="columnCanvas">
  <div class="card card-body">
    <canvas id="image"></canvas>
  </div>
</div>

Answer 1

正如上面评论中提到的，Canvas 元素没有响应。 另一方面，Bootstrap 旨在响应式。 因此，要停止缩放，我们可以设置大小。 查看 Canvas 的规范，如果没有指定，默认大小是 300px / 150px。所以理论上，如果我们将 Canvas CSS 大小设置为 300px/150px，这也会阻止缩放，下面是一个例子。

$().ready(function() {
  showImage();

  $("#image").click(function(e) {
    getMousePositionAtClick(e);
  });


  function showImage() {
    var canvas = document.getElementById('image');
    var ctx = canvas.getContext('2d');

    var img = new Image();
    img.src = 'images/Piantina.jpg';
    img.onload = function() {

      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
    };
  }

  function getMousePositionAtClick(e) {
    var rect = image.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;

    alert(rect.left);
    alert(rect.top);
    drawPoint(x, y);
  }

  function drawPoint(x, y) {
    var ctx = document.getElementById("image").getContext("2d");
    ctx.fillStyle = "#000";
    ctx.beginPath();
    ctx.arc(x, y, 3, 0, Math.PI * 2, true);
    ctx.fill();
  }
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-8" id="columnCanvas">
  <div class="card card-body">
    <canvas id="image" style="width:300px;height:150px"></canvas>
  </div>
</div>

Answer 2

我正在使用 BS 5.3.3，我在尝试解决同一问题时遇到了这个主题。 我无法使该解决方案发挥作用，但经过大量摆弄 Chrome 的程序员工具后，我发现数据对象中的几个项目确实工作正常，因此我将其发布在这里，以防其他人出现这种情况。

在页面正文中，我用它来创建一个容器，然后是一行，然后是一个 10 宽的列，最后是与 W10 文件资源管理器报告的图像大小相匹配的画布；

    <div class="container">
        <div class="row">
            <h1>Gather game stats</h1>
        </div>
        <div class="row">
            <div class="col-10">
                <canvas id="courtCanvas" class="img-fluid" width="1440" height="887"></canvas>
            </div>
            <div class="col-2">

然后在同一页面的脚本部分，我创建一个 window.onload 函数，其中包括画布上图像的一些初始化以及每次按下鼠标时触发的事件侦听器；

        window.onload = function () {
            var canvas = document.getElementById('courtCanvas');
            var context = canvas.getContext('2d');
            var image = new Image();
            image.src = './images/bblCourt.png';
            image.onload = function() {
                context.drawImage(image, 0, 0);
            };
        
            canvas.addEventListener ('mousedown', function (e) {
                // Redraw the whole image (!) to erase the old dot
                context.drawImage(image, 0, 0);
                // Express the X & Y positions as a percentage of the canvas width
                // with the ogigin offsets removed
                xPercent = (e.clientX - e.srcElement.offsetLeft) / e.srcElement.clientWidth
                yPercent = (e.clientY - e.srcElement.offsetTop) / e.srcElement.clientHeight
                // Now scale by the current size of the canvas
                x = xPercent * e.srcElement.width;
                y = yPercent * e.srcElement.height;

                // Tell the rest of the program so the position can be sent to the back end
                document.getElementsByName('xPosition')[0].value = xPercent;
                document.getElementsByName('yPosition')[0].value = yPercent;

                // Plot that naughty dot on the screen
                context.beginPath ()
                context.arc (x, y, 2, 0, Math.PI * 2)
                context.fillStyle = "red";
                context.fill();
                context.lineWidth = 2;
                context.strokeStyle = "blue";
                context.stroke ()
            })    

里面有一行代码会让你哭泣，但除此之外，它运行良好。 请注意，我将 X 和 Y 位置称为“百分比”，但实际上它们是 0 -> 1。

戴夫