openscales实现漂亮的冒泡效果

时间：2023-03-09 18:15:58
openscales实现漂亮的冒泡效果

使用的时候openscales 默认的冒泡效果确实有点简陋，想实现那种看着比较舒服的效果，只能自己定义了。参考现有的openscales实现的方式，它是通过控件的状态实现的，每个状态中使用Path绘制了一个形状，参考了一下网上的资料可以通过Fireworks绘制一个形状然后转换成路径，再导出成Fxg文件，打开文件就可以看到data的数据了。绘制的时候边缘一定不要留有空白，要不然在flex中就不容易控制位置了

由于将箭头放在了正中间，所以只做了上、下两个方向的

向上的CloudPopupTop.mxml

    <s:Group x="{-hostComponent.width*0.5}" y="{-hostComponent.height}" 

             width="{hostComponent.width}" height="{hostComponent.height}"> 

        <s:Path  width="100%" height="100%" x="0" y="0" data="M 333 1 C 336 1 338 2 339 3 C 340 7 341 12 341 15 C 341 15 341 185 341 185 C 340 188 338 191 335 191 C 335 191 181 191 181 191 C 177 196 174 201 171 206 C 168 202 164 196 159 191 C 159 191 5 191 5 191 C 4 190 2 189 1 187 C 1 187 1 5 1 5 C 2 3 5 1 7 1 C 7 1 333 1 333 1 Z ">

            <s:fill>

                <s:SolidColor color="#FFFFFF" alpha="1"/>

            </s:fill>

            <s:stroke>

                <s:SolidColorStroke color="#CCCCCC"/>

            </s:stroke>

        </s:Path>    

        <s:Group id="contentGroup" contentBackgroundAlpha="0" width="100%" height="100%" minWidth="0" minHeight="0"

                 x="0" y="5">

        </s:Group>        

    </s:Group>

向下的CloudPopupBottom.mxml

    <s:Group x="{hostComponent.width*0.5}" y="{hostComponent.height }" 

             width="{hostComponent.width}" height="{hostComponent.height}"> 

        <s:Path rotationX="-180" rotationY="180" width="100%" height="100%" x="0" y="0" data="M 333 1 C 336 1 338 2 339 3 C 340 7 341 12 341 15 C 341 15 341 185 341 185 C 340 188 338 191 335 191 C 335 191 181 191 181 191 C 177 196 174 201 171 206 C 168 202 164 196 159 191 C 159 191 5 191 5 191 C 4 190 2 189 1 187 C 1 187 1 5 1 5 C 2 3 5 1 7 1 C 7 1 333 1 333 1 Z ">

            <s:fill>

                <s:SolidColor color="#FFFFFF" alpha="1"/>

            </s:fill>

            <s:stroke>

                <s:SolidColorStroke color="#CCCCCC"/>

            </s:stroke>

        </s:Path>    

        <s:Group id="contentGroup" contentBackgroundAlpha="0" width="100%" height="100%" minWidth="0" minHeight="0"

                 x="{-hostComponent.width}" y="{-hostComponent.height+23}">

        </s:Group>        

    </s:Group>

FxPopup文件修改如下

将relativePosition的相对位置改成这样：

            public function set relativePosition(value:String):void {

                this._relativePosition = value;

                

                var sta:String=(_relativePosition==BL || _relativePosition==BR)?"b":"t";

                setCurrentState(sta,false);

            }
    <s:states>

        <s:State name="t"/>

        <s:State name="b"/> 

    </s:states>

    

    <s:Panel id="panel"

             width="{WIDTH}"

             height="{HEIGHT}"

             backgroundAlpha="0"

             skinClass.t="org.openscales.fx.popup.skin.CloudPopupTop"

             skinClass.b="org.openscales.fx.popup.skin.CloudPopupBottom">

        <s:Group id="popupContentGroup"

                 contentBackgroundAlpha="0"

                 width="{WIDTH}"

                 height="{HEIGHT}"

                 clipAndEnableScrolling="true"

                 creationComplete="{_popupRenderer.draw()}"/>

    </s:Panel>

openscales实现漂亮的冒泡效果

参考资料：

http://*.com/questions/16019100/how-do-i-create-spath-data-polygon-coords

相关文章