[Snap.svg] Fixer des limites sur un drag and drop

**Archimède** · 05/02/2022, 21h53

Salut, je n'arrive pas à gérer un déplacement à la souris qui soit fluide en ajoutant des conditions limites. Comment gérer proprement ma fonction moveFunc comme dans l'exemple démonstratif ci-dessous. Le but étant de réaliser un input range en pur SVG si je règle ce problème là.

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
 
<!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;  
        }
 
        let 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
        });
 
        let barre=paper.line(curxmin,h/2,curxmax,h/2).attr({
              stroke: 'black',
              strokeWidth: 1
        });
 
        
        let track=paper.circle(curx,h/2,R).attr({
                    fill: 'black',
                    cursor: 'pointer'
        });
 
        var moveFunc = function(dx) { 
                    curx=xo + xSVG(svg,dx);
                    if ( (curx>=curxmin+R) && (curx<=curxmax-R) ) {
                        this.attr({
                                cx: curx
                        });
                    }
                    else return;
        };
 
        var startFunc = function() {
            xo=parseInt(this.attr("cx"));
        };
 
        var stopFunc = function() {
        }; 
 
        track.drag(moveFunc, startFunc, stopFunc);
    </script>
 
</body>
</html>

Merci

**NoSmoking** · 06/02/2022, 08h57

Bonjour,

je n'arrive pas à gérer un déplacement à la souris qui soit fluide en ajoutant des conditions limites.

la fluidité me semble être au rendez-vous, par contre le curseur peut ne pas aller en limite si le déplacement est trop rapide.

C'est dans ta fonction moveFunc, effectivement, que cela se passe. Tu ne mets pas à jour la position si il y a dépassement.

Exemple de gestion :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
const moveFunc = function(dx) {
    const maxRight = curxmax - R;
    const minLeft = curxmin + R;
    // position théorique
    let curx = xo + xSVG(svg, dx);
    // test sur limite ou avec Math.max/min
    if (curx > maxRight) curx = maxRight;
    if (curx < minLeft) curx = minLeft;
    // déplacement, on pourrait gérer s'il y a eu modif
    this.attr({
        cx: curx
    });
};

**Archimède** · 06/02/2022, 10h27

Merci, nickel !

[Snap.svg] Fixer des limites sur un drag and drop

JavaScript

Vue hybride

Discussions similaires

Partager

Partager