我在这里将其放在网上: http://agency3w.com/carteLocationVelos/
如果我查看地图,然后单击图钉,则可以看到相关信息。 如果我填写“ Nom”“Prénom”并按“ Reservation”
我的画布正在显示!问题是,当我在其上绘制时,我看不到自己在绘制什么,但是它似乎可以工作,因为我可以验证。有小费吗?我认为CSS出现问题
这是我的画布代码
const Canvas = {
isDrawing : false, // Lorsque true, le déplacement de la souris
dessine sur la toile
draw : false, // lorsque true, on peux valider la signature
x : 0,
y : 0,
bonDeReservationElt : document.getElementById('bonDeReservation'),
reservationElt : document.getElementById('reservation'),
InformationElt : document.getElementById('Information'),
canvas : document.getElementById('mon-canvas'),
context : document.getElementById('mon-canvas').getContext('2d'),
rect : document.getElementById('mon-canvas').getBoundingClientRect(), //
renvoie la taille d'un élément et sa position relative par rapport à la
zone d'affichage (viewport).
debut(e) {
this.x = e.clientX - this.rect.left;
this.y = e.clientY - this.rect.top;
this.draw = false;
this.isDrawing = true;
},
bouger(e) {
if (this.isDrawing === true) {
this.drawLine(this.context, this.x, this.y, e.clientX -
this.rect.left, e.clientY - this.rect.top);
this.x = e.clientX - this.rect.left;
this.y = e.clientY - this.rect.top;
this.draw = true;
}
},
terminer(e) {
if (this.isDrawing === true) {
this.drawLine(this.context, this.x, this.y, e.clientX - this.rect.left, e.clientY - this.rect.top);
this.x = 0;
this.y = 0;
this.isDrawing = false;
}
},
drawLine(context, x1, y1, x2, y2) {
this.context.beginPath(); //On démarre un nouveau tracé
this.context.moveTo(x1, y1); //On se déplace au coin x1 y1
this.context.strokeStyle = 'black';
this.context.lineWidth = 3;
this.context.lineTo(x2, y2); // on trace une ligne jusqu'aux coordonnées
x2, y2
this.context.stroke(); //On trace seulement les lignes.
this.context.closePath();
},
effacer () {
this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
this.draw = false;
},
valider () {
var nom = localStorage.getItem("nomClient");
var prenom = localStorage.getItem("prenomClient");
var station = sessionStorage.getItem('stationClient');
if (this.draw === true) {
this.reservationElt.style.display = "none";
this.bonDeReservationElt.style.display = "block";
document.getElementById('nomPrenom').textContent = nom +" "+
prenom ;
document.getElementById('nomStationReserver').textContent =
station ;
this.InformationElt.style.display = "none";
}
}
}
document.getElementById('mon-canvas').addEventListener('mousedown', e =>
Canvas.debut(e));
document.getElementById('mon-canvas').addEventListener('mousemove', e =>
Canvas.bouger(e));
document.getElementById('mon-canvas').addEventListener('mouseup', e =>
Canvas.terminer(e));
document.querySelector('.boutonAnnuler').addEventListener('click', () =>
Canvas.effacer());
document.querySelector('.boutonValider').addEventListener('click', () =>
Canvas.valider());
这里是CSS
#mon-canvas {
width: 330px;
height:150px;
background-color: white;
border: 3px solid black;
margin: 30px;
/* display: block !important;*/
}
#canvasbutton
{
display: flex;
}
#canvasAndBon
{
margin-top: 100px;
margin-bottom: 50px;
justify-content: space-around;
z-index: 5;
background-color: rgb(245,245,245);
}
预期结果将是在我的画布上看到绘制的签名
答案 0 :(得分:2)
替换
if (this.isDrawing === true) {
this.drawLine(this.context, this.x, this.y, e.clientX - t this.rect.left, e.clientY - this.rect.top);
this.x = 0;
this.y = 0;
this.isDrawing = false;
}
与
if (this.isDrawing === true) {
this.drawLine(this.context, this.x, this.y, e.clientX - this.rect.left, e.clientY - this.rect.top);
this.x = 0;
this.y = 0;
this.isDrawing = false;
}