--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/cutout/prototype/cutout.js Tue Jul 24 19:06:31 2012 +0200
@@ -0,0 +1,256 @@
+DRAW_MODE_RECT = 1;
+DRAW_MODE_POLY = 2;
+DRAW_MODE_FREE = 3;
+DRAW_MODE_EDIT = 4;
+
+paper.install(window);
+
+var draw_mode,
+ currentpath,
+ raster,
+ group,
+ ghostRaster,
+ polygonClosed,
+ polygonClosingTimeout,
+ clipPolygon,
+ isSelecting,
+ dragMode,
+ segmentIndex,
+ imageRatio,
+ placeHolder;
+
+$(function() {
+
+ var hitOptions = {
+ segments: true,
+ stroke: true,
+ fill: true,
+ tolerance: 5
+ };
+
+ tool = new Tool();
+
+ function setDrawMode(mode) {
+ draw_mode = mode;
+ $(".modeselector li").each(function() {
+ if (+$(this).attr("drawmode") == mode) {
+ $(this).addClass("selected");
+ } else {
+ $(this).removeClass("selected");
+ }
+ })
+ if (draw_mode != DRAW_MODE_EDIT) {
+ polygonClosed = true;
+ initDraw();
+ }
+ }
+
+ function delPath() {
+ if (typeof currentpath !== "undefined") {
+ currentpath.remove();
+ currentpath = undefined;
+ }
+ if (typeof clipPolygon !== "undefined") {
+ clipPolygon.remove();
+ clipPolygon = undefined;
+ }
+ }
+
+ function startPath() {
+ currentpath = new Path();
+ currentpath.strokeWidth = 3;
+ currentpath.strokeColor = '#ff0000';
+ clipPolygon = new Path();
+ ghostRaster.opacity = .7;
+ if (typeof group !== "undefined") {
+ group.remove();
+ }
+ group = new Group(clipPolygon, raster);
+ group.clipped = true;
+ }
+
+ function finishEdit() {
+ polygonClosed = true;
+ currentpath.strokeColor = '#ff0000';
+ currentpath.strokeWidth = 1;
+ currentpath.fillColor = '#000000';
+ currentpath.closed = true;
+ ghostRaster.opacity = .3;
+ setDrawMode(DRAW_MODE_EDIT);
+ }
+
+ function initDraw() {
+ delPath();
+ if (typeof ghostRaster !== "undefined") {
+ ghostRaster.opacity = 1;
+ }
+ view.draw();
+ }
+
+ function setPolygonTimeout() {
+ window.clearTimeout(polygonClosingTimeout);
+ polygonClosingTimeout = setTimeout(function() {
+ switch (draw_mode) {
+ case DRAW_MODE_FREE:
+ currentpath.simplify();
+ currentpath.flatten(10);
+ clipPolygon.remove();
+ group.remove();
+ clipPolygon = currentpath.clone();
+ group = new Group(clipPolygon, raster);
+ group.clipped = true;
+ break;
+ }
+ finishEdit();
+ view.draw();
+ }, 3000);
+ }
+
+ function calcPreview() {
+ if (typeof currentpath !== "undefined") {
+ var _b = currentpath.bounds,
+ _w = _b.width + 20,
+ _h = _b.height + 20,
+ _data = view.canvas.getContext('2d').getImageData(_b.x - 10, _b.y - 10, _w , _h ),
+ _c = document.createElement('canvas');
+ _c.width = Math.floor(Math.max(160,_w,_h*4/3));
+ _c.height = Math.floor(Math.max(120,_h,_w*3/4));
+ _c.getContext('2d').putImageData(_data, Math.floor((_c.width - _w) / 2), Math.floor((_c.height - _h) / 2));
+ $("#preview").attr("src", _c.toDataURL());
+ } else {
+ $("#preview").attr("src", "placeholder.png");
+ }
+ }
+
+ tool.onMouseDown = function(event) {
+ switch (draw_mode) {
+ case DRAW_MODE_FREE:
+ case DRAW_MODE_POLY:
+ if (polygonClosed) {
+ delPath();
+ startPath();
+ polygonClosed = false;
+ }
+ if (currentpath.segments.length == 0) {
+ currentpath.add(event.point);
+ clipPolygon.add(event.point);
+ }
+ currentpath.add(event.point);
+ clipPolygon.add(event.point);
+ setPolygonTimeout();
+ break;
+ case DRAW_MODE_RECT:
+ delPath();
+ startPath();
+ for (var _i = 0; _i < 4; _i++) {
+ currentpath.add(event.point);
+ clipPolygon.add(event.point);
+ }
+ currentpath.closed = true;
+ clipPolygon.closed = true;
+ break;
+ case DRAW_MODE_EDIT:
+ var hitResult = project.hitTest(event.point, hitOptions);
+ if (hitResult && hitResult.item) {
+ dragMode = hitResult.type;
+ } else {
+ dragMode = undefined;
+ }
+ switch(dragMode) {
+ case "segment":
+ segmentIndex = hitResult.segment.index;
+ break;
+ case "stroke":
+ segmentIndex = hitResult.location.index + 1;
+ currentpath.insert(segmentIndex, event.point);
+ clipPolygon.insert(segmentIndex, event.point);
+ break;
+ }
+ break;
+ }
+ }
+
+ tool.onMouseMove = function(event) {
+ switch (draw_mode) {
+ case DRAW_MODE_EDIT:
+ var hitResult = project.hitTest(event.point, hitOptions);
+ if (hitResult && hitResult.item) {
+ currentpath.strokeColor = '#0080ff';
+ currentpath.selected = true;
+ document.body.style.cursor = "pointer";
+ } else {
+ currentpath.strokeColor = '#ff0000';
+ currentpath.selected = false;
+ document.body.style.cursor = "";
+ }
+ break;
+ }
+
+ }
+
+ tool.onMouseDrag = function(event) {
+ switch (draw_mode) {
+ case DRAW_MODE_POLY:
+ currentpath.lastSegment.point = event.point;
+ clipPolygon.lastSegment.point = event.point;
+ setPolygonTimeout();
+ break;
+ case DRAW_MODE_FREE:
+ currentpath.add(event.point);
+ clipPolygon.add(event.point);
+ setPolygonTimeout();
+ break;
+ case DRAW_MODE_RECT:
+ clipPolygon.segments[1].point.x = clipPolygon.segments[2].point.x = currentpath.segments[1].point.x = currentpath.segments[2].point.x = event.point.x;
+ clipPolygon.segments[3].point.y = clipPolygon.segments[2].point.y = currentpath.segments[3].point.y = currentpath.segments[2].point.y = event.point.y;
+ break;
+ case DRAW_MODE_EDIT:
+ switch (dragMode) {
+ case "fill":
+ currentpath.translate(event.delta);
+ clipPolygon.translate(event.delta);
+ break;
+ case "segment":
+ case "stroke":
+ currentpath.segments[segmentIndex].point = event.point;
+ clipPolygon.segments[segmentIndex].point = event.point;
+ break;
+ }
+ break;
+ }
+ }
+
+
+ tool.onMouseUp = function(event) {
+ switch (draw_mode) {
+ case DRAW_MODE_RECT:
+ finishEdit();
+ break;
+ }
+ }
+
+ var canvas = document.getElementById('playground');
+ paper.setup(canvas);
+
+ $(".modeselector li").click(function() {
+ setDrawMode(+$(this).attr("drawmode"));
+ })
+
+ var img = new Image();
+
+ setDrawMode(DRAW_MODE_RECT);
+
+ img.onload = function() {
+ imageRatio = Math.min(1, view.bounds.width / img.width, view.bounds.height / img.height);
+ ghostRaster = new Raster(this);
+ ghostRaster.scale(imageRatio);
+ ghostRaster.position = new Point(ghostRaster.bounds.width / 2, ghostRaster.bounds.height / 2);
+ raster = ghostRaster.clone();
+ initDraw();
+ }
+// img.src ="http://www.photo.rmn.fr/LowRes2/TR1/Q83I0G/03-015341.jpg"
+ img.src = "04-500790.jpg";
+
+ window.setInterval(calcPreview,500);
+
+});
\ No newline at end of file