mirror of
https://github.com/scratchfoundation/paper.js.git
synced 2024-12-28 17:02:24 -05:00
53 lines
1.5 KiB
HTML
53 lines
1.5 KiB
HTML
<!DOCTYPE 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>
|