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

Improve Division Raster example.

Browse source
This commit is contained in:
Jonathan Puckey 2013-03-09 18:51:04 +01:00
parent c9e95d2c01
commit ee141ca98d
1 changed files with 31 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
examples/Paperjs.org/DivisionRaster.html
View file

@ -15,58 +15,41 @@ var raster = new Raster('mona');
// Make the raster invisible: // Make the raster invisible:
raster.visible = false; raster.visible = false;
// Create a seperate layer that the paths will be placed on: var lastPos = view.center;
var layer = new Layer(); function moveHandler(event) {
if (lastPos.getDistance(event.point) < 10)
return;
lastPos = event.point;
// The mouse has to drag at least 5pt until the next onMouseDrag var size = this.bounds.size.clone();
// event is fired:
tool.minDistance = 5;
function onMouseMove(event) {
// Each drag event, iterate through the children of group:
for (var i = 0; i < layer.children.length; i++) {
var child = layer.children[i];
var bounds = child.bounds;
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:
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) {
size.width /= 2;
} else {
size.height /= 2;
}
var topLeft = bounds.topLeft.floor(); size /= isLandscape ? [2, 1] : [1, 2];
var path = new Path.Rectangle(topLeft, size.ceil());
var path = new Path.Rectangle({
point: this.bounds.topLeft.floor(),
size: size.ceil(),
onMouseMove: moveHandler
});
path.fillColor = raster.getAverageColor(path); path.fillColor = raster.getAverageColor(path);
path.insertBelow(child);
var secondPath = path.clone(); var path = new Path.Rectangle({
size = size.floor(); point: isLandscape
secondPath.position += isLandscape ? this.bounds.topCenter.ceil()
? [size.width, 0] : this.bounds.leftCenter.ceil(),
: [0, size.height]; size: size.floor(),
secondPath.fillColor = raster.getAverageColor(secondPath); onMouseMove: moveHandler
secondPath.insertBelow(path); });
path.fillColor = raster.getAverageColor(path);
// Remove the path which was split: this.remove();
child.remove();
// Avoid continuing looping through the rest of the items:
return;
}
}
} }
function onResize(event) { function onResize(event) {
layer.removeChildren(); project.activeLayer.removeChildren();
// Transform the raster so that it fills the bounding rectangle // Transform the raster so that it fills the bounding rectangle
// of the view: // of the view:
@ -74,8 +57,11 @@ function onResize(event) {
// Create a path that fills the view, and fill it with // Create a path that fills the view, and fill it with
// the average color of the raster: // the average color of the raster:
var path = new Path.Rectangle(view.bounds); new Path.Rectangle({
path.fillColor = raster.getAverageColor(path); rectangle: view.bounds,
fillColor: raster.getAverageColor(view.bounds),
onMouseMove: moveHandler
});
} }
</script> </script>
</head> </head>