You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

65 lines
1.4 KiB

<!DOCTYPE html>
<title>Braid</title>
<code mode="text/html">
<html>
<head>
<meta charset="utf-8">
<style>
body {
background-color: #ffffcc;
}
</style>
<script type="text/javascript" src="paper.js"></script>
<script type="text/javascript" src="jsoneditor.min.js"></script>
<script type="text/javascript" src="braid.js" canvas="canvas"></script>
<script type="text/javascript">
var params;
function draw() {
paper.project.clear();
var grp = braid(params);
grp.translate(new Point(1.2, 1.2));
grp.scale(190, new Point(0,0));
}
function get_svg() {
return paper.project.exportSVG({asString: true});
}
window.onload = function() {
paper.install(window);
paper.setup(document.getElementById('canvas'));
var editor;
draw();
document.getElementById('download-svg').addEventListener('click', function() {
var svgdata = 'data:image/svg+xml;utf8,' + encodeURIComponent(get_svg());
var a = document.createElement('a');
a.download = 'export.svg';
a.href = svgdata;
document.body.appendChild(a);
a.click();
});
document.getElementById('new').addEventListener('click', function() {
draw();
});
}
</script>
</head>
<body>
<canvas id="canvas" style="width: 500px; height: 500px;" resize></canvas>
<hr>
<button id="download-svg">download svg</button>
<button id="new">new</button>
<br>
<div id="params"></div>
</body>
</html>