Сделайте фон холста ткани прозрачным прямоугольником - PullRequest
Новая
       6

Сделайте фон холста ткани прозрачным прямоугольником

0 голосов
/ 26 февраля 2019

Мне нужен цветной слой холста по ткани, и у него прозрачное прямоугольное отверстие.

Что я пробовал: 

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()

Затем я получил целую зеленую область холста.Прямоугольник прозрачен, но не применим к цвету фона холста.Что мне делать?

1 Ответ

0 голосов
/ 27 февраля 2019

Вы можете использовать прямоугольник и путь.На 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>
...