循環通過3種顏色然後再返回到原來的顏色

Question

我已經創建畫布上的元件，在其上用戶觸摸/或點擊圓改變其顏色

這就是我在迄今。

circle.on('touchstart', function() { 
     var fill = this.getFill() == '#DDDDDD' ? '#FFC926' : '#FF0000'; 
     this.setFill(fill); 
     layer.draw(); 
     }); 

開始的顏色是#DDDDDD那麼當點擊或觸摸我怎麼能添加1種顏色，然後恢復到原來的顏色變化＃FF0000時，其點擊或觸摸chages到＃FFC926然後

我需要發生的是：

開始：#DDDDDD

touch1：＃FFC926

touch2：＃FF0000

TOUCH3：＃000000

TOUCH4：#DDDDDD（休息吧）

只是不知道如何做到這一點用JS

Answer 1

您可以使用switch語句設置正確的顏色。

circle.on('touchstart', function() { 
    var current = this.getFill(); 
    var fill = ""; 
    switch (current) { 
     case "#DDDDDD": 
     fill = "#FFC926"; 
     break; 
     case "#FFC926": 
     fill = "#FF0000"; 
     break; 
     case "#FF0000": 
     fill = "#000000"; 
     break; 
     default: 
     fill= "#DDDDDD"; 
    } 
    this.setFill(fill); 
    layer.draw(); 
}); 

Answer 2

也有許多可用的方法

一個是開關的情況下： - 通過@TeeDeJee

一）我會建議你一個陣列的方法，因爲它很容易維護和答案給你可以在將來它

var colorArray = new Array('#DDDDDD','#FFC926','#FF0000','#000000'); // add more color in the array 

arrayCounter = 0;    
circle.on('touchstart', function() { 
     if(arrayCounter == colorArray.length){ 
     arrayCounter = 0; 
     } 
     var fill = colorArray[arrayCounter++]; 
     this.setFill(fill); 
     layer.draw(); 
    }); 

二）增加更多的顏色選項的第二個使用你的條件語句的邏輯，但有點複雜的方式

circle.on('touchstart', function() { 
     var fill = (color == '#DDDDDD')? '#FFC926': (color == '#FFC926') ? '#FF0000' : (color == '#000000') ? '#DDDDDD' : '#000000'; 
     this.setFill(fill); 
     layer.draw(); 
    });