ここ数週間、Fabric.js をいろいろいじってきましたが、テキスト フィールドに関しては、作成時にテキストを設定できることしかわかりませんでした。
インタラクティブなテキスト フィールドを作成する方法はありますか?それを実現するための回避策を見つける必要がありますか? (インタラクティブなテキスト フィールドとは、クリックして直接書き込むことができるキャンバスの領域を意味します。)
質問する
29909 次
6 に答える
84
fabric.js の最新バージョンには、動的にテキストを編集および選択するための相互作用を組み込んだクラス IText が含まれています。以下のコードを最新バージョンの fabric.js で試してください。
canvas.add(new fabric.IText('Tap and Type', {
fontFamily: 'arial black',
left: 100,
top: 100 ,
}));
于 2014-03-02T11:22:36.527 に答える
15
最近、fabric.js を使用してマインド マッピング ツールを作成しましたが、同じ問題に遭遇しました。
あなたが説明したことを達成するために（キャンバス内のテキスト要素の作成時および作成後にテキストを変更する）、jqueryを使用してキーダウンイベントを検出しました。ファブリック キャンバスで目的のテキスト要素を選択したと仮定すると、次のスニペットによってテキストが変更されます。
$(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 入力テキスト要素のようにテキストを選択することはできず、点滅するカーソルがないため、「仮想」カーソルは常にテキストの最後にあります。
必要に応じて、テキストの最後に点滅するカーソルを描画できます。
于 2012-04-08T10:15:12.750 に答える
5
手遅れだと思いますが、これは他の人の助けになるかもしれません。
于 2014-03-31T06:59:04.247 に答える
4
text.set({ text: newText }); //Change the text
canvas.renderAll(); //Update the canvas
それが私が探していたものでした:)どうもありがとう！
于 2013-03-12T12:34:11.090 に答える
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,
});
于 2012-09-10T18:25:27.687 に答える
0
スクリプトの変数としてキャンバスとコンテキストの両方があると仮定します。
// 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);
于 2012-04-04T15:10:04.140 に答える