如何使用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 +（这主要是一个笑话）。