scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2025-01-01 02:38:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Clean up DivisionRaster example.

Browse source
This commit is contained in:
Jonathan Puckey 2011-06-19 15:01:53 +02:00
parent faf9b453d1
commit fcb7a74610
1 changed files with 32 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
examples/Scripts/DivisionRaster.html
View file

@ -8,46 +8,33 @@
<script type="text/paperscript" canvas="canvas"> <script type="text/paperscript" canvas="canvas">
// Based on 'JPEG Raster' by Jonathan Puckey: // Based on 'JPEG Raster' by Jonathan Puckey:
// http://www.flickr.com/photos/puckey/3179779686/in/photostream/ // http://www.flickr.com/photos/puckey/3179779686/in/photostream/
// Create a raster item using the image with id='lenna' // Create a raster item using the image with id='lenna'
var raster = new Raster('lenna'); var raster = new Raster('lenna');
var group = new Group();
function onResize(event) {
// 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);
group.children = [path];
}
// Call onResize directly:
onResize();
// Make the raster invisible: // Make the raster invisible:
raster.visible = false; raster.visible = false;
// The mouse has to drag at least 30pt until the next onMouseDrag // 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
// event is fired: // event is fired:
tool.minDistance = 5; tool.minDistance = 5;
function onMouseMove(event) { function onMouseMove(event) {
// Each drag event, iterate through the children of group: // Each drag event, iterate through the children of group:
for (var i = 0; i < group.children.length; i++) { for (var i = 0; i < layer.children.length; i++) {
var child = group.children[i]; var child = layer.children[i];
var bounds = child.bounds; var bounds = child.bounds;
if (bounds.contains(event.point)) { if (bounds.contains(event.point)) {
// If the mouse position intersects with the bounding // If the mouse position intersects with the bounding
// box of the path, we're going to split it into two paths: // box of the path, we're going to split it into two paths:
var size = bounds.size; var size = bounds.size;
var isLandscape = size.width > size.height; var isLandscape = size.width > size.height;
// If the path is in landscape orientation, we're going to // If the path is in landscape orientation, we're going to
// split the path horizontally, otherwise vertically: // split the path horizontally, otherwise vertically:
if (isLandscape) { if (isLandscape) {
@ -55,12 +42,12 @@
} else { } else {
size.height /= 2; size.height /= 2;
} }
var topLeft = bounds.topLeft.floor(); var topLeft = bounds.topLeft.floor();
var path = new Path.Rectangle(topLeft, size.ceil()); var path = new Path.Rectangle(topLeft, size.ceil());
path.fillColor = raster.getAverageColor(path); path.fillColor = raster.getAverageColor(path);
path.moveBelow(child); path.moveBelow(child);
var secondPath = path.clone(); var secondPath = path.clone();
size = size.floor(); size = size.floor();
secondPath.position += isLandscape secondPath.position += isLandscape
@ -68,15 +55,31 @@
: [0, size.height]; : [0, size.height];
secondPath.fillColor = raster.getAverageColor(secondPath); secondPath.fillColor = raster.getAverageColor(secondPath);
secondPath.moveBelow(path); secondPath.moveBelow(path);
// Remove the path which was split: // Remove the path which was split:
child.remove(); child.remove();
// Avoid continuing looping through the rest of the items: // Avoid continuing looping through the rest of the items:
return; return;
} }
} }
} }
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();
</script> </script>
</head> </head>
<body> <body>