paperjs/paper.js — Issue #80: The Division Raster example doen't work properly in direct javaScript  
Author: lovelyd
Created: 2012-03-08 14:56:07+00:00
State: open

According to http://paperjs.org/tutorials/getting-started/using-javascript-directly/,

By following the golden rule of

" - Register a handler for when the DOM is ready, since we cannot
work with the canvas before that.
- Tell the paper object to setup a Project and a View for our
canvas. Instead of passing the canvas object, we can also pass the
canvas element's ID as a String. In PaperScript, this happens
automatically through the canvas="ID" attribute.
- Access all Paper.js classes and objects through the paper
object, since they are no longer global.
- Use Math functions instead of operators on Point and Size.
- Draw the view at the end, since that is now only automatically
handled when a view.onFrame handler is installed."

However, the result doesn't work properly. The [layer.children.length]
is on every loop is different from the paperscript one.

My code:

// Only executed our code once the DOM is ready.
$(function(){
paper.install(window);
// Create an empty project and a view for the canvas:
paper.setup('raster-canvas');

// Create a raster item using the image with id='profile-img'
var raster = new Raster('profile-img');

// Make the raster invisible:
raster.visible = false;

// 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:
var tool = new Tool();
tool.minDistance = 5;

tool.onMouseMove = function(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;

// 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;
}

var topLeft = bounds.topLeft;

var path = new Path.Rectangle(topLeft, size.ceil());
path.fillColor = raster.getAverageColor(path);
/* view.draw(); */
path.moveBelow(child);

var secondPath = path.clone();
size = size.floor();
secondPath.position += isLandscape
? [size.width, 0]
: [0, size.height];
secondPath.fillColor = raster.getAverageColor(secondPath);
/* view.draw(); */
secondPath.moveBelow(path);

// Remove the path which was split:
child.remove();
// Avoid continuing looping through the rest of the items:
return;
}
}
}
view.onResize = function(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);
view.draw();
}
view.onResize();
});