raster drawing shape paint add save
semi working yeah !
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 r;
var rArray = [];
var imagesArray = ['one.jpg', 'two.jpg', 'three.jpg', 'four.jpg', 'five.jpg'];
var background = new Raster({
source: 'http://cdn.eyahuska.com/six.jpg',
position: view.center,
size: view.bounds
});
background.on('load', function() {
loaded = true;
onResize();
});
var r = new Raster({
source: 'http://cdn.eyahuska.com/five.jpg',
position: view.center,
size: view.bounds
});
r.on('load', function() {
loaded = true;
onResize();
});
path = new Path.Circle();
g = new Group([path, r]);
g.clipped = true;
var carryLength = 0;
function onMouseMove(event) {
var step = event.delta;
step.angle = step.angle + 90;
stepReci = step.normalize() * 500 * (1 / step.length);
var top = event.middlePoint + stepReci;
var bottom = event.middlePoint - stepReci;
carryLength = carryLength + step.length;
if (carryLength > stepReci.length) {
path.add(top);
path.insert(0, bottom);
path.smooth();
carryLength = 0;
}
}
function onMouseDown(event) {
init();
path.position = event.point;
}
function init() {
var num = Math.floor(Math.random() * 5); // 0...6
imagesrc = 'http://cdn.eyahuska.com/' + imagesArray[num];
var r = new Raster({
source: imagesrc,
position: view.center,
size: view.bounds
});
r.on('load', function() {
loaded = true;
onResize();
});
rArray.push(r);
path = new Path.Circle();
g = new Group([path, r]);
g.clipped = true;
}
function...