0

私はcanvasとkineticjsを使い始めています。「テキストを追加」ボタンをクリックしたときに長方形を描画しようとしました。関数で、を宣言し、レイヤーにvar Text追加var Textしてから、レイヤーをステージに追加します。誰か助けてもらえますか？

window.onload = function() {
    var stage = new Kinetic.Stage({
      container: "container",
      width: 578,
      height: 200
    });
    var shapesLayer = new Kinetic.Layer();

document.getElementById("Draw_text").addEventListener("click", function () {
    var Text = new Kinetic.Text({
        x: 100,
        y: 100,
        text: "hi",
        draggable: "true"
    });

    shapesLayer.add(Text);
    stage.add(shapesLayer);
}, false);

<body onmousedown="return false;">
<div id="container"></div>
  <div id="buttons">
      <button id="Draw_text">
      add text
  </button>
</div>

4

1 に答える 1

-1

戦略を変更する必要があります。これを行うには、非常に簡単なトリックを使用できます。最初に必要な形状を描画してから、hide() および show() 関数を使用します。このメソッドを使用すると、探しているものを取得できます。* onclick 関数内でテキストを宣言しないでください。

window.onload = function() {
    var stage = new Kinetic.Stage({
      container: "container",
      width: 578,
      height: 200
    });

    var shapesLayer = new Kinetic.Layer();
    var Text = new Kinetic.Text({
        x: 100,
        y: 100,
        text: "hi",
        draggable: "true"
    });

   document.getElementById("Draw_text").addEventListener("click", function () {
   Text.show();
   shapesLayer.draw();
   }, false);

   document.getElementById("Delete_text").addEventListener("click", function () {
   Text.hide();
   shapesLayer.draw();
   }, false);

   shapesLayer.add(Text);
   stage.add(shapesLayer);
   };
于 2012-08-01T16:53:32.800 に答える