Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide object in canvas

I want to know that, Is it possible to hide text object in canvas using fabric js?
I don't want to remove object, as I need it in further use, so just want to hide it. I searched a lot, but didn't work anything. Here is my code of fabric js.

var text = new fabric.Text("test", {
                    fontFamily: 'Times new roman',
                    fontSize: fabric.util.parseUnit(fontSize),
                    left: (startPosition.x + pointer.x) / 2,
                    top: ((startPosition.y + pointer.y) / 2) + 10,
                    slope: ((startPosition.y - pointer.y) / (startPosition.x - pointer.x)),
                    originX: 'center',
                    originY: 'center',
                });

canvas.add(text);
//canvas.getObjects(text).style.display = "none";
//text.prop.hide();
//text.hide = function () {
//text.set({
//        css: {"display":"none"},
//        selectable: false
//    });
//};

All suggestions are exceptable.

like image 790
Trusha Savsani Avatar asked Jun 03 '16 05:06

Trusha Savsani


1 Answers

In my case I've used opacity to show/hide object, not only text. Example:

if (logoPosition == 5) {
  logo.opacity = 0;
}
else {
  logo.opacity = 1;
}

P.S. do not forgot to re-render your canvas after that change. I've used canvas.renderAll();

Found this advice here: https://groups.google.com/forum/#!topic/fabricjs/cbdFgTH7UXc

like image 66
gorodezkiy Avatar answered Oct 07 '22 07:10

gorodezkiy