Question

我想在不同按钮点击的画布上绘制多个数字。

HTML

<body>

<div id="container">
</div>

<div id="option">
<button value="rect" onclick="rect();">rect</button>
<button value="circle" onclick="circle();">circle</button>
</div>
</body>

使用Javascript：

var stage = new Kinetic.Stage({
        container: 'container',
        width: 500,
        height: 500
      });
var layer = new Kinetic.Layer();

function rect(){
var redLine = new Kinetic.Line({
        points: [100, 5, 100, 300, 450,300],
        stroke: 'black',
        strokeWidth: 3,
        lineCap: 'square',
        lineJoin: 'mitter'
      });
// add the shape to the layer

layer.add(redLine);
// add the layer to the stage
stage.add(layer);
}

function circle(){
      var wedge = new Kinetic.Wedge({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        radius: 70,
        angleDeg: 60,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4,
        rotationDeg: -120
      });

      // add the shape to the layer
      layer.add(wedge);

      // add the layer to the stage
      stage.add(layer);
}

但由于未定义图层和阶段，因此会出错。我该如何解决？

Answer 1

不定义阶段和层的原因是它们在范围之外，或者您的代码在首先实例化之前就已破坏。

首先，确保您的舞台和图层不在任何功能之内;全球范围。

其次，点击按钮调用你的函数'circle（）'和'rect（）'，我怀疑这会破坏你的代码。您想要从内联中删除此onclick处理程序：

 <button value="circle" onclick="circle();">circle</button>

并在创建舞台后使用javascript分配onclick。您可以使用jQuery轻松分配处理程序。因此，您的代码应该类似于：

HTML

<button value="rect" id='rect'>rect</button>  //assign an id to your button

JS

var stage = new Kinetic.Stage({
    container: 'container',
    width: 500,
    height: 500
  });
var layer = new Kinetic.Layer();

$('#yourButtonId').click(function(){ // button id here would be '#rect' if you use the id above
    rect();
});

使用Kineticjs在舞台上绘制多个数字？

1 个答案: