raster drawing NO SVG changes all topGroup
this is the drawing program for raster drawing implmentation
by Nick Hulea
HTML
<script src="http://cdn.eyahuska.com/paper.js"></script>
<canvas resize="true" id="canvas-1" style="width:100%;"></canvas>
<script type="text/paperscript" canvas="canvas-1">
var b, d, g, c, r, i, v, n, a, brush;
var ebd = null;
var iArray = [];
var dArray = [],
rArray = {},
topGroup = new Group(),
mousePath = null;
var imagesArray = ['one.jpg', 'two.jpg', 'three.jpg', 'four.jpg', 'five.jpg'];
var rastera = new Raster({
source: 'http://cdn.eyahuska.com/six.jpg',
// position: view.center,
size: view.bounds
});
rastera.on('load', function() {
loaded = true;
onResize();
});
var rasterb = new Raster({
source: 'http://cdn.eyahuska.com/two.jpg',
position: view.center,
size: view.bounds
});
rasterb.on('load', function() {
loaded = true;
onResize();
});
var brush_origin = new Path.Circle({
radius: 50,
strokeColor: 'red',
strokeWeight: 10
});
brush = brush_origin.clone();
topGroup = new Group([brush, rasterb]);
topGroup.clipped = true;
tool.fixedDistance = 20;
function onMouseMove(event) {
brush.position = event.point;
}
function onMouseDown(event) {
brush = brush_origin.clone();
var num = Math.floor(Math.random() * 5); // 0...6
imagesrc = 'http://cdn.eyahuska.com/' + imagesArray[num];
rasterb.source = imagesrc;
console.log(imagesrc);
topGroup.clipped = true;
//normal array of all paths on canvas sweet!
dArray.push(brush);
//console.log(dArray);
//
//associative array of all paths on canvas sweet!
rArray[brush.id] = 0;
//console.log(rArray);
//
brush.position = event.point;
mousePath = topGroup.children[0];
addBrushStroke();
}
function onMouseDrag(event) {
if (!mousePath) return;
...