Question

我一直在画布上创建一个元素，用户触摸/或点击圆圈来改变颜色

这是我到目前为止的所在。

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

开始颜色是#DDDDDD然后当它点击或触摸到＃FFC926然后当点击或触摸更改为＃FF0000时如何添加1个颜色然后恢复到原始颜色

我需要做的是：

开始：#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给出答案

a）我会建议你一个数组方法，因为它很容易维护，你可以在以后添加更多的颜色选项

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

b）第二个使用条件语句逻辑，但有点复杂

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

循环通过3种颜色然后回到原始颜色

2 个答案: