3

kineticjsフレームワークを使用して、ブロックを使用して形状を描画するために使用できるエディターを設計しようとしています。これまでのところ、すべてが良かったです。長方形を追加し、サイズを変更し、回転させることができます。しかし、私が言ったことは、最後に作成されたオブジェクトでのみ機能します。それらの 1 つを選択して変更することはできません。コードのhtmlは次のとおりです。

    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      canvas {
        border: 1px solid #9C9898;
      }
    </style>
  </head>
  <body>
    <table width="800" border="0">
      <tr>
        <td colspan="2" style="background-color:#eeeeee;">
        </td>
      </tr>
      <tr>
        <td style="background-color:#eeeeee;height:200px;width:400px;">
          <button id="rect">Rectangle</button><br>
          <button id="small">Small</button><br>
          <button id="big">Big</button><br>
          <button id="rotate">RotateRight</button><br>
          <button id="rotate2">RotateLeft</button><br>
          <button id="delete">Delete</button><br>
        </td>
        <td>
          <div id="container"></div>
          <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>

          <script type="text/javascript" src="example_kinetic.js"></script>

        </td>
      </tr>
      <tr>
        <td colspan="2" style="background-color:#eeeeee;text-align:center;">
        Copyright © ceng314animation.wordpress.com/</td>
      </tr>
    </table>

  </body>
</html>

そして、これはjs部分です：

 var stage = new Kinetic.Stage({
    container: 'container',
    width: 800,
    height: 400
  });

  var layer = new Kinetic.Layer();
  stage.add(layer);
  boardBlankArray = [];
  var rect, myRect;
  var i = 1;


  document.getElementById('rect').addEventListener('click', function() {
    rect = new Kinetic.Rect({
    x: 239,
    y: 75,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4,
    offset: [50,25],
    draggable: true,
    id:"rect"+i
  });
    i=i+1;

    rect.setListening(true);

    boardBlankArray[i] = rect;
    // add the shape to the layer
    layer.add(boardBlankArray[i]);
    stage.add(layer);
    boardBlankArray[i].on("click",function(){
      alert(this.attrs.id);
      //myRect = stage.getChildren()[i];
    });
  }, false);


  document.getElementById('big').addEventListener('click', function(){

    rect.setWidth(rect.getWidth()+10);
    rect.setHeight(rect.getHeight()+10);
    rect.setListening(true);
    stage.add(layer);
  }, false);

  document.getElementById('small').addEventListener('click', function() {
    rect.setListening(true);
    rect.setWidth(rect.getWidth()-10);
    rect.setHeight(rect.getHeight()-10);
    stage.add(layer);
  }, false);

  document.getElementById('rotate').addEventListener('click', function() {
    rect.setListening(true);
    rect.rotate(Math.PI/4);
    stage.add(layer);
  }, false);

  document.getElementById('rotate2').addEventListener('click', function() {
    rect.setListening(true);
    rect.rotate(-Math.PI/4);
    stage.add(layer);
  }, false);


  document.getElementById('delete').addEventListener('click', function() {
    layer.remove(rect);
    stage.add(layer);
  }, false);
4

2 に答える 2

1

長方形をクリックするときは、これをアクティブな長方形にする必要があります。現在アクティブな長方形の変数として myrect を使用する

//<<<<<<<<<<<<<<<<<<< で識別されるコードに次の変更を加えます。

注意 boardBlankArray は必要ありません

document.getElementById('rect').addEventListener('click', function() {
    rect = new Kinetic.Rect({
    x: 239,
    y: 75,
    width: 100,
    height: 50,
    fill: 'green',
    stroke: 'black',
    strokeWidth: 4,
    offset: [50,25],
    draggable: true,
    id:"rect"+i
  });
    i=i+1;

    myrect=rect //<<<<<<<<<<<<<<sets recently created rectangle as active
    rect.setListening(true);

    // add the shape to the layer
    layer.add(rect);
    stage.add(layer);
    rect.on("click",function(){    //<<<<<<<<<<<
      myRect = this; //<<<<<<<<<<<<<<<<<<<<<< sets clicked on rectangle as active
    });
  }, false);


  document.getElementById('big').addEventListener('click', function(){

    myrect.setWidth(myrect.getWidth()+10); //<<<<<<<<<uses currently active rectangle
    myrect.setHeight(myrect.getHeight()+10); //<<<<<<<uses currently active rectangle
    myrect.setListening(true);
    stage.add(layer);
  }, false);

以降のすべての関数呼び出しで rect を myrect に変更する必要があります

于 2013-03-10T10:43:11.997 に答える