表示されないときはリロードしてください。
Built with blockbuilder.org
Last active
January 15, 2016 05:17
-
-
Save shimizu/c5a3fb5ac5f992e8215b to your computer and use it in GitHub Desktop.
円の外周から外周にラインを引く
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <title>円の外周から外周にラインを引く</title> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <style> | |
| html, body { | |
| margin: 0px; | |
| height: 0px; | |
| } | |
| html, body, svg { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| </style> | |
| <body> | |
| <svg id="stage"></svg> | |
| <script> | |
| var svg = d3.select("svg"); | |
| var w = document.querySelector("#stage").clientWidth; | |
| var h = document.querySelector("#stage").clientHeight; | |
| var r = Math.min(w,h) / 10; | |
| var margin = r; | |
| svg.selectAll("circle").data([[],[]]).enter().append("circle").attr({ | |
| "fill":"none", | |
| "stroke":"black", | |
| "r":r | |
| }); | |
| svg.append("line").attr("stroke", "black") | |
| setInterval(animation, 1000) | |
| function animation(args) { | |
| //円１の中心座標 | |
| var cx1 = Math.floor(Math.random() * (w-margin)) + margin; | |
| var cy1 = Math.floor(Math.random() * (h-margin)) + margin; | |
| //円２の中心座標 | |
| var cx2 = Math.floor(Math.random() * (w-margin)) + margin; | |
| var cy2 = Math.floor(Math.random() * (h-margin)) + margin; | |
| //円を追加する | |
| var circle = svg.selectAll("circle").data([[cx1, cy1], [cx2, cy2]]) | |
| circle.transition().duration(500) | |
| .attr({ | |
| "cx":function(d){ return d[0] }, | |
| "cy":function(d){ return d[1] } | |
| }); | |
| //外周の座標を計算する | |
| var cp = circuitsPoint(cx1, cy1, cx2, cy2, r) | |
| //円１の外周から、円２の外周までラインを引く | |
| svg.select("line").transition().duration(500) | |
| .attr({ | |
| "x1": cx1 + cp.ox , | |
| "y1": cy1 + cp.oy, | |
| "x2": cx2 - cp.ox, | |
| "y2": cy2 - cp.oy, | |
| "stroke": "black" | |
| }) | |
| } | |
| function circuitsPoint(cx1, cy1, cx2, cy2, r){ | |
| var atan2 = Math.atan2(cy2 - cy1, cx2 - cx1); | |
| var ox = Math.cos(atan2) * r; | |
| var oy = Math.sin(atan2) * r; | |
| return { ox:ox, oy:oy } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment