Javascript 如何使用HTML5和Raphael JS构建图像编辑器？

我正在构建一个web应用程序，为此我正在使用

HTML5

和

Raphael js

构建一个基本图像编辑器。我实现了一些功能，如：

调整大小
水平和/或垂直翻转
拖动

我还需要实现以下功能：

裁剪
撤消/重做
更改背景颜色和不透明度

我主要是寻找作物和撤消功能。有谁能帮我用

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
            })
        }
    }

---

更新：只需使用Fabric.js，尽管裁剪时可能需要添加暗室

---

对拉斐尔的一些建议：

• 调整大小：

  c.transform（'S1.5,1.5'）

• 翻转：在任意方向以负比例调整大小（

  S-1,1

  ）

拖动：也考虑设置过载，如

• 更改颜色和内容：

• 撤消--您必须保存一个操作列表/以前的状态以进行反转
• 裁剪——最有可能的情况是在raphael中创建UI，使用掩码/覆盖（layers:）将指令发送到服务器端API以处理繁重的工作。您可以在浏览器中操作光栅图像，但如果人们上传照片，可能会很快使内存限制过载（想想：未编辑的12MP照片）

看看画板或暗室之类的东西，看看有什么想法

---

您可以尝试探索现有web编辑器的源代码，如Google+。。。（这主要是一个笑话）。

如果你能提供一个更简洁的问题/答案，并用一个简洁的例子说明问题，我想用Raphael js裁剪图像。我没有找到一种方法来做。是的，但是你需要定义你想要的作物。新图像、要保存的内容，或者看起来像剪辑一样的裁剪，或者其他内容。它是一个svg图像，任何图像或任何东西。我想裁剪图像并替换为原始图像。这有什么意义？如果裁剪图像并将其替换为原始图像，则不会发生任何更改。。。？