動力學JS變化焦點的MouseUp

和mouseup當前圓圈，

var shapesLayer = new Kinetic.Layer(); 
for(var i =0; i<10; i++){  
var circle = new Kinetic.Circle({ 
    x: 50+i*50, 
    y: 50+i*50, 
    radius: 10, 
    fill: 'black', 
    id: i 
}); 
shapesLayer.add(circle); 
circle.on('mouseup', function() { 
    circle.setFill('black'); // this is not working 
    this.setFill('red'); 
    shapesLayer.draw(); 
    });

}

我想改變圓的焦點，而mouseup一個圓圈，圓圈變成紅色，但其他圓圈變回黑色。無論如何要做到這一點？

來源

2013-06-02 Jin Lin

在你mouseUp處理，重置所有圈填充黑色，然後選擇圓的填充設置爲紅色：

首先，添加name:"circle"來創建這樣你就可以通過名字後來讓他們每圈：

var circle = new Kinetic.Circle({ 
    x: 50+i*50, 
    y: 50+i*50, 
    radius: 10, 
    fill: 'black', 
    id: i, 
    name:"circle" 
});

然後在您mouseUp處理：

重置每圈填充爲黑色。

將所選圓圈的填充設置爲紅色。

 circle.on('mouseup', function() { 
      // reset all circle fills to black 
      resetToBlackOnMouseUp() 
      // then set this circle's fill to red 
      this.setFill('red'); 
      layer.draw(); 
     });

此功能將重置爲「圈」黑色各界的填充。

 // reset all circle fills to black 
     function resetToBlackOnMouseUp(){ 
      // get all elements named "circle" 
      var circles=stage.get(".circle"); 
      // set their fills to black 
      circles.each(function(circle){ 
       circle.setFill("black"); 
      }); 
     }

如果你只擁有1套在你的舞臺圓你有一個備用&更有效的選擇。

您可以保存對之前紅色圓圈的引用，然後將該填充重置爲黑色。

var redCircle; 

// add mouseup handler 
circle.on('mouseup', function() { 
    // reset the previous red circle's fill to black 
    redCircle.setFill("black"); 
    // then set this circle's fill to red 
    this.setFill('red'); 
    // now this circle becomes the red circle 
    redCircle=this; 

    layer.draw(); 
});

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/CyxSj/

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     #buttons { 
     position: absolute; 
     top: 5px; 
     left: 10px; 
     } 
     #buttons > input { 
     padding: 10px; 
     display: block; 
     margin-top: 5px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="container"></div> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.3.min.js"></script> 
    <script defer="defer"> 

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

     for(var i =0; i<10; i++){  
      var circle = new Kinetic.Circle({ 
       x: 50+i*50, 
       y: 50+i*50, 
       radius: 10, 
       fill: 'black', 
       id: i, 
       name:"circle" 
      }); 
      // add mouseup handler 
      circle.on('mouseup', function() { 
       // reset all circle fills to black 
       resetToBlackOnMouseUp() 
       // then set this circle's fill to red 
       this.setFill('red'); 
       layer.draw(); 
      }); 
      layer.add(circle); 
      console.log(i); 
     } 
     layer.draw(); 

     // reset all circle fills to black 
     function resetToBlackOnMouseUp(){ 
      // get all elements named "circle" 
      var circles=stage.get(".circle"); 
      // set their fills to black 
      circles.each(function(circle){ 
       circle.setFill("black"); 
      }); 
     } 

    </script> 
    </body> 
</html>

來源

2013-06-03 02:27:57 markE

感謝您的回答，我沒有做，我們可以指定名稱和分配的名稱得到它。 –

動力學JS變化焦點的MouseUp

回答

相關問題