fabric.js 如何用 png 图像遮罩或剪辑画布答案

【问题标题】：fabric.js how to mask or clip the canvas with png imagefabric.js 如何用 png 图像遮罩或剪辑画布
【发布时间】：2015-12-01 21:31:47
【问题描述】：

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

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

http://jsfiddle.net/w396uhnv/

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

【问题讨论】：

据我了解，无法通过 PNG 剪辑。但是，如果您可以创建单路径 SVG - 这很简单）
使用image.globalCompositeOperation = 'source-atop'; 是正确的方法。掩蔽图像应该是最后绘制到画布上的图像。
你的方法已经不错了。你不会发现任何更简单的东西。绘制 png 形状，将 globalCompositeOperation 设置为“source-atop”，绘制艺术品，然后将 globalCompositeOperation 重置为“source-over”

标签： html canvas fabricjs

【解决方案1】：

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

如果是这样，我会在下面显示一个 sn-p 和我的 jsfiddle 示例。

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/

希望有帮助，祝你好运。

【讨论】：

是否可以在形状内拖动位置图像图案并调整其大小

【解决方案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

【讨论】：