使用外部蒙版透明 fabricjs 蒙版对象答案

【问题标题】：Mask objects with outside mask transparent fabricjs使用外部蒙版透明 fabricjs 蒙版对象
【发布时间】：2016-10-06 11:36:07
【问题描述】：

我在画布上制作了一个矩形的蒙版，我需要蒙版之外的任何东西的不透明度为 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;

【问题讨论】：

标签： javascript transparency fabricjs mask

【解决方案1】：

这可能会对你有所帮助，不确定它到底是什么，但这里是小提琴。我使用带目的地的路径

    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/

【讨论】：