paper
Version:
The Swiss Army Knife of Vector Graphics Scripting
54 lines (48 loc) • 1.57 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Shapes</title>
<link rel="stylesheet" href="../css/style.css">
<script type="text/javascript" src="../../dist/paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
if (window.Worker) { // Check if Browser supports the Worker API.
var worker = new Worker("Worker.js");
// Create two paths, and send them to the worker to perform a boolean
// operation on them.
var circle = new Path.Circle({
center: [200, 200],
radius: 100,
fillColor: 'red'
});
var rectangle = new Path.Rectangle({
point: [200, 200],
size: [200, 200],
fillColor: 'blue'
});
var data = [
circle.exportJSON(),
rectangle.exportJSON()
];
console.log('Sent', data);
worker.postMessage(data);
// The worker sends the result back in a message, from which we can then
// create a new path item and siplay it.
worker.onmessage = function(event) {
var data = event.data;
if (data) {
console.log('Received', data);
var result = project.activeLayer.importJSON(data);
result.fillColor = 'yellow';
result.fillColor.alpha = 0.5;
result.position += [400, 0];
result.fullySelected = true;
}
};
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>