0

I'm beginning to use canvas and kineticjs. I tried to draw a rect when clicking the button "add text", in the function I declare a var Text, add the var Text in the layer and then add the layer to the stage, can anybody help me?

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 回答