Discussion :

[Lunesti]

Bonjour,

Je dois créer un canvas avec une signature que j'ai bien réalisé pour le format Desktop, mais en version mobile j'ai un énorme décalage0

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
 
class Canvas {
    constructor() {
        this.ctx = Dom.canvasElement.getContext('2d');
    }
 
    startDraw(e) {
        e.preventDefault();
        this.painting = true;
    }
 
 
    draw(e) {
        console.log('drawing...')
        if (!this.painting)
            return;
 
        this.ctx.lineWidth = 2;
        this.ctx.lineCap = "round";
        this.ctx.lineTo(e.offsetX, e.offsetY);
        this.ctx.stroke();
        this.ctx.beginPath();
        this.ctx.moveTo(e.offsetX, e.offsetY);
        Dom.validateElement.style.visibility = 'visible';
    }
 
    drawMobile(e) {
        e.preventDefault();
        this.touch = e.changedTouches[0];
        if (this.painting) {
            this.ctx.lineWidth = 2;
            this.ctx.lineCap = "round";
            this.ctx.lineTo(this.touch.clientX, this.touch.clientY);
            this.ctx.stroke();
            this.ctx.beginPath();
            this.ctx.fill();
            this.ctx.moveTo(this.touch.clientX, this.touch.clientY)
        }
    }
 
    finishDraw() {
        this.painting = false;
        this.ctx.beginPath();
    }
 
 
    eventSignature() {
        Dom.canvasElement.addEventListener("mousedown", this.startDraw.bind(this));
        Dom.canvasElement.addEventListener("mousemove", this.draw.bind(this));
        Dom.canvasElement.addEventListener("mouseup", this.finishDraw.bind(this));
        Dom.canvasElement.addEventListener('touchstart', this.startDraw.bind(this));
        Dom.canvasElement.addEventListener("touchmove", this.drawMobile.bind(this));
        Dom.canvasElement.addEventListener('touchend', this.finishDraw.bind(this));
    }
}
 
const myCanvas = new Canvas();
myCanvas.eventSignature();]

Le problème se pose lorsque le canvas n'est pas seul sur la page, c'est à dire que, si des éléments se trouvent au dessus du canvas (du texte, images, etc) il y a un décalage lorsqu'on signe.
Etant donné que mon code fonctionne bien sans autre élément, j'en conclu que le code est bon.



Içi le résultat avec un canvas seul sur la page :





içi la même chose avec du texte au dessus :


Ce que je constate c'est que, en fonction de la hauteur de l'élément du dessus, la position du doigt et le trait aura pour valeur la même hauteur que l'élément du dessus. J'ai fait plusieurs tests et ça semble être le cas.

J'aimerais savoir comment déduire cette hauteur (ce décalage). Je pense que le point d'origine change en fonction de la position du canvas......

Je suis toujours en train de chercher de mon côté mais si vous avez des pistes je suis preneur.... merci d'avance !

[NoSmoking]

Bonjour,
à voir cette excellente discussion : Canvas signature (Js pur - POO)

[Lunesti]

Merci j'espère que ça va m'aider

[NoSmoking]

Je t'ai retrouvé une réponse plus concise : <canvas> Récupérer la position de la souris

[Lunesti]

à voir cette excellente discussion : Canvas signature (Js pur - POO)

Merci pour m'avoir reconduit vers ce travail, grâce à cela j'ai pu réadapter mon code et cela fonctionne.

Je t'ai retrouvé une réponse plus concise : <canvas> Récupérer la position de la souris

Je vais y jeter un coup d’œil, ça peut toujours servir

Sujet Résolu