Bonjour,

Voila je rencontre un petit problème avec mon code.

je fais un canvas signature pour mon site et pour cela j'ai pris un code que je vous montre ci-dessous.

voici mon code ci dessous je voudrais pouvoir signer avec mais il m'affiche des erreurs comme "this.drawLine is not a function" et si je met bind il fais rien y a pas de signature voilà mon soucis est-ce que quelqu'un peut m'aider

class Sign {
    constructor() {
        // Variables :
        this.color = "#000";
        this.painting = false;
        this.started = false;
        this.width_brush = 1;
        this.canvas = $("#sign");
        this.cursorX, this.cursorY;
        this.context = this.canvas[0].getContext('2d');
        // Trait arrondi :
        this.context.lineJoin = 'round';
        this.context.lineCap = 'round';
        this.mousedown();
        this.mouseup();
        this.mousemove();
        this.drawLine();
    }
    mousedown() {
        // Click souris enfoncé sur le canvas, je dessine :
        $(this.canvas).mousedown(function (e) {
            this.painting = true;

            // Coordonnées de la souris :
            this.cursorX = (e.pageX - this.offsetLeft);
            this.cursorY = (e.pageY - this.offsetTop);

        });

    }

    mouseup() {
        // Relachement du Click sur tout le document, j'arrête de dessiner :
        $(this.canvas).mouseup(function () {
            this.painting = false;
            this.started = false;
        });
    }

    mousemove() {
        // Mouvement de la souris sur le canvas :
        $(this.canvas).mousemove(function (e) {
            // Si je suis en train de dessiner (click souris enfoncé) :
            if (this.painting) {
                // Set Coordonnées de la souris :
                this.cursorX = (e.pageX - this.offsetLeft) - 2; // 10 = décalage du curseur
                this.cursorY = (e.pageY - this.offsetTop) - 2;
                this.drawLine()
            }
        });
    }
    // Fonction qui dessine une ligne :
    drawLine() {
        // Si c'est le début, j'initialise
        if (!this.started) {
            // Je place mon curseur pour la première fois :
            this.context.beginPath();
            this.context.moveTo(this.cursorX, this.cursorY);
            this.started = true;
        }
        // Sinon je dessine
        else {
            this.context.lineTo(this.cursorX, this.cursorY);
            this.context.strokeStyle = this.color;
            this.context.lineWidth = this.width_brush;
            this.context.stroke();
        }

    }
}

je voudrais pouvoir signer avec mon canvas

pas de signature

this.drawline is not fonction ou rien

2 réponses


YiuJia
Réponse acceptée

un problème de this !

Exemple :

mousemove() {
        var that = this;

        // Mouvement de la souris sur le canvas :
        $(this.canvas).mousemove(function (e) {
            // ici this ne représente plus la même chose

            // Si je suis en train de dessiner (click souris enfoncé) :
            if (that.painting) {
                // Set Coordonnées de la souris :
                that.cursorX = (e.pageX - this.offsetLeft) - 2; // 10 = décalage du curseur
                that.cursorY = (e.pageY - this.offsetTop) - 2;
                that.drawLine();
            }
        });
    }

A revoir aussi sur les autres fonctions de ta classe.

Yamishibai
Auteur
Réponse acceptée

merci merci merci merci et encore merci super merci pour votre aide