Created by Christopher Manning
forked from christophermanning's block: Simple Path Editor
license: mit |
Created by Christopher Manning
forked from christophermanning's block: Simple Path Editor
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Simple Path Editor</title> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script> | |
<style type="text/css"> | |
body { | |
padding: 0 | |
margin: 0 | |
} | |
</style> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
config = {"path" : "M0,4.5L7,4.5L5,2L7,4.5L5,7L7,4.5", "lineJoin": "round", "scale": 50} | |
gui = new dat.GUI({width: 500}) | |
pathChanger = gui.add(config, "path") | |
pathChanger.onChange(function(value) { | |
path.attr("d", value) | |
}) | |
scaleChanger = gui.add(config, "scale", 1, 100) | |
scaleChanger.onChange(function(value) { | |
path.attr("transform", "scale("+value+")") | |
}) | |
lineJoinChanger = gui.add(config, "lineJoin", ["miter", "round", "bevel"]) | |
lineJoinChanger.onChange(function(value) { | |
path.attr("stroke-linejoin", value) | |
}) | |
width = window.innerWidth, | |
height = window.innerHeight | |
svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
path = svg.append("path") | |
.attr("d", config["path"]) | |
.attr("stroke", "black") | |
.attr("fill", "none") | |
.attr("stroke-linejoin", config["lineJoin"]) | |
.attr("transform", "scale("+config["scale"]+")") | |
</script> | |
</body> | |
</html> |