如何在 Bootstrap 模式中显示画布

Question

我创建了一张地图，您可以在其中通过 Javascript 预订自行车。 用户应该：1）选择一个自行车站（绿色站=自行车可用）2）点击一个按钮（储备按钮）3）在画布上签名（在模态中）

该页面在这里： http : //p4547.phpnet.org/bikes/reservation.html

在我的 javascript 中，类对象是这样调用的：

      document.addEventListener("DOMContentLoaded", event => {
        new Signature();

如果画布位于页面主体中，则此代码工作正常。 但是如果画布位于模态中，则代码不起作用。

我试图这样编码：

$('#bookingmodal').on('shown.bs.modal',function(event){
new Signature();

    });

我的模态 ID 是：#bookingmodal

Answer 1

您的问题在于计算画布内鼠标位置的坐标。 如果您将页面大小调整为一个非常小的窗口，绘图有时会起作用（具有难看的偏移）。

我采用了您的Signature类并将画布内鼠标位置的计算替换为一个函数，该函数计算鼠标的正确位置并处理画布使用的位图的可能缩放：

updateMousePosition(mX, mY) {
  let rect = this.canvas.getBoundingClientRect();
  let scaleX = this.canvas.width / rect.width;
  let scaleY = this.canvas.height / rect.height;
  this.cursorX = (mX - rect.left) * scaleX;
  this.cursorY = (mY - rect.top) * scaleY;
}

例子：

 class Signature { constructor() { this.color = "#000000"; this.sign = false; this.begin_sign = false; this.width_line = 5; this.canvas = document.getElementById('canvas'); this.offsetLeft = this.canvas.offsetLeft; this.offsetTop = this.canvas.offsetTop; this.context = canvas.getContext('2d'); this.context.lineJoin = 'round'; this.context.lineCap = 'round'; this.whenMouseDown(); this.whenMouseUp(); this.whenMouseMove(); this.createSignature(); this.clearCanvas(); this.resetCanvas(); } updateMousePosition(mX, mY) { let rect = this.canvas.getBoundingClientRect(); let scaleX = this.canvas.width / rect.width; let scaleY = this.canvas.height / rect.height; this.cursorX = (mX - rect.left) * scaleX; this.cursorY = (mY - rect.top) * scaleY; } whenMouseDown() { document.addEventListener("mousedown", ({ pageX, pageY }) => { this.sign = true; this.updateMousePosition(pageX, pageY); }) } whenMouseUp() { document.addEventListener("mouseup", () => { this.sign = false; this.begin_sign = false; }) } whenMouseMove() { this.canvas.addEventListener('mousemove', ({ pageX, pageY }) => { if (this.sign) { this.updateMousePosition(pageX, pageY); this.createSignature(); } }) } createSignature() { if (!this.begin_sign) { this.context.beginPath(); this.context.moveTo(this.cursorX, this.cursorY); this.begin_sign = true; } else { this.context.lineTo(this.cursorX, this.cursorY); this.context.strokeStyle = this.color; this.context.lineWidth = this.width_line; this.context.stroke(); } } clearCanvas() { this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); } resetCanvas() { document.getElementById("reset").addEventListener("click", () => { this.clearCanvas(); }) } } document.addEventListener("DOMContentLoaded", event => { new Signature(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <button type="button" class="btn btn-success" data-target="#bookingmodal" data-toggle="modal">Réserver</button> <div aria-labelledby="exampleModalLongTitle" class="modal fade" id="bookingmodal" role="dialog" tabindex="-1" style="display: none;" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLongTitle">Réservation</h5><button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button> </div> <div class="modal-body"> <div class="guide"> <div class="row item"> <div class="col-md-12 order-md-2"> <h2 class="item-heading">Signature. <span class="text-muted">Signez pour valider votre réservation.</span></h2> <canvas id="canvas" width="250" height="250"> </canvas> <form> <input type="button" id="reset" value="Réinitialiser" class="btn btn-danger"> </form> </div> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-secondary" data-dismiss="modal" type="button">Fermer</button> </div> </div> </div> </div>