Color blocks

The Blocks Editor Colors drawer contains several blocks corresponding to commonly used colors. You can plug these into the sockets for blocks that require colors, such as setting the text color or the background color of a component. These same colors can also be selected from the color dropdown lists in the Designer's Properties panel.

Making your own colors
Colors in App Inventor are encoded as numbers, as you can see if you print a color block. For example, the color blue is the large negative number −16776961. If you know the secret to encoding colors, you don't need to be restricted to App Inventor's built-in colors. You can put any color at all into your apps.

Colors are created using four numbers, each running from 0 through 255. The first three numbers signify the amount of red, green, and blue in the color. You can find color charts on the Web that give the R, G, B specifications for may colors, or you can experiment with your own R, G, B mixtures. The fourth number specifies opacity which comes into play when regions overlap. Opacity 255 is fully opaque: the color will completely block out anything under it. Opacity 0 is fully transparent: you won't even see the color on the screen. Intermediate values determine how much the underlying screen will show though.

To get a color number for App Inventor, combine the four numbers according to the following algorithm:

Start with the opacity.
Multiply this by 256 and add R.
Multiply the result by 256 and add G.
Multiply the result by 256 and add B.
Take the result and subtract 168 = 4294967296
The resulting (negative) number is what you use for App Inventor.
As an example, the R, G, B values for a deep shade of purple are R = 160, G = 32, B = 240. Applying the algorithm to these values, with an opacity of 255, gives −6283024. If you set the background color of a canvas to −6283024, you'll see a purple patch on the screen.

Here's a blocks program that computes the color number given R, G, and B. The opacity is fixed ar 255, but you can change that by changing the global variable.


  • 最終更新:2010-12-22 02:03:09

このWIKIを編集するにはパスワード入力が必要です

認証パスワード