[Snap.svg] Evénements touche sur support tactile

**Archimède** · 07/03/2022, 21h26

Salut, en reprenant cet exemple simple là, comment utiliser touchstart,touchmove et touchend pour avoir un déplacement sur smartphone qui fonctionne avec snap svg ?

Code html :

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
88
89
90
91
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #stage {
            background-color: white;
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</head>
<body>
    <svg id="stage"></svg>
    <script>
        const w=1000, h=400, R=10;
        const curxmin=3*w/8, curxmax=5*w/8;
        var curx=w/2, xo=0;
 
        var svg = document.getElementById('stage');
        var paper=Snap('#stage');
       
        paper.attr({
            viewBox:[0,0,w,h].join(',')
        });
 
        function xSVG(svg,posx) {
            const svgMatrix = svg.getScreenCTM();
            return (posx - svgMatrix.e) / svgMatrix.a;  
        }
 
        const zoneinterdite=paper.g(
            paper.line(0,h/2,curxmin,h/2),
            paper.line(curxmin,h/2-R,curxmin,h/2+R),
            paper.line(curxmax,h/2,w,h/2),
            paper.line(curxmax,h/2-R,curxmax,h/2+R)
            ).attr({
              stroke: 'red',
              strokeWidth: 1
        });
 
        const barre=paper.line(curxmin,h/2,curxmax,h/2).attr({
              stroke: 'black',
              strokeWidth: 1
        });
 
        
        const track=paper.circle(curx,h/2,R).attr({
                    fill: 'black',
                    cursor: 'pointer'
        });
 
        const moveFunc = function(dx) {
            const maxRight = curxmax - R;
            const minLeft = curxmin + R;
            let curx = xo + xSVG(svg, dx);
        
            if (curx > maxRight) curx = maxRight;
            if (curx < minLeft) curx = minLeft;
            this.attr({
                cx: curx
            });
        };
 
        const startFunc = function() {
            xo=parseInt(this.attr("cx"));
        };
 
        const stopFunc = function() {
        }; 
 
       track.touchstart( startFunc );
       track.touchmove( moveFunc );
       track.touchend( stopFunc );
 
        track.drag(moveFunc, startFunc, stopFunc);
    </script>
 
</body>
</html>

Merci car je n'arrive pas à utiliser les bonnes signatures de touchEvent pour que ça fonctionne correctement.

**NoSmoking** · 08/03/2022, 14h34

Bonjour,
Snap SVG est assez ancien et sa gestion des supports tactiles est basé sur la reconnaissance de la méthode createTouch du Document.

Effectivement dans le code source on trouve :

Code :

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

1
2
3
4
5
6
7
8
9
Snap.plugin(function (Snap, Element, Paper, glob) {
    var elproto = Element.prototype,
    has = "hasOwnProperty",
    supportsTouch = "createTouch" in glob.doc,
    events = [
        "click", "dblclick", "mousedown", "mousemove", "mouseout",
        "mouseover", "mouseup", "touchstart", "touchmove", "touchend",
        "touchcancel"
    ],

Cette méthode est, presque, exclusivement supportée par Safari et dépréciée pour la majeure partie des navigateurs, donc Snap SVG à un gros train de retard

Tu as deux solutions pour t'en sortir :
• Écrire tes propres fonctions de gestion, en utilisant les « events pointer » en lieu et place des « events mouse », avec l'avantage que cela fonctionnera même sur support tactile. Ce n'est pas franchement insurmontable.

↪ PointerEvent.

• Faire croire à Snap SVG qu'il est en présence d'un support tactile compatible. Dans ce cas il faut que le test "createTouch" in glob.doc renvoi true.

Pour y arriver il suffit de mettre la ligne de code suivante avant l'insertion de la bibli Snap SVG :

Code html :

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

1
2
3
4
<script>
if( !("createTouch" in document)) document.createTouch = function(){return {}};   // hack tactile
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg.js"></script>