如何在Bootstrap模式中显示画布 [英] How to display a Canvas in a Bootstrap Modal

问题描述

我创建了一张地图，您可以在其中通过Javascript预订自行车.用户应该:1)选择一个自行车站(绿色站=可以使用自行车)2)单击一个按钮(服务器按钮)3)在画布上签名(以模式显示)

I created a map where you can book bikes via Javascript. The user is supposed to : 1) select a bike station (green station = bikes are available) 2) click on a button (reserver button) 3) sign in a canvas (in a modal)

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

在我的JavaScript中，类对象的调用方式如下:

In my javascript, the Class Object is called this way :

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

如果画布位于页面正文中，则此代码可以正常工作.但是，如果画布位于模式中，则代码无法正常工作.

This code is working fine if the canvas is located in the body of the page. But the code is not working if the canvas is located in the modal.

我试图用这种方式编码:

I tried to code this way :

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

    });

我的模式ID是:#bookingmodal

My modal ID is : #bookingmodal

推荐答案

您的问题在于计算画布内部鼠标位置的坐标.如果将页面大小调整为很小的窗口，则有时绘图会起作用(偏移量很丑).

Your problem is in the calculation of the coordinates for the mouse-position inside the canvas. If you resize the page to a really small window the drawing sometimes works (with an ugly offset).

我使用了您的 Signature 类，并用一个函数来计算画布内部鼠标位置的计算，该函数可以计算鼠标的正确位置，并且还可以处理鼠标使用的位图的可能缩放画布:

I took your Signature-class and replaced the calculation for the mouse-position inside the canvas with a function that calculates the correct position of the mouse and also handles possible scaling of the bitmap used by the canvas:

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>

这篇关于如何在Bootstrap模式中显示画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！