YES svg brush bad version 2 full lib
by Nick Hulea
HTML
<script src="http://cdn.eyahuska.com/paper-full.js"></script>
<canvas resize="true" id="canvas-1" style="width:100%;"></canvas>
<script type="text/paperscript" canvas="canvas-1">
var g, c, r, i, v;
var rArray = [];
topGroup = new Group(),
mousePath = null;
var rastera = new Raster({
source: 'http://cdn.eyahuska.com/one.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();
topGroup.addChild(rasterb);
topGroup.insertChild(0, new Path());
topGroup.clipped = true;
});
var l = project.importSVG(document.getElementById('svg'), {
//expandShapes: true,
onLoad: function(item) {}
});
lg = l.children.yes;
var ig = lg.children[0];
var ig2 = lg.children[1];
var ig3 = lg.children[2];
var ig4 = ig.unite(ig2);
var ig5 = ig4.unite(ig3);
//console.log(ig5);
//ig5.fullySelected = true;
//console.log(l.length);
tool.fixedDistance = 25;
function onMouseMove(event) {
l.position = event.point;
}
function onMouseDown(event) {
ig5.position = event.point;
mousePath = topGroup.children[0];
addBrushStroke();
}
function onMouseDrag(event) {
if (!mousePath) return;
ig5.position = event.point;
addBrushStroke();
}
function onMouseUp(event) {
mousePath = null;
// console.log(project.layers)
}
function onResize(event) {
rastera.fitBounds(view.bounds, true);
rasterb.fitBounds(view.bounds, true);
rasterb.bringToFront();
topGroup.bringToFront();
if (rArray.length) {
...
CSS
html{overflow:hidden}