В последние несколько недель я много играл с Fabric.js, но в текстовых полях мне удалось установить текст при создании.
Есть ли какой-либо возможный способ сделать интерактивное текстовое поле, или мне нужно найти обходное решение для достижения этого? (С интерактивным текстовым полем я подразумеваю область холста, на которую я могу щелкнуть и написать прямо в нее.)
Последняя версия fabric.js включает класс IText, который включает взаимодействие для редактирования и выбора текста динамически. попробуйте код ниже с последней версией fabric.js
canvas.add(new fabric.IText('Tap and Type', {
fontFamily: 'arial black',
left: 100,
top: 100 ,
}));
Недавно я создал инструмент отображения разума с использованием fabric.js, и я столкнулся с той же проблемой.
Чтобы достичь описанного вами (изменяя текст и после создания текстовых элементов в холсте), я использовал jquery для обнаружения события keydown. Предполагая, что вы выбрали желаемый текстовый элемент в полотне ткани, следующий фрагмент изменит текст.
$(document).keydown(function(e){
var keyPressed = String.fromCharCode(e.which);
var text = canvas.getActiveObject();
if (text)
{
var newText = '';
var stillTyping = true;
if (e.which == 27) //esc
{
if (!text.originalText) return; //if there is no original text, there is nothing to undo
newText = text.originalText;
stillTyping = false;
}
//if the user wants to make a correction
else
{
//Store the original text before beginning to type
if (!text.originalText)
{
text.originalText = text.text;
}
//if the user wants to remove all text, or the element entirely
if (e.which == 46) //delete
{
activeObject.element.remove(true);
return;
}
else if (e.which == 16) { //shift
newText = text.text;
}
else if (e.which == 8) //backspace
{
e.preventDefault();
newText = text.text.substr(0, text.text.length - 1);
}
else if (e.which == 13) //enter
{
//canvas clear selection
canvas.discardActiveObject();
canvas.renderAll();
canvasBeforeSelectionCleared({ memo: { target: text} });
newText = text.text;
stillTyping = false;
}
//if the user is typing alphanumeric characters
else if (
(e.which > 64 && e.which < 91) || //A-Z
(e.which > 47 && e.which < 58) || //0-9
(e.which == 32) || //Space
(keyPressed.match(/[!&()"'?-]/)) //Accepted special characters
)
{
if (text.text == text.originalText) text.text = '';
if (keyPressed.match(/[A-Z]/) && !e.shiftKey)
keyPressed = keyPressed.toLowerCase();
newText = text.text + keyPressed;
}
}
text.set({ text: newText }); //Change the text
canvas.renderAll(); //Update the canvas
if (!stillTyping)
{
this.text.originalText = null;
}
}
});
Используя этот метод, я могу выбрать текстовый элемент в холсте ткани, начать печатать и заменить текст. Вы можете изменить его, чтобы он не стирал текст каждый раз, когда вы выбираете элемент.
Есть некоторые компромиссы с этим методом. Например, вы не можете выбирать текст так, как если бы он был в обычном текстовом элементе ввода HTML, и не было мигающего курсора, поэтому "виртуальный" курсор всегда находится в конце текста.
Если вы действительно хотели, чтобы вы могли нарисовать мигающий курсор в конце текста.
text.set({ text: newText }); //Change the text
canvas.renderAll(); //Update the canvas
Это то, что я искал:) Спасибо большое!
Я думаю, что это слишком поздно, но это может помочь другим.
Существует демонстрация на fabricjs, чтобы сделать то же самое.
при условии, что у вас есть как холст, так и контекст как переменные в script:
// write text
context.fillText("text1",0,0);
// refresh canvas and write new text
context.clearRect(0,0,canvas.width,canvas.height);
context.fillText("text2",0,0);
Попробуйте это (это из моего приложения):
Text Color: <input id="text-color" type="text" value = "#FF0000" name="textColor" />
textColor.onchange = function() {
canvas.getActiveObject().setColor(this.value);
canvas.renderAll();
};
function updateControls() {
textControl.value = canvas.getActiveObject().getText();
}
canvas.on({
'object:selected': updateControls,
});