マスク外の透明なファブリックを使用したマスクオブジェクト

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

これは、あなたを助け、そのまさにあなたの後にわからないが、ここでフィドルあるかもしれません。私は、先のアウトでパスを使用

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/