varia
/
relearn-curved-slider-webpage
14
0
Fork 3
Code Issues Pull Requests Releases Wiki Activity
Browse Source

Merge branch 'master' of s/relearn-curved-slider-webpage into master

master
mb 6 years ago
committed by Gitea
parent
b97fa0db2b 14a53f7f5e
commit
92585f3e44
3 changed files with 148 additions and 9 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      css/stylesheet.css
  2. 16
      index.html
  3. 118
      index2.html

15
css/stylesheet.css
View File

@ -1,6 +1,6 @@
body{ body{
position: relative; position: relative;
margin:1em; margin:0;
padding:0; padding:0;
font-size: 120%; font-size: 120%;
line-height: 1.4; line-height: 1.4;
@ -21,10 +21,10 @@ h1{
div#sliders{ div#sliders{
position: fixed; position: fixed;
width: 1000px; width: 500px;
height: 500px; height: 400px;
top:60px; top:60px;
left:340px; right:100px;
} }
div#slider{ div#slider{
float: left; float: left;
@ -45,3 +45,10 @@ div.controlpoint{
#rotterdam li{ #rotterdam li{
list-style: none; list-style: none;
} }
#curve {
padding : 1em;
height: 100vh;
overflow: scroll;
}

16
index.html
View File

@ -50,6 +50,21 @@
curve : { width:4, color:"#333", cap:"round" } curve : { width:4, color:"#333", cap:"round" }
}); });
}); });
// scroll
$(document).ready(function() {
$('#slider').bind('slide.pathslider', function(event, slider){
var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
$('#curve').scrollTop(scrollPos);
});
$('#slider2').bind('slide.pathslider', function(event, slider){
var scrollPos = slider.percent * ( $('#curve')[0].scrollHeight - $(window).height() ) / 100
$('#curve').scrollTop(scrollPos);
});
});
</script> </script>
<div id="curve"> <div id="curve">
@ -132,4 +147,3 @@
</div> </div>
</body> </body>
</html> </html>

118
index2.html
View File

@ -0,0 +1,118 @@
<!DOCTYPE html>
<html>
<!-- source: https://bl.ocks.org/mbostock/8027637 -->
<head>
<meta charset="utf-8">
<style>
path {
fill: none;
stroke: #000;
stroke-width: 8px;
}
line {
fill: none;
stroke: red;
stroke-width: 0;
}
circle {
fill: red;
}
rect {
fill: none;
cursor: crosshair;
pointer-events: all;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var points = [[600,600],[600, 400],[300,300], [400, 600]];
var width = 960,
height = 500;
var line = d3.svg.line()
.interpolate("cardinal");
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var path = svg.append("path")
.datum(points)
.attr("d", line);
var line = svg.append("line");
var circle = svg.append("circle")
.attr("cx", -10)
.attr("cy", -10)
.attr("r", 60);
var isDown = false;
svg.append("rect")
.attr("width", width)
.attr("height", height)
.on("mousedown", function(){
svg.on("mousemove", mousemoved);
})
.on("mouseup")
function mousemoved() {
var m = d3.mouse(this),
p = closestPoint(path.node(), m);
line.attr("x1", p[0]).attr("y1", p[1]).attr("x2", m[0]).attr("y2", m[1]);
circle.attr("cx", p[0]).attr("cy", p[1]);
}
function closestPoint(pathNode, point) {
var pathLength = pathNode.getTotalLength(),
precision = 8,
best,
bestLength,
bestDistance = Infinity;
// linear scan for coarse approximation
for (var scan, scanLength = 0, scanDistance; scanLength <= pathLength; scanLength += precision) {
if ((scanDistance = distance2(scan = pathNode.getPointAtLength(scanLength))) < bestDistance) {
best = scan, bestLength = scanLength, bestDistance = scanDistance;
}
}
// binary search for precise estimate
precision /= 2;
while (precision > 0.5) {
var before,
after,
beforeLength,
afterLength,
beforeDistance,
afterDistance;
if ((beforeLength = bestLength - precision) >= 0 && (beforeDistance = distance2(before = pathNode.getPointAtLength(beforeLength))) < bestDistance) {
best = before, bestLength = beforeLength, bestDistance = beforeDistance;
} else if ((afterLength = bestLength + precision) <= pathLength && (afterDistance = distance2(after = pathNode.getPointAtLength(afterLength))) < bestDistance) {
best = after, bestLength = afterLength, bestDistance = afterDistance;
} else {
precision /= 2;
}
}
best = [best.x, best.y];
best.distance = Math.sqrt(bestDistance);
return best;
function distance2(p) {
var dx = p.x - point[0],
dy = p.y - point[1];
return dx * dx + dy * dy;
}
}
</script>
<html>
Write Preview
Loading…
Cancel
Save