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.

116 lines
2.9 KiB

<title>JavaScript <=> PaperScript example</title>
<code mode="text/html">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="paper.js"></script>
<script type="text/javascript" src="jsoneditor.min.js"></script>
<script type="text/javascript" src="connected-lines.js" canvas="canvas"></script>
<script type="text/javascript">
var params;
function rnd_params() {
params = connected_lines_get_rnd_params();
}
function draw() {
paper.project.clear();
var grp = connected_lines(params);
grp.scale(500, 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;
rnd_params();
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() {
rnd_params();
editor.setValue(params);
draw();
});
editor = new JSONEditor(document.getElementById('params'), {
no_additional_properties: true,
disable_edit_json: true,
disable_properties: true,
disable_collapse: true,
startval: params,
schema: {
type: 'object',
title: 'Parameters',
properties: {
start_x: {
type: 'number',
minimum: 0,
maximum: 1,
},
start_y: {
type: 'number',
minimum: 0,
maximum: 1,
},
offs_x: {
type: 'number',
minimum: 0,
maximum: 0.1,
format: 'range',
step: 0.0001
},
offs_y: {
type: 'number',
minimum: 0,
maximum: 0.1,
format: 'range',
step: 0.0001
},
num_steps: {
type: 'integer',
minimum: 1,
maximum: 10,
format: 'range'
}
}
}
});
editor.on('change', function() {
params = editor.getValue();
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>