1

私は javascript / html を使用しており、ページ上に既に作成されているキャンバス オブジェクトからテキストを取得しようとしています。

ページが読み込まれた後にボタンをクリックして、canvas オブジェクトのテキストを表示したいと思います。これが私が試しているコードです。 

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

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

「fillText」プロパティも取得しようとしましたが、オブジェクトからテキストを取得できません。

どんな助けでも大歓迎です。簡単だと思いますが、解決策が見つかりませんでした。

ありがとう。

4

3 に答える 3

3

キャンバス オブジェクトは画像であるため、テキストを取得することはできません。ただし、テキストを描画する前に変数に格納し、後で出力することはできます。

var text = "Hello";

conxtext.fillText(text, 100, 100);

alert("value: " + text);
于 2013-02-08T07:30:19.350 に答える
1

わかった。まず第一に、現在利用可能なキャンバス メソッドを使用してそれを行う方法はありません (または、私はそれを認識していません)。1 つの方法は、独自のクラスを作成することですが、それは大変な作業です。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。

于 2013-02-09T07:55:59.457 に答える
0

http://jsfiddle.net/ws5aK/​​を参照してください

CheckContext.fillText動作しますが、と呼ばれるプロパティはありませんText。

于 2013-02-08T07:01:18.727 に答える