2013-12-15 16 views
1

我要處理很多多邊形等 所以我打算做的是「添加」或「畫」一組多邊形的一個「臨時」組,然後給這些多邊形到另一個組,清空臨時組。將每個小組的孩子都複製到另一個小組?

因此,這裏是我做的:

其中「TMP」和「斑」是動力學組

function frame(array,R,G,B,A){ 
     poly = new Kinetic.Polygon({ 
      points: array, 
      stroke: 'white', 
      strokeWidth: 1, 
      class: A 
     }); 
     if(R!=null||G!=null||B!=null){ 
      poly.setFill('rgba('+R+','+G+','+B+',1)'); 
     } else { 
      poly.setFill('rgba(0,0,0,0)'); 
     }; 
     tmp.add(poly); 
    }; 

那麼這裏來的對象與調用「框架」功能

功能
var parent={ 
    child1:function(R,G,B,A){ 
        ... 
     Left.light(R,G,B,A); 
        ... 
     tmp.moveTo(fak); 
     layer.add(fak); 
      tmp.remove(); 
    }, 
    child2:function(R,G,B,A){} 
} 

這個解決方案的唯一問題是moveTo函數只將「tmp」的內容鏈接到「fak」,並且當我用tmp.remove()刪除「tmp」時,我什麼也得不到。有什麼辦法可以讓tmp的孩子們發現,然後騰空而不丟失任何東西?

回答

2

更直接的使用模板的方法是使用clone方法。

  • 使用您需要的元素(groupTemplate)創建一個模板組。
  • 當你需要一個副本... VAR groupFromTemplate = groupTemplate.clone。

您可以在克隆過程中,即使重新克隆組的屬性。

這裏的代碼和一個小提琴:http://jsfiddle.net/m1erickson/LkFs9/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script> 

<style> 
body{padding:20px;} 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:350px; 
    height:350px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 350, 
     height: 350 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 

      $(stage.getContent()).on('click', function (event) { 
       var pos=stage.getMousePosition(); 
       var mouseX=parseInt(pos.x); 
       var mouseY=parseInt(pos.y); 
       console.log(mouseX+"/"+mouseY); 
      }); 


    var group1=new Kinetic.Group({ 
     x:30, 
     y:30, 
    }); 
    layer.add(group1); 

    var circle1 = new Kinetic.Circle({ 
     x:10, 
     y:10, 
     radius: 10, 
     fill: 'red', 
     stroke: 'black', 
     strokeWidth: 2, 
    }); 
    group1.add(circle1); 

    var circle2 = new Kinetic.Circle({ 
     x:25, 
     y:25, 
     radius: 10, 
     fill: 'green', 
     stroke: 'black', 
     strokeWidth: 2, 
    }); 
    group1.add(circle2); 

    var group2=group1.clone({ 
     x:100, 
     y:40 
    }); 
    layer.add(group2); 

    layer.draw(); 







}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <div id="container"></div> 
</body> 
</html> 
相關問題