4 Replies Latest reply on Jan 12, 2010 11:02 AM by allanjard

    Path: Using measuredWidth (or similar)?

    allanjard Level 1

      Hello all,

       

      I'm using a spark.primitives.Path instance to create an "image" with a couple of nice curves etc in it (in this particular instance I'm skinning the ScrollBarUpButton). What I would like to do is use this path to create a background for the button, which is easy enough with skinning (loving it's flexibility) but I'm not sure how I can create the path using relative dimensions. The background should cover up to measuredWidth and measuredHeight - is this possible using Path? I can only find in the documentation that you can specify left and right coordinates, so I suspect not, but equally, I'm assuming that there might be a way of achieving what I am looking for that I'm not aware of.

       

      I could of course do it in AS3 with a Sprite, but if possible, it would be create to use MXML as I find it somewhat easier for fills etc.

       

      Many thanks,

      Allan

        • 1. Re: Path: Using measuredWidth (or similar)?
          Shongrunden Adobe Employee

          I'm not sure if it will help in your use case, but you might want to play around with the resizeMode property on Group.  For example:

           

          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
             
              <s:Group width="100%" height="100%" resizeMode="scale">
                  <s:Path data="M 0 0 L 20 20 L 0 20 Z">
                      <s:fill>
                          <s:SolidColor color="red" />
                      </s:fill>
                  </s:Path>
              </s:Group>
             
          </s:Application>

           

          Here I draw a Path with absolute values and and then set resizeMode="scale" on the Group to have the Group scale its content to its size.

          • 2. Re: Path: Using measuredWidth (or similar)?
            allanjard Level 1

            Hi Shongrunden,

             

            Thank you very much for this - the resizeMode attribute did exactly the trick I was looking for. I can see that there could sill be an issue if one didn't want properties like the stroke width to be scaled up with the rest of the group - but this isn't a problem what I'm looking for at the moment. Having said that, I'd me most curious to know of how it might be done if anyone has any other suggestions.

             

            Thanks again,

            Allan

            • 3. Re: Path: Using measuredWidth (or similar)?
              Shongrunden Adobe Employee

              Looks like you might want to try setting the top/left/right/bottom constraints to zero (without using resizeMode):

               

              <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
                 
                  <s:Group width="100%" height="100%">
                      <s:Path data="M 0 0 L 20 20 L 0 20 Z" top="0" left="0" right="0" bottom="0">
                          <s:stroke>
                              <s:SolidColorStroke color="blue" />
                          </s:stroke>
                          <s:fill>
                              <s:SolidColor color="red" />
                          </s:fill>
                      </s:Path>
                  </s:Group>
                 
              </s:Application>
              • 4. Re: Path: Using measuredWidth (or similar)?
                allanjard Level 1

                Hi Shongrunden,

                 

                That's brilliant! Does exactly what I was looking for - thank you very much indeed. I'm guessing that the right and bottom most points in the path are used to scale the rest of the points as required. Really rather slick :-)

                 

                Regards,

                Allan