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> |
