Question

我正在尝试使用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);

Answer 1

看起来@ 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;

Answer 2

单击矩形时，需要将其设置为活动矩形。将myrect用作当前活动矩形的变量

对您的代码进行以下更改，使用//＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt;＆lt; ;＆LT;＆LT;＆LT;

注意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

如何在kinetic.js中选择一个对象？

2 个答案: