How to use BLEND_MODE
Hey everyone!
I'm trying to desaturate an image in my app. I found this:
apidoc and
Ti.UI.createMaskedImage?,but I dont' get it… everything I get is an white image.
img = Titanium.UI.createMaskedImage({
image:'img.png',
mode:Titanium.UI.BLEND_MODE_SATURATION
});
I also tried to use multiple images or that Titanium.UI.BLEND_MODE_SOURCE_IN
property, but I don't know exactly how to use it.
Thank you for your time!
I hope all those noob questions will help other Titanium beginners who struggle with the api documentation. ;)
2 Answers
-
//as of titanium mobile 1.3 this works as follows: var image = Titanium.UI.createMaskedImage({ mask:'image1.png', //optional: background Image (d) image:'image2.png', //foreground Image (s) tint:'blue', //optional: colorize mode: Titanium.UI.BLEND_MODE_DESTINATION_IN }); // with the following modes available (basically int's from 0 to 27): Ti.API.info(Titanium.UI.BLEND_MODE_NORMAL); Ti.API.info(Titanium.UI.BLEND_MODE_MULTIPLY); Ti.API.info(Titanium.UI.BLEND_MODE_SCREEN); Ti.API.info(Titanium.UI.BLEND_MODE_OVERLAY); Ti.API.info(Titanium.UI.BLEND_MODE_DARKEN); Ti.API.info(Titanium.UI.BLEND_MODE_LIGHTEN); Ti.API.info(Titanium.UI.BLEND_MODE_COLOR_DODGE); Ti.API.info(Titanium.UI.BLEND_MODE_COLOR_BURN); Ti.API.info(Titanium.UI.BLEND_MODE_SOFT_LIGHT); Ti.API.info(Titanium.UI.BLEND_MODE_HARD_LIGHT); Ti.API.info(Titanium.UI.BLEND_MODE_DIFFERENCE); Ti.API.info(Titanium.UI.BLEND_MODE_EXCLUSION); Ti.API.info(Titanium.UI.BLEND_MODE_HUE); Ti.API.info(Titanium.UI.BLEND_MODE_SATURATION); Ti.API.info(Titanium.UI.BLEND_MODE_COLOR); Ti.API.info(Titanium.UI.BLEND_MODE_LUMINOSITY); Ti.API.info(Titanium.UI.BLEND_MODE_CLEAR); Ti.API.info(Titanium.UI.BLEND_MODE_COPY); Ti.API.info(Titanium.UI.BLEND_MODE_SOURCE_IN); Ti.API.info(Titanium.UI.BLEND_MODE_SOURCE_OUT); Ti.API.info(Titanium.UI.BLEND_MODE_SOURCE_ATOP); Ti.API.info(Titanium.UI.BLEND_MODE_DESTINATION_OVER); Ti.API.info(Titanium.UI.BLEND_MODE_DESTINATION_IN); Ti.API.info(Titanium.UI.BLEND_MODE_DESTINATION_OUT); Ti.API.info(Titanium.UI.BLEND_MODE_DESTINATION_ATOP); Ti.API.info(Titanium.UI.BLEND_MODE_XOR); Ti.API.info(Titanium.UI.BLEND_MODE_PLUS_DARKER); Ti.API.info(Titanium.UI.BLEND_MODE_PLUS_LIGHTER);for more information on the blend modes refer in apple's CGContext Reference under CGBlendMode
sadly auto width and height don't yet work…
-
I'm sad that this only works for the iPhone, and not Android.. I was messing with this feature for hours, frustrated that I couldn't get it to change my image hue, or anything else, then I noticed in KitchenSink that the button only shows compiled as iPhone. Oh well. I miss Flash a bit. I got my background image animating the image mode in the ActionScript version on my app, and it looks awesome, and I was planning to do the same with the mobile, but I guess I have to wait for the implementation in the next version with fingers crossed. I didn't see a ticket for anything having to do with a blend. Should I submit one, or is there some limitation with the Android OS that will prevent this from ever working? Also, I didn't see anything to change the amount of the blend mode applied.. Shouldn't there be?