Question

我开始使用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>

Answer 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);
   };

如何使用kineticjs用按钮绘制形状？

1 个答案: