JavaScript/HTML5 - 獲取畫布對象文本？

我正在使用javascript/html並試圖從已經在頁面上創建的畫布對象中獲取文本。JavaScript/HTML5 - 獲取畫布對象文本？

我想點擊一個按鈕，頁面已經加載後，看到畫布對象的文字。這是我正在嘗試的代碼。

var CheckCanvas = document.getElementById(className); 
var CheckContext = CheckCanvas.getContext('2d'); 

alert('btn text: ' + CheckContext.Text);

我也試着取了「fillText方法」屬性，但我無法從對象中的文本。

任何幫助將不勝感激。我相信這很簡單，但我找不到解決方案。

謝謝。

來源

2013-02-08 user1017063

究竟你「從畫布對象文本」的意思。如果您的意思是在畫布上繪製的文本，那麼您需要將事件偵聽器添加到畫布以及在其上繪製的對象。詳細信息請參閱https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener – redGREENblue

當您使用文本創建並繪製畫布對象時，將使用filltext選項。我想稍後獲取畫布對象並獲取filltext文本。 – user1017063

查看下面的答案。 http://stackoverflow.com/a/14786105/427902 – redGREENblue

好的。首先，使用當前可用的畫布方法無法做到這一點（或者我不知道它）。一種方法是編寫自己的課程，但這是一個很大的工作。我會建議你使用像kineticjs或fabricjs這樣的畫布庫，這將使它很容易實現這樣的功能。這裏有一個如何使用fabricjs來做到這一點的例子。

<canvas id="canvas1"></canvas> 
<button id="addtext">Add Text </button> 
<button id="retText">Retrive Text </button> 

var canvas = new fabric.Canvas('canvas1'); 

document.getElementById('addtext').onclick = function() { 
    var textVar = new fabric.Text("Hello World!"); 
    textVar.left=100; 
    textVar.top=100; 
    canvas.add(textVar); 

    }; 
document.getElementById('retText').onclick = function() { 
    var activeObject = canvas.getActiveObject(); 
     if (activeObject && activeObject.type === 'text') { 
     alert(activeObject.text); 
     } 
    else 
    { 
     alert ("No object selected or Selected object not text"); 
    } 
    };

jsFiddle here.

來源

2013-02-09 07:55:59 redGREENblue

見http://jsfiddle.net/ws5aK/

CheckContext.fillText的作品，但沒有叫Text這樣的屬性。

來源

2013-02-08 07:01:18

是的，我試過這個，它總是回來undefined。 – user1017063

您不能從畫布對象中獲取文本，因爲它是一個圖像。但是，您可以在繪製之前將文本存儲在變量中，然後再輸出。

var text = "Hello"; 

conxtext.fillText(text, 100, 100); 

alert("value: " + text);

來源

2013-02-08 07:30:19 TryingToImprove

唯一的問題是我有大量的對象，他們有動態文本。 – user1017063

這樣，您可以使用變量跟蹤動態文本，而不是從畫布查詢。 –

不可能獲得圖像/畫布的文本..你有沒有見過一個功能，你可以從圖像中選擇文本？我不認爲你的巨大數量的對象會殺死應用程序..你不使用的對象可以被刪除，所以它不使用內存... – TryingToImprove

JavaScript/HTML5 - 獲取畫布對象文本？

回答

相關問題