3

我正在尝试设计一个编辑器，该编辑器可用于使用kineticjs框架使用块绘制形状。到目前为止一切都很好。我可以添加矩形，改变它的大小，并旋转它。但我所说的仅适用于最后创建的对象。我无法选择其中之一进行修改。这里是代码的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

6

看起来@jing3142 的答案适用于@user1422167，但我想在此处发布此答案，因为另一个答案使用非常规方法在 KineticJS 中选择节点。

KineticJS选择节点的方法是使用：

event.targetNode

来源：http ://www.html5canvastutorials.com/kineticjs/html5-canvas-get-event-shape-with-kineticjs/

layer.on('click', function(evt) {
    // get the shape that was clicked on
    var shape = evt.targetNode;
    alert('you clicked on \"' + shape.getName() + '\"');
  });

使用var shape = evt.targetNode;，您可以在 KineticJS 节点上调用所有 KineticJS 方法。在此示例中，教程调用getName方法：shape.getName().

此外，在此处查看有关 KineticJS 事件的更多信息：http: //www.html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover/

更新

KineticJS 5.0.1 及之前版本

var shape = evt.targetNode;

KineticJS 5.1.0+

var shape = evt.target;

于 2013-07-23T14:55:24.957 回答
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 回答