1

我想通过不同的按钮点击在画布上绘制多个图形。

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

但由于未定义层和阶段，它会产生错误。我该如何解决？

4

1 回答 1

1

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

首先，确保你的 stage 和 layer 在任何函数之外；全球范围。

其次，通过单击按钮调用您的函数“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();
});
于 2013-04-15T13:55:16.307 回答