javascript - 使用外部 mask 透明 fabricjs mask 物体

Question

我在 Canvas 上制作了一个矩形 mask ，我需要 mask 外的任何东西都具有 0.8 的不透明度，因此 mask 外的所有对象都被视为不透明请看一下 fiddle 。

http://jsfiddle.net/ZxYCP/637/

 var img01URL = 'https://www.google.com/images/srpr/logo4w.png';
 var img02URL = 'http://fabricjs.com/lib/pug.jpg';
 var canvas = new fabric.Canvas('c');


 canvas.clipTo = function(ctx) {

 ctx.beginPath();
 ctx.fillStyle = 'gray';
 ctx.rect(180, 10, 200, 200);
 ctx.fill();
 ctx.closePath();
 ctx.save();
 }
 canvas.controlsAboveOverlay = true;
 canvas.renderAll();

 var pugImg = new Image();
     pugImg.onload = function(img) {
 var pug = new fabric.Image(pugImg, {
     angle: 45,
     width: 500,
     height: 500,
     left: 230,
     top: 50,
     scaleX: 0.3,
     scaleY: 0.3,

  });
  canvas.add(pug);
  };
  pugImg.src = img02URL;

Answer 1

这可能对您有帮助，但不确定它到底是什么，但这里是 fiddle 。我使用带有目标输出的路径

    var path = new fabric.Path('M 850,710 H 350 V 120 H 850 Z M 797,170 H 400 V 662 H 797 Z');

    path.set({
        top: 0,
        left: 0,
        fill:'rgba(255,255,255,0.95)',
        lockMovementX:true,
        lockMovementY:true,
        lockRotation:true,
        lockScalingFlip:true,
        lockScalingX:true,
        lockScalingY:true,
        hasControls: false,
        hasRotatingPoint: false,
        selectable: false,
        evented: false,
        globalCompositeOperation: 'destination-out' 
});

http://jsfiddle.net/matthew_hardern/fmgXt/699/