Question

我在画布上制作了一个矩形的面具，我需要遮罩外面的任何东西都有0.8的不透明度，所以遮罩外面的所有物体都被视为不透明请看看小提琴。

 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

这可能对你有所帮助，不确定它究竟是你的追随者，但这里是小提琴。我使用带目的地的路径

    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/

使用外部遮罩透明fabricjs遮罩对象

1 个答案: