Empêcher la signature d'un canvas de sortir des limites du canvas
Frank_N
Messages postés
43
Statut
Membre
-
nipal -
nipal -
Bonjour,
J'ai fais un objet JS pour pouvoir effectuer un dessin dans un canvas et dans l'idéal quand l'utilisateur click sur la souris, on commence à dessiner (une ligne), quand on relache le bouton le dessin s'arrête (jusque la tout va bien) mais par contre si je sors des limites de mon canvas en ayant le click de la souris enfoncé, le dessin continue même si le click est relaché .. j'ai essayé une condition (qui est commentée) mais celle ci ne fonctionne pas..
Si quelqu'un pouvais m'éclairer sur ce point s'il vous plait ? :)
J'ai fais un objet JS pour pouvoir effectuer un dessin dans un canvas et dans l'idéal quand l'utilisateur click sur la souris, on commence à dessiner (une ligne), quand on relache le bouton le dessin s'arrête (jusque la tout va bien) mais par contre si je sors des limites de mon canvas en ayant le click de la souris enfoncé, le dessin continue même si le click est relaché .. j'ai essayé une condition (qui est commentée) mais celle ci ne fonctionne pas..
Si quelqu'un pouvais m'éclairer sur ce point s'il vous plait ? :)
<html lang="fr">
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="canvas">
<canvas id="canvas" width="250" height="125"></canvas><br />
<button type="button" class="btn btn-danger effacer" id="effacer">Effacer</button>
<button type="button" class="btn btn-success valider" id="valider" disabled>Valider</button>
</div>
</body>
</html>
var Signature = {
//Récupère la position du pointeur/doigt
getPosition: function (e, canvas){
var rect = canvas.getBoundingClientRect(),
eElement = e.changedTouches? e.changedTouches[0]:e;
return {
posX : (eElement.clientX - rect.left) / (rect.right - rect.left) * canvas.width,
posY : (eElement.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height
};
},
//Commence à déssiner (quand on pose le pointeur ou le doigt sur le canvas)
startDessin: function (e){
e.preventDefault();
var canvas = e.currentTarget,
position = Signature.getPosition(e, canvas);
canvas.posX = position.posX;
canvas.posY = position.posY;
canvas.dessiner = true;
document.getElementById("valider").disabled = false;
},
//Dessine
dessiner: function (e){
var canvas = e.currentTarget,
ctx = null, position = null;
if(canvas.dessiner == false){
return false;
}
position = Signature.getPosition(e, canvas);
ctx = canvas.getContext('2d');
//dessine
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo((canvas.posX), canvas.posY);
ctx.lineTo(position.posX, position.posY);
ctx.stroke();
canvas.posX = position.posX;
canvas.posY = position.posY;
/*if ( (position.posX || position.posY) > (canvas.width || canvas.height) ){
Signature.stopDessin(e);
}*/
},
//Arrêt du dessin (levé du stylo (pointeur/doigt))
stopDessin: function (e){
var canvas = e.currentTarget;
canvas.dessiner = false;
},
//Effacer le dessin
nettoyer: function (){
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext('2d');
ctx.clearRect(0,0,canvas.width,canvas.height);
document.getElementById("valider").disabled = true;
},
//Initialise le canvas
initCanvas: function (){
var canvas = document.getElementById("canvas");
document.getElementById("valider").disabled = true;
canvas.dessiner = false;
canvas.width = 250 ;
canvas.height = 125;
ctx = canvas.getContext('2d');
canvas.addEventListener("mousedown", Signature.startDessin);
canvas.addEventListener("mouseup", Signature.stopDessin);
canvas.addEventListener("mousemove", Signature.dessiner);
canvas.addEventListener("touchstart", Signature.startDessin);
canvas.addEventListener("touchend", Signature.stopDessin);
canvas.addEventListener("touchmove", Signature.dessiner);
document.getElementById("effacer").addEventListener("click", Signature.nettoyer);
}
}
document.addEventListener('DOMContentLoaded',function(){
Signature.initCanvas();
});
Configuration: Windows / Firefox 65.0
A voir également:
- Empêcher la signature d'un canvas de sortir des limites du canvas
- Canvas gratuit - Télécharger - Divers Photo & Graphisme
- Signature électronique word - Guide
- Modifier signature gmail - Guide
- Un bloqueur de publicité empêche la lecture. veuillez le désactiver pour démarrer la vidéo. ✓ - Forum Mozilla Firefox
- Comment sortir une application d'un dossier - Accueil - Guide Android
1 réponse
Salut il serais plus logique de faire le test des limites avant le dessin pour ne pas utiliser stopDessin() qui arrête le dessin.
enfin je crois à tester
if ( position.posX > canvas.width || || position.posY>canvas.height ){ /*- correction du test pour un canvas rectangulaire sinon height et width du canvas sont identiques , en tenir compte dans la condition */
//dessine
ctx.strokeStyle = 'blue';
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo((canvas.posX), canvas.posY);
ctx.lineTo(position.posX, position.posY);
ctx.stroke();
}//-- sinon il ne se passe rien et on reste dans touchMove qui va utiliser la méthode. Signature.dessiner()
enfin je crois à tester
