2011-06-18 21:32:07 -04:00
|
|
|
<!-- <!DOCTYPE html> -->
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
|
|
<title>Example</title>
|
|
|
|
|
<link rel="stylesheet" href="../css/style.css">
|
|
|
|
|
<script type="text/javascript" src="../../dist/paper.js"></script>
|
|
|
|
|
<script type="text/paperscript" canvas="canvas">
|
|
|
|
|
// Based on 'JPEG Raster' by Jonathan Puckey:
|
|
|
|
|
// http://www.flickr.com/photos/puckey/3179779686/in/photostream/
|
2011-06-19 09:01:53 -04:00
|
|
|
|
2011-06-18 21:32:07 -04:00
|
|
|
// Create a raster item using the image with id='lenna'
|
|
|
|
|
var raster = new Raster('lenna');
|
|
|
|
|
|
|
|
|
|
// Make the raster invisible:
|
|
|
|
|
raster.visible = false;
|
2011-06-19 09:01:53 -04:00
|
|
|
|
|
|
|
|
// Create a seperate layer that the paths will be placed on:
|
|
|
|
|
var layer = new Layer();
|
|
|
|
|
|
|
|
|
|
// The mouse has to drag at least 5pt until the next onMouseDrag
|
2011-06-18 21:32:07 -04:00
|
|
|
// event is fired:
|
|
|
|
|
tool.minDistance = 5;
|
2011-06-19 09:01:53 -04:00
|
|
|
|
2011-06-18 21:32:07 -04:00
|
|
|
function onMouseMove(event) {
|
|
|
|
|
// Each drag event, iterate through the children of group:
|
2011-06-19 09:01:53 -04:00
|
|
|
for (var i = 0; i < layer.children.length; i++) {
|
|
|
|
|
var child = layer.children[i];
|
2011-06-18 21:32:07 -04:00
|
|
|
var bounds = child.bounds;
|
2011-06-19 09:01:53 -04:00
|
|
|
|
2011-06-18 21:32:07 -04:00
|
|
|
if (bounds.contains(event.point)) {
|
|
|
|
|
// If the mouse position intersects with the bounding
|
|
|
|
|
// box of the path, we're going to split it into two paths:
|
2011-06-19 09:01:53 -04:00
|
|
|
|
2011-06-18 21:32:07 -04:00
|
|
|
var size = bounds.size;
|
|
|
|
|
var isLandscape = size.width > size.height;
|
2011-06-19 09:01:53 -04:00
|
|
|
|
2011-06-18 21:32:07 -04:00
|
|
|
// If the path is in landscape orientation, we're going to
|
|
|
|
|
// split the path horizontally, otherwise vertically:
|
|
|
|
|
if (isLandscape) {
|
|
|
|
|
size.width /= 2;
|
|
|
|
|
} else {
|
|
|
|
|
size.height /= 2;
|
|
|
|
|
}
|
2011-06-19 09:01:53 -04:00
|
|
|
|
2011-06-18 21:32:07 -04:00
|
|
|
var topLeft = bounds.topLeft.floor();
|
|
|
|
|
var path = new Path.Rectangle(topLeft, size.ceil());
|
|
|
|
|
path.fillColor = raster.getAverageColor(path);
|
|
|
|
|
path.moveBelow(child);
|
2011-06-19 09:01:53 -04:00
|
|
|
|
2011-06-18 21:32:07 -04:00
|
|
|
var secondPath = path.clone();
|
|
|
|
|
size = size.floor();
|
|
|
|
|
secondPath.position += isLandscape
|
|
|
|
|
? [size.width, 0]
|
|
|
|
|
: [0, size.height];
|
|
|
|
|
secondPath.fillColor = raster.getAverageColor(secondPath);
|
|
|
|
|
secondPath.moveBelow(path);
|
2011-06-19 09:01:53 -04:00
|
|
|
|
2011-06-18 21:32:07 -04:00
|
|
|
// Remove the path which was split:
|
|
|
|
|
child.remove();
|
2011-06-19 09:01:53 -04:00
|
|
|
|
2011-06-18 21:32:07 -04:00
|
|
|
// Avoid continuing looping through the rest of the items:
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
2011-06-19 09:01:53 -04:00
|
|
|
|
|
|
|
|
function onResize(event) {
|
|
|
|
|
layer.removeChildren();
|
|
|
|
|
|
|
|
|
|
// Transform the raster so that it fills the bounding rectangle
|
|
|
|
|
// of the view:
|
|
|
|
|
raster.fitBounds(view.bounds, true);
|
|
|
|
|
|
|
|
|
|
// Create a path that fills the view, and fill it with
|
|
|
|
|
// the average color of the raster:
|
|
|
|
|
var path = new Path.Rectangle(view.bounds);
|
|
|
|
|
path.fillColor = raster.getAverageColor(path);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Call onResize directly:
|
|
|
|
|
onResize();
|
2011-06-18 21:32:07 -04:00
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<canvas id="canvas" resize keepalive="true"></canvas>
|
|
|
|
|
<img width="512" height="512" id="lenna" style="display: none;" src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAAXAAD/4QMraHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjAtYzA2MCA2MS4xMzQ3NzcsIDIwMTAvMDIvMTItMTc6MzI6MDAgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDUzUgTWFjaW50b3NoIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkUxMDE3MzA5NDAwODExRTBCQjkwRDlDMzRBOTRBODAyIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkUxMDE3MzBBNDAwODExRTBCQjkwRDlDMzRBOTRBODAyIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTEwMTczMDc0MDA4MTFFMEJCOTBEOUMzNEE5NEE4MDIiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTEwMTczMDg0MDA4MTFFMEJCOTBEOUMzNEE5NEE4MDIiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7/7gAOQWRvYmUAZMAAAAAB/9sAhAASDQ0NDw0TDw8THBIQEhwhGBMT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
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
