如何使用HTML5和Raphael JS構建圖像編輯器？

Question

我正在構建一個web應用程序，爲此我正在使用HTML5和Raphael js構建一個基本的圖像編輯器。我已經實現像一些特點：

1. 調整大小
   水平翻轉和/或垂直
   將
   

一些更多的功能，我需要實現的是：

1. 作物
   撤消/重做
   更改背景顏色和不透明度。

我主要是在尋找作物和撤消功能。任何人都可以幫助我實現這個使用RaphaelJs和HTML5？

我的代碼：

var r, c, d; 

    var paper = Raphael("editor", 600,450); 


    var canvas = document.getElementById('editor'); 
    canvas.style.backgroundColor='gray'; 

    $scope.current; 


    var someFunction = function(e) { 
     e.data('dragged', false); 
     e.drag(dragmove, dragstart, dragend); 

     for(var i in elements) { 
      var thisShape = elements[i]; 
      var ft = paper.freeTransform(thisShape,{draw:['bbox']}); 
      ft.hideHandles(); 
      thisShape.click(function(){ 
       paper.forEach(function(el) { 
        if(el.freeTransform.handles.bbox != null) 
         el.freeTransform.hideHandles(); 
       }); 

       this.freeTransform.showHandles(); 
      }); 
     } 
    }; 

    function dragmove(dx, dy, x, y, e) { 

     this.transform(this.current_transform+'T'+dx+','+dy); 
    } 

    function dragstart(x, y, e) { 
     this.current_transform = this.transform(); 

    } 

    function dragend(e) { 
     this.current_transform = this.transform(); 
    }; 


    var elements = []; 

    $scope.raph = function() { 

     c= paper.circle(40,40,40).click(function() { 
      someFunction(this); 
      $scope.current= this; 
     }); 
     r = paper.rect(50, 60, 100,100,25).click(function() { 
      someFunction(this); 
      $scope.current= this; 
     }); 

     d = paper.rect(70, 60, 100,100,25).click(function() { 
      someFunction(this); 
      $scope.current= this; 
     }); 

     elements.push(c,r,d); 

     c.attr({ 
      fill:'red', 
      cursor:'pointer' 

     }); 
     r.attr({ 
      fill:'green', 
      cursor:'pointer' 
     }); 

     d.attr({ 
      fill:'blue', 
      cursor:'pointer' 
     }); 

    }; 

    $scope.back = function() { 
     $scope.current.toBack(); 
    } 
    $scope.front = function() { 
      $scope.current.toFront(); 

    } 
    $scope.clear = function() { 
     paper.clear(); 
    }; 
    $scope.flips = function() { 
     $scope.current.rotate(180); 
    }; 

    //function for cloning element 
    $scope.clones = function() { 
      var n = $scope.current.clone(); 
     n.attr("x",$scope.current.attr("x")+100); 
     $scope.current = n; 

     elements.push(n); 
     n.click(function() { 
      someFunction(this); 
     }); 
     }; 

    $scope.changing= function (e) { 

     $scope.opacity=event.target.value; 

     if($scope.current != null){ 
      $scope.current.attr({ 
       opacity:$scope.opacity 
      }) 
     } 
    } 

Answer 1

UPDATE：只是用Fabric.js http://fabricjs.com/kitchensink/，雖然你可能需要添加暗室http://mattketmo.github.io/darkroomjs/進行裁剪。

---

爲RaphaelJS一些建議：

• 調整大小：http://raphaeljs.com/reference.html#Element.transformc.transform('S1.5,1.5')
• 翻轉：有負比例調整在任一方向（S-1,1）

• 阻力：http://raphaeljs.com/reference.html#Element.drag，也可以考慮設置超載像http://wesleytodd.com/2013/4/drag-n-drop-in-raphael-js.html

• 改變顏色和東西：http://raphaeljs.com/reference.html#Element.attr

• 撤消 - 你將不得不保存一個操作列表/以前的狀態爲反向？
• 作物 - 最有可能的是，您將使用遮罩/覆蓋圖（圖層：http://raphaeljs.com/reference.html#Element.toBack）在raphael中創建UI，以將指令發送到服務器端API以處理繁重的工作。你可以在瀏覽器中處理光柵圖像，但如果人們上傳的照片就可以快速重載內存限制（認爲：未經編輯12MP照片）

退房東西像畫板http://ianli.com/sketchpad/或評論暗室http://mattketmo.github.io/darkroomjs/的想法。

您可以隨時嘗試探索現有網絡編輯器的源代碼，例如Google +（這主要是一個笑話）。