Question

我需要使用一个图层来屏蔽所有画布对象。 Layer是我从URL加载的png文件。对此最好的方法是什么？

试过这种方式。但我需要剪辑每个对象。我认为这不是正确的方法。

<button id="btnAddText" >Add Text</button>
<canvas id="divPad" style="height: 500px; width: 500px"></canvas>




var canvas = new fabric.Canvas('divPad', {
      width: $("#divPad").width(),
      height: $("#divPad").height()
  });


  $("#btnAddText").click(function () {

      var text = new fabric.Text("Testing", {
          fontSize: 50,
          fill: "green",
          top: 50,
          left:50
      }); 
      canvas.add(text);
      text.globalCompositeOperation = 'source-atop';
      canvas.renderAll();
  });
  var background;
  fabric.Image.fromURL('http://www.clipartbest.com/cliparts/Rid/Bjo/RidBjoni9.png', function (objects, options) {
      background = objects;
      background.set({
          left: 0,
          top: 0,
          scaleY: canvas.height / background.width,
          scaleX: canvas.width / background.width,
          selectable: false
      });
      canvas.add(background);
      canvas.renderAll();
  });

Answer 1

我创建了一个jsfiddle，我创建了一些对象，并为它们分配了模式。那是你需要的吗？

如果是这样的话，我会在下面显示一个片段和我的jsfiddle exmaple。

javascript，实际上是主要代码：

   var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'yellow';

//create circle object
 var circle = new fabric.Circle({
                  radius: 60, 
                  fill: 'red', 
                  left: 50, 
                  top: 100
                });
            canvas.add(circle);
addPattern(circle);

//create square object
var square = new fabric.Rect({
              left: 180, 
              top: 140,
              fill: 'green',
              width: 140,
              height: 180
            });
            canvas.add(square);
addPattern(square);
canvas.renderAll();



function addPattern(obj){
  fabric.util.loadImage('http://fabricjs.com/assets/pug_small.jpg', function (img) {

                obj.fill = new fabric.Pattern({
                    source: img,
                    repeat: 'no-repeat'
                }); 
                canvas.renderAll();
    });
}

jsfiddle：http://jsfiddle.net/tornado1979/t6vf5z5w/

希望有所帮助，祝你好运。

Answer 2

fabric.loadSVGFromURL('/userboards/board-img/mask-no-dots.svg', function(objects,options){
        $scope.overlayPath = new fabric.util.groupSVGElements(objects,options);
        $scope.$apply();

    }, function(item, object){

    });


$scope.cutByMask = function(){
        if($scope.overlayPath){
            canvas.remove($scope.overlayPath);
        }

        $scope.overlayPath
            //.scaleToHeight(533)
            .set({
                //left: 797, top: 1368,
                scaleX: $scope.zoom / 100, scaleY: $scope.zoom / 100
                //, width: 2811, height: 533
            })
            .setCoords();

        canvas.centerObject($scope.overlayPath);

        canvas.add($scope.overlayPath);

        canvas.moveTo($scope.overlayPath, 0);

        canvas.remove($scope.overlayPath);
        canvas.clipTo = function(ctx) {
            if($scope.overlayPath){
                $scope.overlayPath.render(ctx);
            }
        };

        canvas.renderAll();
    };

使用SVG蒙版变体。在这里你加载SVG掩码（SVG只有一个路径），然后你的所有图像将被这个掩码裁剪。

我没有找到PNG裁剪的变种，但是如果你需要它 - 你应该在

中使用它

canvas.clipTo

fabric.js如何用png图像掩盖或剪裁画布

2 个答案: