根據其寬度對條進行着色

我有一個特別的問題，我正試圖解決。根據其寬度對條進行着色

以一個視頻遊戲健康欄，一個完全呈綠色並慢慢變紅，直到它在欄杆寬度幾乎爲零時變爲紅色的視頻遊戲健康欄。

我正在製作一個應用程序，它有一個小節，並且小節的寬度可以從屏幕的整個寬度到零。而不是根據條從一種顏色到另一種顏色的寬度來改變顏色，我有我想從它改變的顏色顏色。

在100％我想酒吧是藍色的（＃33B5E5）。

在80％我想酒吧是紫色的（＃AA66CC）。

在60％我想要的欄爲綠色（＃99CC000。

在40％我想酒吧是橙色（＃FFBB33）。

，並最終在20％我想了吧（＃FFBB33）

因爲低於20％的東西都會留下相同的紅色，所以我會捨棄0％注意：爲了減輕混淆，我有酒吧的百分比，這不是問題，主要目標是在寬度變化的同時，它是中間色的陰影。

例如：在90％時，酒吧應該是正好在藍色和紫色之間的顏色，而不是他們中的任何一個。

在數學上，我該如何去做這件事？

我在技術上是用Java來做這件事，但任何語言的解決方案，甚至是僞代碼，都將被接受。

編輯：我仍然得到答案，輸出給定的間隔的顏色輸出。這不是我想要完成的。這更像是一個數學問題。我想根據的百分比顏色爲。唯一一次該酒吧應該是紫色的時候，百分比是正好在80％，在70％的顏色應該是完全在紫色和綠色之間。重點是，顏色是動態的。顏色改變所有的突然到另一個靜態顏色根本沒有視覺上的趣味:)

來源

2014-02-21 AggieDev

實際上是僞代碼已經包含在你的問題;-) – donfuxx

我的答案事實上確實使色彩之間的過渡，如果需要的話會使你所尋求的視覺效果，所以只添加更多的色彩的步驟。每改變5％的健康狀況我都會認爲這足以讓人感覺愉快。 – cYrixmorten

這裏的重用Android的的LinearGradient，它支持非均勻的顏色停止的分佈的方法。您將預先構建顏色數組，並將其用作當前百分比的查找。

public static int[] getColors(int size) { 

    LinearGradient gradient = new LinearGradient(0, 0, size, 1, 
      new int[] { 
        0xffffbb33, 
        0xffffbb33, 
        0xff99cc00, 
        0xffaa66cc, 
        0xFF33b5e5 }, 
      new float[] { 
        0f, 0.2f, 0.4f, 0.6f, 1f }, 
      Shader.TileMode.CLAMP); 

    Paint p = new Paint(); 
    p.setStyle(Paint.Style.FILL); 
    p.setShader(gradient); 

    Bitmap bitmap = Bitmap.createBitmap(size, 1, Bitmap.Config.ARGB_8888); 
    Canvas canvas = new Canvas(bitmap); 
    canvas.drawRect(0, 0, size, 1, p); 

    int[] colors = new int[size]; 
    bitmap.getPixels(colors, 0, size, 0, 0, size, 1); 
    bitmap.recycle(); 
    return colors; 
}

來源

2014-02-22 00:19:55

這是如何工作的百分比？我爲尺寸參數輸入了什麼？我相信這個作品我只是想知道如何，謝謝！ – AggieDev

如果你傳遞一個101的大小，你會得到一個長度爲101的int數組，你需要索引範圍從0到100％。所以你可以使用顏色[Math.round（百分比）]。如果你想要更細微的細微差別，例如一個不同的顏色值爲每半個百分點，你可能會加倍數組的大小。 –

啊，我已經得到你了，謝謝你！非常棒！ – AggieDev

就拼湊了一起，可能需要一些工作：

class HealthBar { 

    public static final int ANIMATION_TIME = 500; 

    String currentColor; 
    View bar; // the view of the 

    public HealthBar(View view) { 
     this.bar = view; 
     this.currentColor = "#33B5E5"; 
    } 

    public void updateHealthBar(int health) { 

     if (health < 20) { 
      tintColor("#FFBB33"); 
     } else if (health < 40) { 
      tintColor("#FFBB33"); 
     } else if (health < 60) { 
      tintColor("#99CC000"); 
     } else if (health < 80) { 
      tintColor("#AA66CC"); 
     } else { 
      tintColor("#33B5E5"); 
     } 

    } 

    @SuppressLint("NewApi") private void tintColor(String newColor) { 

     ColorDrawable[] color = { 
       new ColorDrawable(Color.parseColor(currentColor)), 
       new ColorDrawable(Color.parseColor(newColor)) }; 
     TransitionDrawable trans = new TransitionDrawable(color); 
     int sdk = android.os.Build.VERSION.SDK_INT; 
     if (sdk < android.os.Build.VERSION_CODES.JELLY_BEAN) { 
      bar.setBackgroundDrawable(trans); 
     } else { 
      bar.setBackground(trans); 
     } 
     trans.startTransition(ANIMATION_TIME); 

     this.currentColor = newColor; 
    } 

}

來源

2014-02-21 23:36:05 cYrixmorten

你需要的之間線性線性插值數字。

例如：

int blue = Integer.parseInt("33B5E5", 16); 
int purple = Integer.parseInt("AA66CC", 16); 
int green = Integer.parseInt("99CC00", 16); 
int orange = Integer.parseInt("FFBB33", 16); 
int red = Integer.parseInt("FFBB33", 16); 

int[] colors = new int[] {red, orange, green, purple, blue}; 

//Percent should be 0-100 
public int getColorBasedOnPercent(int percent, int[] colors) { 
    int intervalSize = 100/(colors.length - 1); 
    int startColor = Math.floor(percent/intervalSize); 
    int endColor = Math.ceil(percent/intervalSize); 

    float lerpAmount = (percent % intervalSize)/intervalSize; 

    return (int)((colors[endColor] - colors[startColor]) * lerpAmount + colors[startColor]); 
}

來源

2014-02-21 23:44:12

替代可能的方式是在玩Color.rgb：

if (health < 20) { 
     //default red here 
    } else if (health < 40) { 
     Color.rgb(256 - barLenghtPercent, 100, 100); // get something more red the shorter the bar 
    } else if (health < 60) { 
     // etc. same with other colors

來源

2014-02-21 23:58:45 donfuxx

根據其寬度對條進行着色

回答

相關問題