Fatal编程技术网
  • javascript/
  • Javascript 如何在kinetic.js中选择对象？

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

javascript html html5-canvas

Javascript 如何在kinetic.js中选择对象？,javascript,html,html5-canvas,kineticjs,Javascript,Html,Html5 Canvas,Kineticjs,我试图设计一个编辑器，可以用来绘制形状使用块，使用框架。到目前为止一切都很好。我可以添加矩形，改变其大小，并旋转它。但我所说的只适用于最后创建的对象。我无法选择其中一个进行修改。下面是代码的html： <style> body { margin: 0px; padding: 0px; } canvas { border: 1px solid #9C9898; } </

我试图设计一个编辑器，可以用来绘制形状使用块，使用框架。到目前为止一切都很好。我可以添加矩形，改变其大小，并旋转它。但我所说的只适用于最后创建的对象。我无法选择其中一个进行修改。下面是代码的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>
单击某个矩形时，需要将其设置为活动矩形。使用myrect作为当前活动矩形的变量

对您的代码进行以下更改，标识为//看起来@jing3142的答案适用于@user1422167，但我想在这里发布这个答案，因为另一个答案使用了一种非传统的方法来选择KineticJS中的节点

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

event.targetNode

资料来源：

使用
var shape=evt.targetNode，您可以在KineticJS节点上调用所有KineticJS方法。在本例中，教程调用
getName
方法：
shape.getName（）

此外，请在此处查看有关KineticJS事件的更多信息：

更新

KineticJS 5.0.1及之前的版本


var shape=evt.targetNode

KineticJS 5.1.0+


var shape=evt.target
非常感谢。我还要问一件事` document.getElementById（'delete'）.addEventListener（'click'，function（）{layer.remove（myRect）；stage.add（layer）；}，false）；`此代码应该删除选定的矩形，但它会删除所有矩形。你知道为什么吗？试着把layer.remove（myRect）改成myRect.remove（）；顺便说一句，问一个新问题比在评论中提问更合适。您始终可以在上一个问题的注释中重定向到新问题。很高兴能帮上忙。查看此已在Kineticjs 5.1.0中更新为
evt.target
。

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



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



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