How can I change an image's color in Titanium?

Question

I'm trying to learn Titanium mobile development.

I have an image of a black star on a transparent background and I wanted to write an app that randomises its color on touch.

I saw that there are some "blend mode" features, but they are iOS only. Is there a way to do this that works across iOS and Android?

Many thanks

score 2 · Answer 1 · edited May 23 '17 at 10:31

No you simply can't change the color of an image in Titanium. If you want to achieve your goal i would simplify the shape for example take a circle. To draw a circle use this code:

var circle = Ti.UI.createImageView({
        width: 100,
        height: 100,
        borderRadius: 50,
        backgroundColor: 'black'
});

To change it's color use this event listener:

circle.addEventListener("click", function(e){
    circle.backgroundColor = "red";
});

This will only change the color to red on the first click. If you want to randomize the colors you'll have to create an array with colors in it. Then use a shuffle function to get a random color to eventually set it. This article might be helpfull: shuffle

Good luck!

Thanks, but I'm really looking for a solution that works on an image, not just a view. Is there a way I can read the image data into a blob, then manipulate it with an image library, then write it back to an image and display in an image view? It can't be impossible. — Chris, Dec 03 '14 at 23:36

score 0 · Answer 2 · answered Dec 04 '14 at 04:34

0

May be these two links helpful for you.

Get Pixel Info

image to pixel

answered Dec 04 '14 at 04:34

Krishna

46
6

score 0 · Answer 3 · answered Dec 07 '14 at 08:40

I see some options to solve this kind of problem (you'll have to test them):

One of the great things about Titanium is that it allows you to write your own custom native modules that you can have as part of your project. You can even write your own UI components - so basically anything you can do with native - you can theoretically do with Titanium.
Assuming you don't want to work with native code, and want to stick to just what Titanium offers is playing with overlays like in the following example: https://developer.appcelerator.com/question/143156/placing-a-transparent-imageview-on-top-of-another-imageview
Another way might be having a view with a background color (which you will randomize) and on top of it an image where everything that's surrounding the star has a solid color, and the star shape is transparent.

score 0 · Accepted Answer · answered Dec 15 '14 at 22:48

0

In the end, I used a HTML canvas element inside a webview to solve my problem.

I wrote a node package for breaking images into regions and rendering them to a canvas.

https://www.npmjs.com/package/regioned-image

answered Dec 15 '14 at 22:48

Chris

1,501
17
32

How can I change an image's color in Titanium?

4 Answers4