0

ユーザーが画像をアップロードして注釈を付け、データベースに保存するためのツールを作成しようとしています。このツールを使用すると、線を引いたり、テキストを追加したり、消したりできます。テキストの追加に関しては、svgソリューションの方が良いかもしれませんが、背景画像を動的にロードするソリューションは見つかりませんでした.

とにかく、ユーザーは複数のテキストを追加して画像上で移動できる必要があります。これを行うには、テキスト ボタンがクリックされ、テキスト フィールドにテキストが含まれている場合など、テキスト部分のレイヤーを動的に作成できる必要があります。

現時点では、テキストはキャンバスの同じ位置に追加されます。この関数で言うと、レイヤーの作成をループするにはどうすればよいですか。

function draw_text() {
ctx.fillStyle = "blue";
ctx.font = "12pt Helvetica";
ctx.fillText($('#text_entry').val(), 10, 250);
}
4

3 に答える 3

2

あなたが何を求めているのか100％はわかりませんが、あなたのタイトルに基づいて答えます動的にキャンバス要素を作成します。

これは、新しいキャンバスを作成するために使用する関数です。必要に応じて変更してください。

使用するには: 

var myCanvas = createLayer(500, 500);
var myContext = myCanvas.getContext('2d');

関数

function createLayer (w, h) {

    var canvas = document.createElement('canvas');

    canvas.width = w;
    canvas.height = h;
    canvas.style.width = w + "px";
    canvas.style.height = h + "px";
    canvas.style.position = "absolute";

    var body = document.getElementsByTagName("body")[0];
    body.appendChild(canvas);

    return canvas;
},

次に、コンテキストを配列に保存して、各レイヤーをループできるようにすることもできます。

于 2013-03-18T19:23:08.623 に答える
1

独自の draw_text() を持つ Layer オブジェクトを作成できます。すべての Layers オブジェクトは配列にプッシュされ、すべての render メソッドを呼び出します。

画層オブジェクト:

function Layer(_posX, _posY, _text, _context, _font, _color){
    this.posX = _posX;
    this.poxY = _posY;
    this.text = _text;
    this.ctx = _context; //canvas context
    this.font = _font;   //String
    this.color = _color; //String "rgb(255, 255, 255)" or "#FFFFFF"

    this.draw_text = function(){
       this.ctx.fillStyle = this.color;
       this.ctx.font = this.font;
       this.ctx.fillText(this.text, this.posX, this.posY);
}

与える ：

RenderPile = [];
for(elt in RenderPile){
   elt.draw_text();
}

よくわからない場合は質問してください。

于 2013-03-18T10:22:12.040 に答える
0

これであなたの提案をありがとう。canvas.js を実装することにしましたが、うまくいきました。実装は非常に簡単です。

キャンバス

于 2013-03-21T06:36:43.320 に答える