3 Replies Latest reply on Jun 4, 2009 10:47 AM by Peter deHaan

    Button skin updating with paths + scaling

    NotAFlexpert

      I'm trying to use path data from an svg file to style a button, but the skin does not update visually when the state changes or when part of it gets covered by another control.  I have to resize the window to get it to update.  Is this a bug or am I doing something stupid?

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark">
         
          <fx:Declarations>
              <s:SolidColor id="normalFill" color="0x949EA3"/>
              <s:SolidColor id="overFill" color="0xFFFFFF"/>
              <s:SolidColor id="downFill" color="0x0066FF"/>
              <s:SolidColor id="disabledFill" color="0x000000"/>
          </fx:Declarations>
         
          <!-- host component -->
          <fx:Metadata>
              [HostComponent("spark.components.Button")]
          </fx:Metadata>
         
          <!-- states -->
          <s:states>
              <s:State name="up" />
              <s:State name="over" />
              <s:State name="down" />
              <s:State name="disabled"/>
          </s:states>
         
          <s:Rect width="100%" height="100%">
              <s:fill>
                  <s:SolidColor color="0x000000" alpha="0.0"/>
              </s:fill>
          </s:Rect>
         
          <s:Path fill="{normalFill}" fill.over="{overFill}" fill.down="{downFill}" fill.disabled="{disabledFill}" scaleX="12500" scaleY="12500"
              data="M 0.0021747,0.00326205c0.0021744,0 0.00434941,0 0.00652411,0 0,0.0014495 0,0.00289991 0,0.00434941 -0.0021744,0 -0.00434941,0 -0.00652411,0 0,-0.0014495 0,-0.00289991 0,-0.00434941z"/>
      </s:Skin>

        • 1. Re: Button skin updating with paths + scaling
          matt_chotin Level 3

          Here's the response I got from Evtim:

           

          The path is really really tiny (scaleX & scaleY are 12500 to scale the path to up to ~ 80 x 30).

           

          One thing that I noticed is that when we try to determine the bounds of the path internally, since we rely on the Player method getBounds() it seems that we're getting (0,0). This is because the path is really really small and the Player rounds down to 0. So I hacked this up to make sure we get the correct bounds, and we render at internal scale (1,1) after which we apply the scaleX & scaleY 12500 to the display object of the path - but the result seems to be the same. It is possible that the really tiny numbers are throwing off the Player, as Player as far as I know uses fixed point limited precision math to rasterize (didn't they tell us about some 8k limit?).

           

          It is possible that we could look into some sort of work-around, basically pre-multiplying with the scaleX & scaleY before we pass in to the Player. We should log a bug and investigate and weigh the options. The work-around for the mean time is pre-multiply the path's coordinates instead of using tiny numbers with huge scales.

           

          The path for me worked ok, when I manually adjusted the coordinates and reduced the scale to 1.25. Another thing that I noticed is the path is not constrained to the skin, perhaps left, right, top, bottom or %width %height are appropriate (the path seems to spill out of the button otherwise).

          • 2. Re: Button skin updating with paths + scaling
            NotAFlexpert Level 1

            Is it OK to post possible bugs here in general discussion or is it preferred that I enter them in JIRA?

            • 3. Re: Button skin updating with paths + scaling
              Peter deHaan Level 4

              NotAFlexpert,

               

              I think it would be preferrable to file the bug report in JIRA (http://bugs.adobe.com/flex/) and attach a simple, reproducable test case (if possible). That way we can make sure we track the issue correctly and it doesn't slip through the cracks.

               

              Thanks,

              Peter deHaan

              Flex SDK Team | Adobe Systems Inc