如何在Flash Builder中使用Flex中的ActionScript在矢量图形中分别更改填充和描边

Question

If I have a rectangle which has a fill of blue and stroke of orange how can I change the stroke to black and the fill to red using actioncript.

When I use the following code it changes the entire rectangle to 0x008000 (green). Either the fill is covering the stroke or it is changing both the fill and stroke to 0x008000 (green).

var myColor:ColorTransform = myRectangle.transform.colorTransform;

                    savedColor = myRectangle.transform.colorTransform;

                    myColor.color = 0x008000;

                    myRectangle.setColorTransform(myColor);

I notice when I convert back to the saved color it brings back the original fill and stroke colors as I want.

            myRectangle.setColorTransform(savedColor);

I just can not change the rectangle to a different color for fill and for stroke when changing for the first time without being saved.

What I want to be able to do is set the fill and stroke to different colors and also control whether or not the fill will cover the stroke.

Please see below a simple flex program one can use to tweak and give an answer back if you can figure it out:

Thanks in advance Lawrence

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="0" minHeight="0" usePreloader="true">
 <fx:Script>
        <![CDATA[
              public var savedColor:ColorTransform;
              protected function button1_clickHandler(event:MouseEvent):void
              {
                   var myColor:ColorTransform = GEN1.transform.colorTransform;
                    savedColor = GEN1.transform.colorTransform;
                    myColor.color = 0x008000;
                    GEN1.setColorTransform(myColor);
                    b1.visible = false;
                    b2.visible = true;
              }
              protected function button2_clickHandler(event:MouseEvent):void
              {
                    GEN1.setColorTransform(savedColor);
                    b2.visible = false;
                    b1.visible = true;
              }
        ]]>
  </fx:Script>

  <fx:Declarations>
  </fx:Declarations>
  <s:Group>
        <s:layout>
              <s:VerticalLayout paddingTop="10"/>
        </s:layout >
        <s:Group>
              <s:layout>
                    <s:HorizontalLayout/>
              </s:layout> 
              <s:Button id="b1" click="button1_clickHandler(event)"  label="Generator 1 ON"/>
              <s:Button id="b2" visible="false" click="button2_clickHandler(event)"  label="Generator 1 OFF"/>
        </s:Group>              
        <s:Group  >
              <s:Graphic version="2.0"  xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"  viewHeight= "645" viewWidth= "1043">
                    <s:Path winding="evenOdd" data="M 341 30 C 341 19 350 10 361 10 C 372 10 381 19 381 30 C 381 41 372 50 361 50 C 350 50 341 41 341 30 Z " blendMode="normal" alpha="1" id="GEN1">
                          <s:fill>
                                <s:SolidColor color="#b6b6b6"/>
                          </s:fill>
                          <s:stroke>
                                <s:SolidColorStroke color="#333333" weight="4" caps="none"/>
                          </s:stroke>
                    </s:Path>
              </s:Graphic>                                    
        </s:Group>
  </s:Group>
</s:Application>

Answer 1

Give them IDs:

          <s:Graphic version="2.0"  xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"  viewHeight= "645" viewWidth= "1043">
                <s:Path winding="evenOdd" data="M 341 30 C 341 19 350 10 361 10 C 372 10 381 19 381 30 C 381 41 372 50 361 50 C 350 50 341 41 341 30 Z " blendMode="normal" alpha="1" id="GEN1">
                      <s:fill>
                            <s:SolidColor color="#b6b6b6" id="fill"/>
                      </s:fill>
                      <s:stroke>
                            <s:SolidColorStroke color="#333333" weight="4" caps="none" id="stroke"/>
                      </s:stroke>
                </s:Path>
          </s:Graphic>     

Then in ActionScript just change the properties on the class:

fill.color = 0x000000;
stroke.color = 0xffffff;