在画布中隐藏对象答案

【问题标题】：Hide object in canvas在画布中隐藏对象
【发布时间】：2016-10-03 01:51:51
【问题描述】：

我想知道，是否可以使用fabric js在画布中隐藏文本对象？
我不想删除对象，因为我需要进一步使用它，所以只想隐藏它。我搜索了很多，但没有任何工作。这是我的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
//    });
//};

所有建议都是例外。

【问题讨论】：

标签： javascript asp.net-mvc canvas html5-canvas html2canvas

【解决方案1】：

在我的例子中，我使用opacity 来显示/隐藏对象，而不仅仅是文本。示例：

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

附：不要忘记在更改后重新渲染您的画布。我用过canvas.renderAll();

在此处找到此建议：https://groups.google.com/forum/#!topic/fabricjs/cbdFgTH7UXc

【讨论】：

如果您已经在对象上设置了自定义不透明度，则此方法不是很好。现在您必须担心存储/恢复不透明度。

【解决方案2】：

使用查询选择器隐藏对象。

// Pass the appropriate values to query selector of the canvas which we need to hide, In your code snippet you have given it as center, replace it with numeric values 

var query="canvas[x= fill the value of x ][y= fill the value of y][height= 'give the height'][width='give the width']";

// Finding the canvas
var canvas=document.querySelector(query);

// Hide the canvas
canvas.style.display="none";

希望对你有帮助

【讨论】：

感谢您的快速回复，我有一个问题，因为我有一个文本对象，如何获取对象的 x、y、高度和宽度？
你应该把这个文本对象放在 DOM 中，找到你有这个对象的那个地方的坐标。
再查询一次，设置 display-none 属性后，我会得到文本对象的值，即使它没有显示在画布上吗？
是的，您应该能够获取文本对象的值，即使它是隐藏的。