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

6 years ago · 92585f3e44
3 changed files with 148 additions and 9 deletions
--- a/css/stylesheet.css
+++ b/css/stylesheet.css
@ -1,6 +1,6 @@
 body{
 	position: relative;
-	margin:1em;
+	margin:0;
 	padding:0;
 	font-size: 120%;
 	line-height: 1.4;
@ -21,10 +21,10 @@ h1{

 div#sliders{
 	position: fixed;
-	width: 1000px;
-	height: 500px;
+	width: 500px;
+	height: 400px;
 	top:60px;
-	left:340px;
+	right:100px;
 }
 div#slider{
 	float: left;
@ -45,3 +45,10 @@ div.controlpoint{
 #rotterdam li{
 	list-style: none;
 }
+
+
+#curve {
+	padding : 1em;
+	height: 100vh;
+	overflow: scroll;
+}
--- a/index.html
+++ b/index.html
@ -50,6 +50,21 @@
            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>

    <div id="curve">
@ -132,4 +147,3 @@
    </div>
 </body>
 </html>
-
--- a/index2.html
+++ b/index2.html
@ -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>