kinetic.js：如何查找和删除形状

我是kinetic.js库的新手，我需要一些帮助来更好地理解它是如何工作的。我需要的是画3种形状（矩形）命名为“第一”，“第二”和“第一”（再次）：kinetic.js：如何查找和删除形状

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 100, 
    height: 100 
}); 
var diceLayer = new Kinetic.Layer(); 
var rect = new Kinetic.Rect({ 
    x: 0, 
    y: 0, 
    width: 20, 
    height: 20, 
    fill: 'yellow', 
    name: 'first' 
}); 
diceLayer.add(rect); 
var rect = new Kinetic.Rect({ 
    x: 10, 
    y: 10, 
    width: 20, 
    height: 20, 
    fill: 'red', 
    name: 'second' 
}); 
diceLayer.add(rect); 
var rect = new Kinetic.Rect({ 
    x: 20, 
    y: 20, 
    width: 20, 
    height: 20, 
    fill: 'green', 
    name: 'first' 
}) 
diceLayer.add(rect); 
stage.add(diceLayer);

然后选择名为“第一”的两种形状，缩放它们@ 50％并与另一种颜色

var selectionLayer = new Kinetic.Layer(); 
selectionLayer = stage.find('.first'); 
selectionLayer.stroke('1px'); 
selectionLayer.scaleX('0.5'); 
selectionLayer.scaleY('0.5'); 
selectionLayer.fill('silver'); 
selectionLayer.draw();

这样的语法填写，据我看到保持原来的形状（这就是exaclty什么，我需要）和重复的形状修改复制的对象设定行程，缩放他们，... 但是，如何删除以前查找/选择创建的对象？

我试过.clear（）和.remove（），但它们似乎没有工作。

selectionLayer.clear(); 
selectionLayer.remove();

怎么了？

Stefano

来源

2014-02-18 Stefano Radaelli

试试下面的代码。

注：您可以通过使用像阶段，diceLayer JavaScript的变量去除形状，RECT。

代码： VAR selectionLayer =新Kinetic.Layer（）;

您的上述代码无法正常工作。因为selectionLayer当我们初始化一个对象时，子值将是空的。

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
     body 
     { 
      margin: 0px; 
      padding: 0px; 
     } 
     #buttons 
     { 
      position: absolute; 
      left: 10px; 
      top: 100px; 
     } 
     button 
     { 
      margin-top: 10px; 
      display: block; 
     } 
    </style> 
</head> 
<body onload="LoadFunction()"> 
    <div id="container"> 
    </div> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script> 
    <script defer="defer"> 

     function LoadFunction() { 

      var stage, diceLayer, rect1, rect2, rect3; 
      stage = new Kinetic.Stage({ 
       container: 'container', 
       width: 100, 
       height: 100 
      }); 
      diceLayer = new Kinetic.Layer(); 
      rect1 = new Kinetic.Rect({ 
       x: 0, 
       y: 0, 
       width: 20, 
       height: 20, 
       fill: 'yellow', 
       name: 'first' 
      }); 
      diceLayer.add(rect1); 
      rect2 = new Kinetic.Rect({ 
       x: 10, 
       y: 10, 
       width: 20, 
       height: 20, 
       fill: 'red', 
       name: 'second' 
      }); 
      diceLayer.add(rect2); 
      rect3 = new Kinetic.Rect({ 
       x: 20, 
       y: 20, 
       width: 20, 
       height: 20, 
       fill: 'green', 
       name: 'first' 
      }) 
      diceLayer.add(rect3); 
      stage.add(diceLayer); 


      document.getElementById("change").addEventListener("click", function() {     
       for (var i = 0; i < stage.get(".first").length; i++) { 
        stage.get(".first")[i].stroke('1px'); 
        stage.get(".first")[i].scaleX('0.5'); 
        stage.get(".first")[i].scaleY('0.5'); 
        stage.get(".first")[i].fill('silver'); 
       } 
       diceLayer.draw(); 
      }, false); 
      document.getElementById("remove").addEventListener("click", function() { 
       var selectionLayer = new Kinetic.Layer(); 

       diceLayer.remove(); 
      }, false); 
     } 
    </script> 
    <div id="buttons"> 
     <input id="change" type="button" value="Change" /> 
     <input id="remove" type="button" value="Remove" /> 
    </div> 
</body> 
</html>

来源

2014-02-18 12:53:59

我有是，最后我只好动用的100×100矩形形状矩阵中的问题每个人通过unque名称（或ID）标识和当用户点击“突出显示“复选框ajax调用外部脚本会让我回到突出显示的形状列表。另一方面，我的目的是在整个网格上复制（或克隆）一些矩形，突出显示它们（用笔画，不同的填充颜色或whatelse），然后当用户取消选择相同的复选框时，应用程序必须切换回上一个状态（基本上显示和隐藏每次点击复选框时的选择）。 –

解决我的问题（等突出一组有限的可用的全部人口），我已经......

定义一个新的图层

var selectionLayer = new Kinetic.Layer();

获取高位列表（使用jquery ajax调用），然后创建一个新的矩形对象（与find语句返回的位置相同），但是不同的边框，颜色和whatelse，以便在最后添加它作为新的层台容器上：

$.get("/map/get-text-probed-dice.php", function(data) { 
    selectedDice = stage.find(data); 
    selectedDice.each(function(shape) { 
     var rect = new Kinetic.Rect({ 
      x: shape.x(), 
      y: shape.y(), 
      width: shape.width(), 
      height: shape.height(), 
      stroke: 3 
     }); 
     selectionLayer.add(rect); 
    }); 
    stage.add(selectionLayer); 
});

然后，当用户问隐蔽选择，相同的选择层可以被去除
```
selectionLayer.remove(); 
```

最有可能有接近它一个更聪明的方式，但我肯定是一个新手，这是我找到的最聪明的方法。

的Ciao，斯特凡诺

来源

2014-02-18 16:22:43

kinetic.js：如何查找和删除形状

回答

相关问题