如何在 fabric js 中删除组对象外的文本？

Question

如何从组对象外删除那些文本。
我在 fabricjs 中使用文本框和组
这里是源代码

var iText4 = new fabric.Textbox('abcdefghxyz', {
  left: 50,
  top: 100,
  fontFamily: 'Helvetica',
  width: 30,
  styles: {
    0: {
      0: { textBackgroundColor: 'blue', fill: 'green' },
      1: { textBackgroundColor: '#faa' },
      2: { textBackgroundColor: 'lightblue' },
    }
  }
});

var group = new fabric.Group([ iText4 ], {
  left: 150,
  top: 100,
  width: 60,
});

var canvas = new fabric.Canvas('c');
canvas.add(group);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id='c' width='500' height='400'></canvas>

Answer 1

如果你也只能隐藏这段文字，你或许可以使用fabric.js

2.4.0版本发布的clipPath

var iText4 = new fabric.Textbox('abcdefghxyz', {
  left: 50,
  top: 100,
  fontFamily: 'Helvetica',
  width: 30,
  styles: {
    0: {
      0: { textBackgroundColor: 'blue', fill: 'green' },
      1: { textBackgroundColor: '#faa' },
      2: { textBackgroundColor: 'lightblue' },
    }
  }
});

var group = new fabric.Group([ iText4 ], {
  left: 150,
  top: 100,
  width: 60,
});

group.clipPath = new fabric.Rect({
  width: group.width,
  height: group.height,
  top: - group.height / 2,
  left: - group.width / 2
});

var canvas = new fabric.Canvas('c');
canvas.add(group);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id='c' width='500' height='400'></canvas>

如何在 fabric js 中删除组对象外的文本？

how to remove text outside group object in fabric js?

text

fabricjs