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>

---

 

 

 参考资料：

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