Javascript 如何在引导模式中显示画布

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

页面如下：

在我的javascript中，类对象的调用方式如下：

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

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

我试着这样编码：

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

    });

---

我的模式ID是：#bookingmodal

您的问题在于计算画布内鼠标位置的坐标。如果将页面调整为一个非常小的窗口，图形有时会工作（偏移量很小）

我接受了您的

签名

-类，并用一个函数替换了画布中鼠标位置的计算，该函数计算鼠标的正确位置，并处理画布使用的位图的可能缩放：

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;
}

示例：

类签名{
构造函数（）{
this.color=“#000000”；
这个符号=假；
this.begin\u符号=false；
这条线的宽度=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'；
这个。whenMouseDown（）；
这个。whenMouseUp（）；
这是。whenMouseMove（）；
这个.createSignature（）；
这个.clearCanvas（）；
这是resetCanvas（）；
}
updateMousePosition（mX，我的）{
让rect=this.canvas.getBoundingClientRect（）；
让scaleX=this.canvas.width/rect.width；
让scaleY=this.canvas.height/rect.height；
this.cursorX=（mX-rect.left）*scaleX；
this.cursorY=（mY-rect.top）*scaleY；
}
whenMouseDown（）{
document.addEventListener（“鼠标向下”({
pageX，
佩吉
}) => {
这个符号=真；
此.updateMousePosition（pageX，pageY）；
})
}
whenMouseUp（）{
document.addEventListener（“mouseup”，（）=>{
这个符号=假；
this.begin\u符号=false；
})
}
whenMouseMove（）{
this.canvas.addEventListener（'mousemove'({
pageX，
佩吉
}) => {
如果（本签名）{
此.updateMousePosition（pageX，pageY）；
这个.createSignature（）；
}
})
}
createSignature（）{
如果（！此.begin\u符号）{
this.context.beginPath（）；
this.context.moveTo（this.cursorX，this.cursorY）；
this.begin\u符号=真；
}否则{
this.context.lineTo（this.cursorX，this.cursorY）；
this.context.strokeStyle=this.color；
this.context.lineWidth=this.width\u行；
this.context.stroke（）；
}
}
clearCanvas（）{
this.context.clearRect（0，0，this.canvas.width，this.canvas.height）；
}
resetCanvas（）{
document.getElementById（“重置”）.addEventListener（“单击”，（）=>{
这个.clearCanvas（）；
})
}
}
document.addEventListener（“DOMContentLoaded”，事件=>{
新签名（）；
});

Réserver
Réservation×
签名请签字确认。
费尔默
我已将脚本移到此页面：但现在，签名画布不再工作。我发现是因为我的尿布课。我认为相对位置正在破坏画布：#diporama{position:relative；}我如何保持相对位置并使我的签名画布工作？你应该尝试使用
clientX
和
clientY
而不是
pageX
和
pageY
。请添加橡皮擦方法