1

私は JS と KineticJS が初めてで、Kinetic.Stage ノードがどのように機能するかを誰かが理解するのを手伝ってくれるかどうか疑問に思っていました。このチュートリアルを出発点として使用しましたが、ボタンをクリックして既存のステージにオブジェクト (new Kinetic.Text() や new Kinetic.Group() など) を追加できるようにしたいと考えています。

私がやろうとしていることの例は、ユーザーがテキストを入力し、「移動」をクリックして、「入力したテキスト」をキャンバス内に表示できるようにするフォームをキャンバスの横に置くことです。

たとえば、関数内からステージにアクセスできると考えて、document.ready 内およびグローバル スコープで「var ステージ」を宣言しようとしました。

function writeTextToStage(stage) {
     var text = new Kinetic.Text({
       x: 190,
       y: 15,
       text: 'Simple Text',
       fontSize: 30,
       fontFamily: 'Calibri',
       textFill: 'green'
     });
      var layer = new Kinetic.Layer();
      layer.add(text);
      stage.add(layer);
      stage.draw();
}

window.onload = function(){
    var stage = new Kinetic.Stage({
        container: "designer",
        width: 578,
        height: 520
    });
    var go = document.getElementById('go');
    go.addEventListener('mousedown', writeTextToCanvas(stage);
};

とにかく、「stage」オブジェクトが別の関数「initStage()」内で宣言されている場合、初期化後にステージノードを取得して追加することはできますか? DOM 要素 $('kineticjs-content').children()[0] を介してアクセスしようとしました。

手伝ってください。kineticjs.com のドキュメントはあまり詳細ではありません。ありがとう！

4

1 に答える 1

0

関数の外側にレイヤーを作成する必要があり、関数でテキストをレイヤーに追加するだけです...

function AddText() {
   var text = new Kinetic.Text({
   ...
   });
  layer.add(text);
}
于 2012-12-05T21:34:25.480 に答える