CODEWITHSUNDEEP
textfabricjs
user3065621
user3065621

Reputation: 27

how to remove text outside group object in fabric js?

how to remove those text from outside the group object.
I am using textbox and group in fabricjs
here the source code

enter image description here

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>

Upvotes: 0

Views: 551

Answers (1)

Oro
Oro

Reputation: 2586

If you also can just hide this text, you perhaps can use clipPath that was released in 2.4.0 version of fabric.js

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>

Upvotes: 1

Related Questions