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

Posted 2023-03-25

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

【英文标题】：how to remove text outside group object in fabric js?

【发布时间】：2021-01-14 22:18:45

【问题描述】：

如何从组对象之外删除这些文本。 我在 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>

【问题讨论】：

您要删除还是隐藏它们？

可以隐藏吗？如果是，我会隐藏它，如果不是，我会删除它

【参考方案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>

【讨论】：

嗨@Raman Nikitsenka，谢谢，但目前使用的是 2.3.3 版，对我正在使用的版本有什么建议吗？

嗨 Raman Nikitsenka 我已经用 2.3.3 版解决了，谢谢jsfiddle.net/9b6hxkfd