Skip to content
November 12, 2010 / edeustace

Spark s:Scroller with rounded corners

For my current project, I need a scroller that has rounded corners on the Scroller (not on the content itself).

I was trying to apply a mask to the IViewport for a while, but what you need to do in fact is apply the mask to the skin.

Here’s what it looks like:

Here’s the code:

package com.ee.example
{
    import flash.display.DisplayObject;
    import flash.display.Sprite;
    import spark.components.Scroller;

    public class RoundCornerScroller extends Scroller
    {
        public var bottomLeftRadius:int = 0;

        public var bottomRightRadius:int = 0;

        public var topLeftRadius:int = 0;

        public var topRightRadius:int = 0;
       
        override protected function detachSkin():void
        {
            skin.mask = null;
            super.detachSkin();
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            if (skin != null)
            {
                applyMaskToSkin(skin as DisplayObject);
            }
        }


        private function applyMaskToSkin(obj:DisplayObject):void
        {
            var mask:Sprite = new Sprite();
            mask.graphics.beginFill(0x00FF00);
            mask.graphics.drawRoundRectComplex(0, 0, width, height, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius);
            obj.mask = mask;
        }
        
    }
}

And the application:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
    minWidth="955" minHeight="600"
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:example="com.ee.example.*">
    <s:Panel title="Rounded Scroller example">

        <example:RoundCornerScroller 
            width="400" height="300"
            horizontalScrollPolicy="off"
            topLeftRadius="30"
            bottomLeftRadius="50"
            topRightRadius="0"
            bottomRightRadius="0">
            <s:Group>
                <s:Rect 
                    width="1500" height="800">
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="#4499ff"/>
                            <s:GradientEntry color="#002200"/>
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
            </s:Group>
        </example:RoundCornerScroller>
    </s:Panel>
</s:Application>

One thing that remains an issue is the Scrollbars. For my component this isn’t an issue, but would be worth looking into.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: