时间戳

首页 > 解决方案 > 为什么画布没有出现在引导表上？

javascript - 为什么画布没有出现在引导表上？

问题描述

我有一个 Bootstrap 表，作为表数据，我需要放置一个可写的 Canvas。但是当我放置画布时，它出现了，但写作内容没有正确显示或根本没有出现。当我将画布从桌子上移开并将其放在容器或主体上时，它可以工作。代码可以在下面找到。这是什么原因，我该如何解决？提前致谢。

$(document).ready(function() {
    function createCanvas(parent, width, height) {
    var canvas = document.getElementById("inputCanvas");
    canvas.context = canvas.getContext('2d');
    return canvas;
  }

  function init(container, width, height, fillColor) {
    var canvas = createCanvas(container, width, height);
    var ctx = canvas.context;
    ctx.fillCircle = function(x, y, radius, fillColor) {
      this.fillStyle = fillColor;
      this.beginPath();
      this.moveTo(x, y);
      this.arc(x, y, radius, 0, Math.PI * 2, false);
      this.fill();
    };
    ctx.clearTo = function(fillColor) {
      ctx.fillStyle = fillColor;
      ctx.fillRect(0, 0, width, height);
    };
    ctx.clearTo("#fff");

    canvas.onmousemove = function(e) {
      if (!canvas.isDrawing) {
        return;
      }
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;
      var radius = 10;
      var fillColor = 'rgb(102,153,255)';
      ctx.fillCircle(x, y, radius, fillColor);
    };
    canvas.onmousedown = function(e) {
      canvas.isDrawing = true;
    };
    canvas.onmouseup = function(e) {
      canvas.isDrawing = false;
    };
  }

  var container = document.getElementById('inputCanvas');
  init(container, 200, 200, '#dddd');

});
#inputCanvas{
    border: 5px solid rgb(102,153,255);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<body>
<div class="container">
     <table class="table table-bordered">
        <thead>
        <tr>
            <th scope="col" style="text-align:center">Pick an image File</th>
            <th scope="col" style="text-align:center">Draw a Number</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                <form method="post" action="/upload" enctype="multipart/form-data">
                    <div class="d-flex justify-content-center">
                        <div class="form-group">
                            <input type="file" class="form-control-file" name="img" accept="image/*" id="img"
                                   aria-describedby="fileHelpId">
                        </div>
                    </div>
                    <div class="col text-center">
                        <input type="submit" value="Submit" class="btn btn-primary">
                    </div>
                </form>
            </td>
            <td>
               <canvas id="inputCanvas" width="400" height="400"></canvas>
            </td>
        </tr>
        <tr>
            <th colspan="2" style="text-align:center">
                Predicted Number
            </th>
        </tr>
        </tbody>
    </table>
</div>

标签： javascripthtmlcssbootstrap-4

解决方案

改变：

var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;

到：

var xy = this.getBoundingClientRect();
      
  var x = e.pageX - xy.left - window.scrollX;
  var y = e.pageY - xy.top - window.scrollY;

this.offsetLeft 在表内时不起作用的原因是因为您获得了相对于其父级而不是相对于浏览器窗口的 offsetLeft。

推荐阅读