2016-06-03 3 views
3

Я хочу знать, что Можно ли скрыть текстовый объект в холсте с помощью js js?
Я не хочу удалять объект, поскольку он мне нужен в дальнейшем, поэтому просто хочу скрыть его. Я много искал, но ничего не работал. Вот мой код ткани 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 
// }); 
//}; 

Все предложения являются исключением.

ответ

0

Используйте переключатель запросов, чтобы скрыть объект.

// 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"; 

Надеется, что это помогает

+0

Спасибо за быстрый ответ, у меня есть запрос, поскольку у меня есть текстовый объект, Как я могу получить х, у, высота и ширина объекта? – 3rdEye

+0

Вы разместили бы этот текстовый объект в DOM, найдите координаты того места, где у вас есть этот объект. –

+0

Еще один запрос, после установки свойства display-none, получит ли значение текстового объекта, даже если он не отображается на холсте? – 3rdEye

0

В моем случае я использовал opacity, чтобы показать/скрыть объект, а не только текст. Пример:

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

P.S. не забывайте повторно отображать свой холст после этого изменения. Я использовал canvas.renderAll();

Найдено этот совет здесь: https://groups.google.com/forum/#!topic/fabricjs/cbdFgTH7UXc

Смежные вопросы