当我打开一个模态并关闭它并打开另一个模态并对其进行更改时，我的 Canvas 项目遇到了问题，我打开的所有模态也都被编辑了。
这是我的 HTML 代码：
<div class="modal fade" id="editBodyChartModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Body Chart</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
</button>
</div>
<div class="modal-body">
<div class="all-body-chart-buttons">
<div>
<button id="btnDraw-edit" class="btn" style="width: 80px; height: 70px;"><i class="fas fa-pencil-alt" style="font-size: 40px; color: black;"></i></button>
<button id="btnEraser-edit" class="btn" style="width: 80px; height: 70px;"><i class="fas fa-eraser" style="font-size: 40px; color: black;"></i></button>
</div>
<div>
<button id="btnLargeWithLine-edit" class="btn" style="width: 80px; height: 70px;"><i class="fas fa-circle" style="font-size: 40px; color: black;"></i></button>
<button id="btnMediumWithLine-edit" class="btn" style="width: 80px; height: 70px;"><i class="fas fa-circle" style="font-size: 20px; color: black;"></i></button>
</div>
<div>
<button id="btnSmallWithLine-edit" class="btn" style="width: 80px; height: 70px;"><i class="fas fa-circle" style="font-size: 10px; color: black;"></i></button>
<button id="btnBlackColor-edit" class="btn" style="width: 80px; height: 70px;"><i class="fas fa-square" style="font-size: 40px; color: black;"></i></button>
</div>
<div>
<button id="btnRedColor-edit" class="btn" style="width: 80px; height: 70px;"><i class="fas fa-square" style="font-size: 40px; color: #9f3631;"></i></button>
<button id="btnBlueColor-edit" class="btn" style="width: 80px; height: 70px;"><i class="fas fa-square" style="font-size: 40px; color: #00c1ca;"></i></button>
</div>
<div>
<button id="btnUndo-edit" class="btn" style="width: 80px; height: 70px;"><i class="fas fa-undo" style="font-size: 40px; color: black;"></i></button>
<button id="btnRedo-edit" class="btn" style="width: 80px; height: 70px;"><i class="fas fa-redo" style="font-size: 40px; color: black;"></i></button>
</div>
<div>
<button id="btnClear-edit" class="btn" style="width: 80px; height: 70px;"><i class="fas fa-times" style="font-size: 40px; color: black;"></i></button>
</div>
</div>
<div class="canvas-box">
<canvas id="myCanvas-edit" style="border:1px solid #000000;"></canvas>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Fermer</button>
<button id="btnSaveCanvas-edit" type="button" class="btn btn-primary">Modifier</button>
</div>
</div>
</div>
</div>
这是我的 Javascript 代码：
$('.showEditBodyChart').on('click', function(){
let data = $(this).attr('name');
data = data.split('$$');
class SignatureEdit {
constructor(data) {
this.data = data;
this.redo_list = [];
this.undo_list = [];
this.eraser = false;
this.color = "#000000";
this.sign = false;
this.begin_sign = false;
this.width_line = 5;
this.canvas = document.getElementById('myCanvas-edit');
this.canvas.width = 750;
this.canvas.height = 480;
this.offsetLeft = this.canvas.offsetLeft;
this.offsetTop = this.canvas.offsetTop;
this.context = this.canvas.getContext('2d');
this.context.lineJoin = 'round';
this.context.lineCap = 'round';
this.whenMouseDown();
this.whenMouseUp();
this.whenMouseMove();
this.createSignature();
this.clearCanvas();
this.resetCanvas();
this.changeColorToRed();
this.changeColorToBlack();
this.changeColorToBlue();
this.changeWithLineToSmall();
this.changeWithLineToMedium();
this.changeWithLineToLarge();
this.erase();
this.draw();
this.undo();
this.redo();
this.undoEvent();
this.redoEvent();
this.saveCanvas();
this.edit();
this.destroyInstance();
}
destroyInstance(){
document.getElementById("editBodyChartModal").addEventListener("hidden.bs.modal", () => {
delete this;
});
}
edit(){
let img = new Image;
img.onload = function(){
document.getElementById('myCanvas-edit').getContext('2d').drawImage(img,0, 0); // Or at whatever offset you like
};
img.src = this.data[1];
}
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);
// this.context.beginPath();
// this.context.moveTo(this.cursorX, this.cursorY);
// this.context.lineTo(this.cursorX, this.cursorY);
// this.context.strokeStyle = this.color;
// this.context.lineWidth = this.width_line;
// this.context.stroke();
})
}
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.erazer){
this.context.globalCompositeOperation = 'destination-out';
}
else{
this.context.globalCompositeOperation = 'source-over';
}
if (!this.begin_sign) {
this.context.beginPath();
this.context.moveTo(this.cursorX, this.cursorY);
this.redo_list = [];
this.undo_list.push(this.canvas.toDataURL());
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);
}
changeColorToRed() {
document.getElementById("btnRedColor-edit").addEventListener("click", () => {
this.color = "#9f3631";
})
}
changeColorToBlack() {
document.getElementById("btnBlackColor-edit").addEventListener("click", () => {
this.color = "#000000";
})
}
changeColorToBlue() {
document.getElementById("btnBlueColor-edit").addEventListener("click", () => {
this.color = "#00c1ca";
})
}
changeWithLineToSmall(){
document.getElementById("btnSmallWithLine-edit").addEventListener("click", () => {
this.width_line = 5;
})
}
changeWithLineToMedium(){
document.getElementById("btnMediumWithLine-edit").addEventListener("click", () => {
this.width_line = 10;
})
}
changeWithLineToLarge(){
document.getElementById("btnLargeWithLine-edit").addEventListener("click", () => {
this.width_line = 20;
})
}
erase(){
document.getElementById("btnEraser-edit").addEventListener("click", () => {
this.erazer = true;
})
}
draw(){
document.getElementById("btnDraw-edit").addEventListener("click", () => {
this.erazer = false;
this.width_line = 5;
})
}
resetCanvas() {
document.getElementById("btnClear-edit").addEventListener("click", () => {
this.context.globalCompositeOperation = 'source-over';
this.erazer = false;
this.redo_list = [];
this.uno_list = [];
this.clearCanvas();
})
}
undo(){
if (this.undo_list.length){
this.context.globalCompositeOperation = 'source-over';
this.redo_list.push(this.canvas.toDataURL());
var restore_state = this.undo_list.pop();
var img = new Image();
img.src = restore_state;
var width = this.canvas.width;
var height = this.canvas.height;
img.onload = function() {
document.getElementById('myCanvas-edit').getContext('2d').clearRect(0, 0, width, height);
document.getElementById('myCanvas-edit').getContext('2d').drawImage(img, 0, 0, width, height, 0, 0, width, height);
}
}
}
redo(){
if(this.redo_list.length){
this.undo_list.push(this.canvas.toDataURL());
var restore_state = this.redo_list.pop();
var img = new Image();
img.src = restore_state;
var width = this.canvas.width;
var height = this.canvas.height;
img.onload = function() {
document.getElementById('myCanvas-edit').getContext('2d').clearRect(0, 0, width, height);
document.getElementById('myCanvas-edit').getContext('2d').drawImage(img, 0, 0, width, height, 0, 0, width, height);
}
}
}
undoEvent() {
document.getElementById("btnUndo-edit").addEventListener("click", () => {
this.undo();
})
}
redoEvent() {
document.getElementById("btnRedo-edit").addEventListener("click", () => {
this.redo();
})
}
saveCanvas(){
document.getElementById("btnSaveCanvas-edit").addEventListener("click", () => {
var id = this.data[0];
var dataURL = this.canvas.toDataURL();
var csrf_token = $('meta[name="csrf-token"]').attr('content');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'POST',
url: '/bodycharts/' + id,
data: {
'_method': 'PUT',
'_token': csrf_token,
canvas: dataURL
}
}).done(function () {
swal({
title: 'Succés!',
text: "Diagramme corporel a été modifié avec succés!!",
type: 'success',
padding: '2em'
});
window.setTimeout(function(){location.reload()},1000)
}).fail(function () {
swal({
type: 'error',
title: 'Oops...',
text: 'Something went wrong!',
padding: '2em'
})
});
})
}
}
window.scrollTo(0, 0);
new SignatureEdit(data);
$('#editBodyChartModal').modal('show');
});
我添加了这个事件来在模态关闭时销毁当前实例，但它不起作用。
destroyInstance(){
document.getElementById("editBodyChartModal").addEventListener("hidden.bs.modal", () => {
delete this;
});
}