用外部遮罩透明织物遮罩对象

Question

我在画布上做了一个矩形遮罩，遮罩外面的任何东西都需要有0.8的不透明度，所以遮罩外面的所有对象都是不透明的请看看这把小提琴。

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

这可能会对你有所帮助，不确定这正是你想要的，但这是小提琴。我使用带有destination-out

的路径

    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/