基於SVG路徑的Fabric.js多重裁剪

Question

我有一個具有很多svg路徑的畫布，我的目標是拖放圖像到畫布上， 我能夠做到這一點，當一個圖像放在我想要基於svg路徑刪除圖像的畫布，它在哪裏被刪除，

我發佈了多次相同的問題，這次我將我的頁面鏈接分享給你們，請看看js代碼，我不明白那裏有什麼問題，當我使用ctx.rect（）方法用矩形剪裁圖像時，當我拖動圖像時，矩形不移動，但是當我在畫布上繪製相同的路徑時正在與圖像一起移動？

我想繪製並拖動圖像放在路徑中。

這裏是鏈接到網頁中，我使用一個樣本SVG文件從fabricjs.com/kitchensink/頁

http://qa.newagesme.com/wyz_editor/ 拖放到顯示在頁面上化身的裙子下降的圖像。

Answer 1

讓我告訴你我的想法，當你把一個圖像插入的路徑，所以這條路可能是它的基於濾波器參數，如果你想移動路徑和所有在它裏面，使用組是一個方式，我認爲。實際上這張圖片並不在路徑中，但看起來像是這樣。我真的很希望fabricjs可以爲對象創建另一個子樹，因此對象中的每個子對象都只能在這個對象內部活動，但顯然這個想法不適合當前版本。我想嘗試製作一個，仍然在學習fabric.js源代碼。 http://jsfiddle.net/hellomaya/kjzZR/5/

這是isPointInPoly函數從這裏改編的https://github.com/substack/point-in-polygon，以及來自fabricjs.com的過濾器創建代碼。

你的問題很有趣，在類似的產品中也很有用。

var canvas = new fabric.Canvas('c1'); 
var src = "http://fiddle.jshell.net/img/logo.png"; 
canvas.backgroundColor = "#ccc"; 
canvas.renderAll(); 

var padding = 0; 

fabric.Image.fromURL(src, function (img) { 

    img.set({ 
     originX: 'left', 
     originY: 'top', 
     left: 120, 
     top: 20 
    }); 

    var points = [{ 
     x: 185, 
     y: 0 
    }, { 
     x: 250, 
     y: 100 
    }, { 
     x: 385, 
     y: 170 
    }, { 
     x: 0, 
     y: 245 
    }]; 

    var polygon = new fabric.Polygon([{ 
     x: 185, 
     y: 0 
    }, { 
     x: 250, 
     y: 100 
    }, { 
     x: 385, 
     y: 170 
    }, { 
     x: 0, 
     y: 245 
    }], { 
     left: 0, 
     top: 0, 
     originX: 'left', 
     originY: 'top', 
     fill: 'transparent', 
     stroke: 'black', 
     stokeWidth: 1 
    }); 
    console.log(polygon.width + ":" + polygon.height); 

    canvas.add(img); 
    canvas.add(polygon); 
    polygon.selectable = false; 

    fabric.Image.filters.Redify = fabric.util.createClass({ 

     type: 'Redify', 

     applyTo: function (canvasEl) { 
      var context = canvasEl.getContext('2d'), 
       imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height), 
       data = imageData.data; 
      var width = imageData.width; 
      var height = imageData.height; 

      width = Math.ceil (img.width); 
      height = Math.ceil (img.height); 

      console.log (width + ":" + height); 
      //console.log ("left=" + img.left + ":top=" + img.top); 

      for (var i = 0, len = data.length; i < len; i += 4) { 
       //data[i + 1] = 0; 
       //data[i + 2] = 0; 
       var x = Math.ceil(i/4); 
       var y = Math.ceil(x/width); 

       x = x % width; 

       x = x * img.scaleX + img.left; 
       y = y * img.scaleY + img.top; 

       //console.log (x + ":" + y); 

       if (!isPointInPoly(points, { 
        x: x, 
        y: y 
       })) { 
        //alert (x + ":" + y); 
        //data[i + 1] = 0; 
        //data[i + 2] = 0; 
        data[i + 3] = 0; 
       } 
      } 

      context.putImageData(imageData, 0, 0); 
     } 
    }); 

    fabric.Image.filters.Redify.fromObject = function (object) { 
     return new fabric.Image.filters.Redify(object); 
    }; 

    img.filters.push(new fabric.Image.filters.Redify()); 

    canvas.on("object:moving", function() { 
     img.applyFilters(canvas.renderAll.bind(canvas)); 
    }); 

    function isPointInPoly(vs, pt) { 
     var x = pt.x, 
      y = pt.y; 

     var inside = false; 
     for (var i = 0, j = vs.length - 1; i < vs.length; j = i++) { 
      var xi = vs[i].x, 
       yi = vs[i].y; 
      var xj = vs[j].x, 
       yj = vs[j].y; 

      var intersect = ((yi > y) != (yj > y)) && (x < (xj - xi) * (y - yi)/(yj - yi) + xi); 
      if (intersect) inside = !inside; 
     } 

     return inside; 
    } 

    //polygon.selectable = false; 
});