1 DRAW_MODE_RECT = 1;

     2 DRAW_MODE_POLY = 2;

     3 DRAW_MODE_FREE = 3;

     4 DRAW_MODE_EDIT = 4;

     5 

     6 paper.install(window);

     7 

     8 var draw_mode,

     9     currentpath,

    10     raster,

    11     group,

    12     ghostRaster,

    13     polygonClosed,

    14     polygonClosingTimeout,

    15     clipPolygon,

    16     isSelecting,

    17     dragMode,

    18     segmentIndex,

    19     imageRatio,

    20     placeHolder;

    21 

    22 $(function() {

    23     

    24     var hitOptions = {

    25         segments: true,

    26         stroke: true,

    27         fill: true,

    28         tolerance: 5

    29     };

    30     

    31     tool = new Tool();

    32     

    33     function setDrawMode(mode) {

    34         draw_mode = mode;

    35         $(".modeselector li").each(function() {

    36             if (+$(this).attr("drawmode") == mode) {

    37                 $(this).addClass("selected");

    38             } else {

    39                 $(this).removeClass("selected");

    40             }

    41         })

    42         if (draw_mode != DRAW_MODE_EDIT) {

    43             polygonClosed = true;

    44             initDraw();

    45         }

    46     }

    47     

    48     function delPath() {

    49         if (typeof currentpath !== "undefined") {

    50             currentpath.remove();

    51             currentpath = undefined;

    52         }

    53         if (typeof clipPolygon !== "undefined") {

    54             clipPolygon.remove();

    55             clipPolygon = undefined;

    56         }

    57     }

    58     

    59     function startPath() {

    60         currentpath = new Path();

    61         currentpath.strokeWidth = 3;

    62         currentpath.strokeColor = '#ff0000';

    63         clipPolygon = new Path();

    64         ghostRaster.opacity = .7;

    65         if (typeof group !== "undefined") {

    66             group.remove();

    67         }

    68         group = new Group(clipPolygon, raster);

    69         group.clipped = true;

    70     }

    71     

    72     function finishEdit() {

    73         polygonClosed = true;

    74         currentpath.strokeColor = '#ff0000';

    75         currentpath.strokeWidth = 1;

    76         currentpath.fillColor = '#000000';

    77         currentpath.closed = true;

    78         ghostRaster.opacity = .3;

    79         setDrawMode(DRAW_MODE_EDIT);

    80     }

    81     

    82     function initDraw() {

    83         delPath();

    84         if (typeof ghostRaster !== "undefined") {

    85             ghostRaster.opacity = 1;

    86         }

    87         view.draw();

    88     }

    89     

    90     function setPolygonTimeout() {

    91         window.clearTimeout(polygonClosingTimeout);

    92         polygonClosingTimeout = setTimeout(function() {

    93             switch (draw_mode) {

    94                 case DRAW_MODE_FREE:

    95                     currentpath.simplify();

    96                     currentpath.flatten(10);

    97                     clipPolygon.remove();

    98                     group.remove();

    99                     clipPolygon = currentpath.clone();

   100                     group = new Group(clipPolygon, raster);

   101                     group.clipped = true;

   102                 break;

   103             }

   104             finishEdit();

   105             view.draw();

   106         }, 3000);

   107     }

   108     

   109     function calcPreview() {

   110         if (typeof currentpath !== "undefined") {

   111             var _b = currentpath.bounds,

   112                 _w = _b.width + 20,

   113                 _h = _b.height + 20,

   114                 _data = view.canvas.getContext('2d').getImageData(_b.x - 10, _b.y - 10, _w , _h ),

   115                 _c = document.createElement('canvas');

   116             _c.width = Math.floor(Math.max(160,_w,_h*4/3));

   117             _c.height = Math.floor(Math.max(120,_h,_w*3/4));

   118             _c.getContext('2d').putImageData(_data, Math.floor((_c.width - _w) / 2), Math.floor((_c.height - _h) / 2));

   119             $("#preview").attr("src", _c.toDataURL());

   120         } else {

   121             $("#preview").attr("src", "placeholder.png");

   122         }

   123     }

   124     

   125     tool.onMouseDown = function(event) {

   126         switch (draw_mode) {

   127             case DRAW_MODE_FREE:

   128             case DRAW_MODE_POLY:

   129                 if (polygonClosed) {

   130                     delPath();

   131                     startPath();

   132                     polygonClosed = false;

   133                 }

   134                 if (currentpath.segments.length == 0) {

   135                     currentpath.add(event.point);

   136                     clipPolygon.add(event.point);

   137                 }

   138                 currentpath.add(event.point);

   139                 clipPolygon.add(event.point);

   140                 setPolygonTimeout();

   141             break;

   142             case DRAW_MODE_RECT:

   143                 delPath();

   144                 startPath();

   145                 for (var _i = 0; _i < 4; _i++) {

   146                     currentpath.add(event.point);

   147                     clipPolygon.add(event.point);

   148                 }

   149                 currentpath.closed = true;

   150                 clipPolygon.closed = true;

   151             break;

   152             case DRAW_MODE_EDIT:

   153                 var hitResult = project.hitTest(event.point, hitOptions);

   154                 if (hitResult && hitResult.item) {

   155                     dragMode = hitResult.type;

   156                 } else {

   157                     dragMode = undefined;

   158                 }

   159                 switch(dragMode) {

   160                     case "segment":

   161                         segmentIndex = hitResult.segment.index;

   162                     break;

   163                     case "stroke":

   164                         segmentIndex = hitResult.location.index + 1;

   165                         currentpath.insert(segmentIndex, event.point);

   166                         clipPolygon.insert(segmentIndex, event.point);

   167                     break;

   168                 }

   169             break;

   170         }

   171     }

   172     

   173     tool.onMouseMove = function(event) {

   174         switch (draw_mode) {

   175             case DRAW_MODE_EDIT:

   176                 var hitResult = project.hitTest(event.point, hitOptions);

   177                 if (hitResult && hitResult.item) {

   178                     currentpath.strokeColor = '#0080ff';

   179                     currentpath.selected = true;

   180                     document.body.style.cursor = "pointer";

   181                 } else {

   182                     currentpath.strokeColor = '#ff0000';

   183                     currentpath.selected = false;

   184                     document.body.style.cursor = "";

   185                 }

   186             break;

   187         }

   188         

   189     }

   190     

   191     tool.onMouseDrag = function(event) {

   192         switch (draw_mode) {

   193             case DRAW_MODE_POLY:

   194                 currentpath.lastSegment.point = event.point;

   195                 clipPolygon.lastSegment.point = event.point;

   196                 setPolygonTimeout();

   197             break;

   198             case DRAW_MODE_FREE:

   199                 currentpath.add(event.point);

   200                 clipPolygon.add(event.point);

   201                 setPolygonTimeout();

   202             break;

   203             case DRAW_MODE_RECT:

   204                 clipPolygon.segments[1].point.x = clipPolygon.segments[2].point.x = currentpath.segments[1].point.x = currentpath.segments[2].point.x = event.point.x;

   205                 clipPolygon.segments[3].point.y = clipPolygon.segments[2].point.y = currentpath.segments[3].point.y = currentpath.segments[2].point.y = event.point.y;

   206             break;

   207             case DRAW_MODE_EDIT:

   208                 switch (dragMode) {

   209                     case "fill":

   210                         currentpath.translate(event.delta);

   211                         clipPolygon.translate(event.delta);

   212                     break;

   213                     case "segment":

   214                     case "stroke":

   215                         currentpath.segments[segmentIndex].point = event.point;

   216                         clipPolygon.segments[segmentIndex].point = event.point;

   217                     break;

   218                 }

   219             break;

   220         }

   221     }

   222     

   223     

   224     tool.onMouseUp = function(event) {

   225         switch (draw_mode) {

   226             case DRAW_MODE_RECT:

   227                 finishEdit();

   228             break;

   229         }

   230     }

   231     

   232     var canvas = document.getElementById('playground');

   233     paper.setup(canvas);

   234     

   235     $(".modeselector li").click(function() {

   236         setDrawMode(+$(this).attr("drawmode"));

   237     })

   238     

   239     var img = new Image();

   240     

   241     setDrawMode(DRAW_MODE_RECT);

   242     

   243     img.onload = function() {

   244         imageRatio = Math.min(1, view.bounds.width / img.width, view.bounds.height / img.height);

   245         ghostRaster = new Raster(this);

   246         ghostRaster.scale(imageRatio);

   247         ghostRaster.position = new Point(ghostRaster.bounds.width / 2, ghostRaster.bounds.height / 2);

   248         raster = ghostRaster.clone();

   249         initDraw();

   250     }

   251 //    img.src ="http://www.photo.rmn.fr/LowRes2/TR1/Q83I0G/03-015341.jpg"

   252     img.src = "04-500790.jpg";

   253     

   254     window.setInterval(calcPreview,500);

   255         

   256 });