Products
Technologies

Developer resources
Avg. Rating 5.0

Problem

I am using flex builder 3 and I need to color part of non-solid image ex : this picture http://comps.fotosearch.com/comp/UNC/UNC340/cartoons-child-children_~u12352839.jpg I want to color only the t-shirt of the man with a certain color in runtime

Solution

Convert the image into a BitmapData object and apply a floodFill.

Detailed explanation

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
        <mx:Script>
                <![CDATA[
                        public const imageURL:String =
"http://comps.fotosearch.com/comp/UNC/UNC340/cartoons-child-children_~u12352839.jpg";
                        
                        private var imageData:BitmapData;
                        
                        public function initImage():void
                        {
                                if ( sample.width == 0 &&
sample.height == 0 ) return;

                                var newData:BitmapData = new
BitmapData( sample.width, sample.height );
                                newData.draw( sample, new Matrix()
);
                                imageData = newData;
                                
                                result.source = new Bitmap(
imageData );
                        }
                        
                        public function onImageClick(
event:MouseEvent ):void
                        {
                                imageData.floodFill( event.localX,
event.localY, 0xff000000 + fillColor.value );
                        }
                ]]>
        </mx:Script>
        <mx:VBox>
                <mx:HBox>
                        <mx:Label text="Choose Color:" />
                        <mx:ColorPicker id="fillColor" />
                </mx:HBox>

                <mx:HBox>
                        <mx:Image id="sample"
                                source="{ imageURL }"
                                toolTip="Original image ( click to
reset )"
                                updateComplete="initImage()"
                                click="initImage()" />

                        <mx:Image id="result"
                                toolTip="Result image ( click
anywhere to colorize )"
                                click="onImageClick( event )" />
                </mx:HBox>
        </mx:VBox>
        
</mx:Application>

 


+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.

Report abuse

Related recipes