Tracer librement sur Canvas (tactile)

**Plantula** · 29/03/2021, 18h40

Bonjour � tous,

Grande d�butante en html5/javascript je me suis lanc�e sur le projet suivant : avoir un Canvas sur une page html, sur lequel l'utilisateur peut cr�er un cercle de couleur noire sur double clic, et tracer librement des formes � la souris en restant cliqu�.

En bidouillant tant bien que mal et d'apr�s un mod�le trouv� sur le net (je n'ai plus la r�f�rence originale, d�sol�e...), j'arrive � un code qui n'est probablement pas optimis� mais qui fonctionne tr�s bien � la souris.

Le code javascript

Code JAVASCRIPT :

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<script type="text/javascript">
 
    var canvas, ctx, flag = false,
        prevX = 0,
        currX = 0,
        prevY = 0,
        currY = 0,
        dot_flag = false;
 
    var x = "black";
 
    function init() {
        canvas = document.getElementById('can');
        ctx = canvas.getContext("2d");
        w = canvas.width;
        h = canvas.height;
        var fond = new Image();
        fond.src = "/storage/emulated/0/Download/image.png";
		fond.onload = function(){
        ctx.drawImage(fond,0,0);  
        }
 
        canvas.addEventListener("dblclick", cercle, false);
        canvas.addEventListener("mousemove", function (e) {
            findxy('move', e)
        }, false);
        canvas.addEventListener("mousedown", function (e) {
            findxy('down', e)
        }, false);
        canvas.addEventListener("mouseup", function (e) {
            findxy('up', e)
        }, false);
 
    }
 
    function cercle(e) {
	ctx.strokeStyle = 'black';
        ctx.beginPath();
 	ctx.lineWidth = 4;
        ctx.arc(currX, currY, 20, 0, 2 * Math.PI); 
        ctx.stroke();
        ctx.closePath();
    }
 
    function draw() {
        ctx.beginPath();
        ctx.moveTo(prevX, prevY);
        ctx.lineTo(currX, currY);
        ctx.strokeStyle = x;
        ctx.lineWidth = 4;
        ctx.stroke();
        ctx.closePath();
    }
 
    function findxy(res, e) {
        if (res == 'down') {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
 
            flag = true;
            dot_flag = true;
            if (dot_flag) {
                ctx.beginPath();
                ctx.fillStyle = x;
                ctx.fillRect(currX, currY, 2, 2);
                ctx.closePath();
                dot_flag = false;
            }
        }
 
        if (res == 'up') {
            flag = false;
        }
        if (res == 'move') {
            if (flag) {
                prevX = currX;
                prevY = currY;
                currX = e.clientX - canvas.offsetLeft;
                currY = e.clientY - canvas.offsetTop;
                draw();
            }
        }
    }
 
    </script>

Le canvas

Code html :

S�lectionner tout - Visualiser dans une fen�tre � part

<canvas id="can" width="455" height="741" style="position:absolute;top:3%;left:35%;border:2px solid;"></canvas>

Si tout fonctionne bien, alors pourquoi fais-je appel � vous ?
Tout simplement car je veux ouvrir mon fichier sur Chrome sur une tablette android, et l� c'est le drame.

-Le double clic fonctionne bien pour tracer un cercle
-L'image et mon css se chargent bien en local
-Le tra�age au doigt ne fonctionne pas du tout !!

Quelques infos compl�mentaires :
-J'ai ajout� touchstart, touchmove et touchend dans mes addEventListener sans aucune am�lioration.
-Au d�part le double tap pour tracer un cercle ne fonctionnait pas, Chrome android faisait un zoom sur la page � la place. J'ai donc du d�sactiver cette fonctionnalit� en ajoutant la ligne : <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' >.
-J'ai l'impression que Chrome android prend le d�placement du doigt comme un d�filement de la page internet (voire d'une actualisation de la page si on est tout en haut), j'ai donc essay� de bloquer le d�filement de page en CSS. Cela n'a rien r�solu.

Code css :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
html, body {
	margin: 0; 
	height: 100%; 
	overflow: hidden
}

-J'ai vu des mentions de e.touches[0].clientX qui remplacerait e.clientX dans la version tactile; j'ai tent� mais sans succ�s.

J'arrive au bout de mes comp�tences alors que tout cela est si proche de fonctionner mais il doit me manquer un d�tail quelque part !!
Merci de m'avoir lue et encore un autre merci � ceux qui s'int�resseront � mon probl�me