Question

我想要一种彩色的帆布覆盖面料，并且有一个透明的直肠孔。

我尝试过的事情：

var canvas = new fabric.Canvas(el,{
  width:100,
  height:100,
  backgroundColor:'rgb(0,0,0)'
})
var rect = new fabric.Rect({
  left:25,
  top:25,
  width:50,
  height:50,
  fill:'#00000000'//transparent fill color
})
canvas.add(rect)
canvas.renderAll()

然后我得到了整个绿色的画布区域。矩形是透明的，但不适用于画布背景颜色。我该怎么办？

Answer 1

您可以使用矩形和路径。在clipPath属性上放置路径。

(function() {
 canvas = new fabric.Canvas('ex1');
 canvas.backgroundColor="red";
  var path = new fabric.Path('M0,0  h500 v500 h-500 z M150,150 v200 h200 v-200 z', {
    left: -250,
    top: -250,
    fill: 'red',
    strokeWidth: 0,
    fill: false,
    fillRule :'nonzero',
    width:500,
    height:500
    
});
  var rect = new fabric.Rect({
    width: 500,
    height: 500,
    fill: 'green',
     strokeWidth: 0,
    left:0,
    top:0,
    evented:0,
    selectable:0
  });
  rect.clipPath = path;
  canvas.add(rect);
})()

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.min.js"></script>
<canvas id="ex1" width="500" height="500"></canvas>

使织物画布背景具有透明矩形

1 个答案: