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