Bonjour, je viens vers vous car j'ai codé une signature électronique via l'élément canvas et je n'arrive pas à mettre mon code en Poo avec un système de class. Je suis un peu dans les choux malgré que le code en procédural fonctionne bien. J'ai beaucoup de mal à comprendre comment faire j'ai regardé pas mal de cours et suivi des petits exercices depuis 1 mois ou deux mais je ne capte toujours pas comment faire. Cependant je comprends le prinicipe et l'utilité que peut offrir la Poo mais à part ça. Si vous avez des conseils ou une méthode pour progresser dans ce domaine je vous écoute.Merci d'avance

CODE EN PROCEDURAL

var canvas = document.querySelector("canvas");
var cleanCanvas = document.getElementById("nettoyer");
canvas.width = 250;
canvas.height = 250;
const ctx = canvas.getContext('2d');
var canvasBlank = true;
let painting = false;


// Function (start position, finished position, draw, clear )
function startPosition(){
painting = true;  // mouse down active le painting
canvasBlank = false;
 }

// Quand le tracé se termine
function finishedPosition(){
 painting = false;
 ctx.beginPath();
}


// Pour dessiner
function draw(e) {
	if (!painting) return;
	ctx.lineWidth = 5;
	ctx.lineCap = "round";
    
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
}


//pour effacer tous les tracés
function cleaning() {
ctx.clearRect(0, 0, 500, 500);
canvasBlank = true;
}


//EventListeners (Mouse event)
canvas.addEventListener("mousedown", startPosition);
canvas.addEventListener("mouseup",finishedPosition);
canvas.addEventListener("mousemove", draw); 
canvas.addEventListener("mouseleave", finishedPosition)

cleanCanvas.onclick = function (){ // cleanCanvass btn pour effacer
cleaning()
}


/*
var validCanvas = document.getElementById("cancel");
 validCanvas.addEventListener("click", function() {
		 cleaning();
		 });
*/

	
    

MON ESSAIS EN POO 

class Canvas{
constructor(){
this.canvas = document.querySelector("canvas");
this.cleanCanvas = document.getElementById("nettoyer");
this.ctx = this.canvas.getContext("2d")
this.canvas.width = 250;
this.canvas.height = 250;
this.canvasBlank = true;
this.painting = false;
this.controlMouse();
this.btnCleaning();
this.cleaning();
}



// Function (start position, finished position, draw, clear )
startPosition()  {
let myCanvas = this;
myCanvas.painting = true;  // mouse down active le painting
myCanvas.canvasBlank = false;
console.log(myCanvas);
 }

// Quand le tracé se termine
finishedPosition(){
 this.painting = false;
 this.ctx.beginPath();
}


// Pour dessiner
draw(e) {
	myCanvas = this;
	if (!myCanvas.painting) return;
	ctx.lineWidth = 5;
	ctx.lineCap = "round";
    
    ctx.lineTo(e.offsetX, e.offsetY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(e.offsetX, e.offsetY);
}


//pour effacer tous les tracés
cleaning() {
myCanvas = this;
ctx.clearRect(0, 0, 500, 500);
myCanvas.canvasBlank = true;
}


//EventListeners (Mouse event)

controlMouse(){
let myCanvas = this;
this.canvas.addEventListener("mousedown", myCanvas.startPosition());
this.canvas.addEventListener("mouseleave", myCanvas.finishedPosition());
this.canvas.addEventListener("mousemove", myCanvas.draw()); 
this.canvas.addEventListener("mouseleave", myCanvas.finishedPosition());
}

btnCleaning(){
this.cleanCanvas.onclick = function (){ // cleanCanvass btn pour effacer
this.cleaning();
}
}

}
  const canvas = new Canvas();
 /*
 var validCanvas = document.getElementById("cancel");

 validCanvas.addEventListener("click", function() {
		 cleaning();
		 });
*/

/*var validCanvas = document.getElementById("valid");

 validCanvas.addEventListener("click", function() {
		if (canvasBlank === true){
		 alert('Veuillez signer le formulaire');
		}
		else {
		 alert("bravo");
		}                      
		    }); */
    

-
Edité par SophieGuichard 22 janvier 2020 à 10:15:11

Salut,

Petite question avant d'apporter une réponse.
Tu cherche as obtenir une class dont l'objectif est de "manager" tes canvas ou plutôt une class qui te permettra de créer génériquement des éléments canvas personnalisés dédiés à la signature ?

-
Edité par BrainError 22 janvier 2020 à 14:06:34

Bonjour, mon but ici est de mettre le canvas en poo avec un système de class dont l'objectif effectivement serait de  manager de potentiels Canvas en utilisant celui déjà créé. J'ai accidentellement oublié la dernière ligne excusez moi "const canvas = new Canvas();" je vais la rajouter. Pour le moment j'essaie juste d'apprendre et surtout comprendre comment je peux faire pour y arriver et progresser sur ce point. J'ai vraiment un mal fou à comprendre comment y parvenir.

Je te propose ça :

class signatureCanvas extends HTMLCanvasElement { // On crée notre class signatureCanvas héritant de l'élément canvas

    constructor() { // Le constructeur
        super(); // On appelle le construteur parent en premier
        this.blank = true; // on définit les propriétés utiles
        this.painting = false;
        this._cleaning = undefined; /*
            Cette propriété servira à créer un attribut qui contiendra l'id d'un bouton
            (ou n'importe quel autre élément) et qu'on utilisera pour déclencher la méthode
            clean() servant à nettoyer le canvas
            */
        this.cleaningButton = undefined // Une propriété qui pointera vers le bouton portant l'id
        this.ctx = this.getContext('2d'); // On défini le context...
        this.addEventListener("mousedown", this.startPosition); // Et les événements
        this.addEventListener("mouseup", this.finishedPosition);
        this.addEventListener("mousemove", this.draw);
        this.addEventListener("mouseleave", this.finishedPosition)
        return this;
    }

    set cleaning(value) { // On déclenche la méthode setCleaningButton() lorsque la propriété change de valeur
        this._cleaning = value;
        this.setCleaningButton();
        return this._cleaning;
    }

    get cleaning() {
        return this._cleaning;
    }

    setCleaningButton() {
        let newButton;
        if(!(newButton = document.getElementById(this.cleaning))) // Si aucun élément portant l'id définit dans la propriété cleaning n'existe
            return; // On ne fait rien
        if(this.cleaningButton) // Si cleaningButton a déjà été défini auparavant :
            this.cleaningButton.removeEventListener('click', this.clean.bind(this)); // On supprime l'événement lié à l'ancien bouton
        this.cleaningButton = newButton; // On associe le nouveau bouton
        this.cleaningButton.addEventListener('click', this.clean.bind(this)); // On ajoute l'événement pour déclencher clean()
    }

    clean() { // La méthode de nettoyage
        this.ctx.clearRect(0, 0, 500, 500);
        this.blank = true;
    }

    startPosition() { // Tes autres méthodes
        this.painting = true;
        this.blank = false;
    }
    
    finishedPosition() {
        this.painting = false;
        this.ctx.beginPath();
    }

    draw(e) {
        if (!this.painting)
            return;
        this.ctx.lineWidth = 5;
        this.ctx.lineCap = "round";

        this.ctx.lineTo(e.offsetX, e.offsetY);
        this.ctx.stroke();
        this.ctx.beginPath();
        this.ctx.moveTo(e.offsetX, e.offsetY);
    }
    
    // Les méthodes spécifiques aux custom element :

    static get observedAttributes() { // La liste des attributs à surveiller
        return ['cleaning'];
    }
    
    connectedCallback() { // Ces trois méthodes ne nous interessent pas
        return;
    }
    
    disconnectedCallback() {
        return;
    }
    
    adoptedCallback() {
        return;
    }
    
    attributeChangedCallback(name, oldValue, newValue) { // On surveille les changements de valeur sur les attributs qu'on à défini (autrement dit "cleaning" uniquement)
        switch (name) {
            case 'cleaning':
                this.cleaning = newValue; // Si l'attribut cleaning change, on modifie la valeur de la propriété correspondante
        }
    }
    
};

customElements.define('signature-canvas', signatureCanvas, {extends: 'canvas'}); // On ajoute l'élément personnaliser à la bibliothèque (attention, il doit nécessairement y avoir un tiret dans le nom du custom element)

Seule contrainte de cette méthode, tu es obligé de créer tes signature-canvas de cette façon puisqu'ils héritent de HTMLCanvasElement et non pas de HTMLElement :

const customCanvas = document.createElement('canvas', { is: 'signature-canvas' });
customCanvas.width = 500;
customCanvas.height = 500;
document.body.appendChild(customCanvas);
customCanvas.cleaning = 'id_du_bouton_de_nettoyage';

Impossible de faire l'ajout direct dans ta page en HTML.

Si tu veux plus de détail sur le principe des custom elements :
https://developer.mozilla.org/fr/docs/Web/Web_Components/Using_custom_elements

-
Edité par BrainError 22 janvier 2020 à 14:07:05

Bonjour,

Désolé pour ma réponse tardive.Merci beaucoup pour votre aide en gros mon objectif était de manager les Canvas, mais j'ai beaucoup appris appris en étudiant votre code c'était très instructif, j'ai cependant réussi à réaliser ce que je voulais faire.

Merci encore et bonne journée