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

ステージとレイヤーが定義されない理由は、それらが範囲外であるか、最初にインスタンス化される前にコードが壊れているためです。

まず、ステージとレイヤーが関数の外にあることを確認してください。グローバルスコープ。

第二に、あなたの関数「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 に答える