18
2015
06

给Flex中的Tree组件加虚线

原文链接:http://blog.163.com/penny_kay@126/blog/static/4730612720091087144332/

看来有必要学习一下ItemRenderer。

效果图:

给Flex中的Tree组件加虚线 - Penny_kay - Solo

 

类文件:

package
{
    import flash.display.BitmapData;
    import flash.display.Graphics;

    import mx.collections.ICollectionView;
    import mx.collections.IList;
    import mx.controls.Tree;
    import mx.controls.treeClasses.ITreeDataDescriptor;
    import mx.controls.treeClasses.TreeItemRenderer;

    public class TreeItemDotLinesRenderer extends TreeItemRenderer
    {
        override public function set data(value:Object):void
        {
            super.data = value;
        }

        override protected function updateDisplayList(w:Number, h:Number):void
        {
            super.updateDisplayList(w, h);
            var tree:Tree = (owner as Tree);
            var desc:ITreeDataDescriptor = tree.dataDescriptor;
            var currentNode:Object = data;
            var parentNode:Object = tree.getParentItem(currentNode);
            var levelsUp:int = 0;
            var indentation:Number = tree.getStyle("indentation");
            var shift:int = indentation - icon.width;
            if (icon)
            {
                icon.move(icon.x + shift, icon.y);
            }
            if (label)
            {
                label.move(label.x + shift, label.y);
            }
            graphics.clear();
            while (parentNode != null)
            {
                var children:ICollectionView = desc.getChildren(parentNode);
                if (children is IList)
                {
                    var itemIndex:int = (children as IList).getItemIndex(currentNode);
                    var isLast:Boolean = (itemIndex == (children.length - 1));
                    drawDottedLine(this.graphics, w, h, isLast, levelsUp, indentation);
                    levelsUp++;
                    currentNode = parentNode;
                    parentNode = tree.getParentItem(parentNode);
                }
                else
                {
                    break;
                }
            }
        }

        protected function drawDottedLine(g:Graphics, w:Number, h:Number, isLastItem:Boolean, levelsUp:int, indentation:Number):void
        {
            var midY:Number = Math.round(h / 2);
            var lineX:Number = 0;
            var deviation:int = - icon.height / 2;
            lineX = disclosureIcon.x + (disclosureIcon.width / 2);
            lineX = Math.floor(lineX);
            if (levelsUp > 0)
            {
                if (!isNaN(indentation) && (indentation > 0))
                {
                    lineX = lineX - (levelsUp * indentation);
                }
                else
                {
                    return;
                }
            }
            var lineY:Number = h - deviation;
            if (isLastItem)
            {
                lineY = midY - deviation;
                if (levelsUp > 0)
                {
                    return;
                }
            }
            var verticalDottedLine:BitmapData = dottedLineFill(true);
            g.beginBitmapFill(verticalDottedLine);
            g.drawRect(lineX, deviation, 1, lineY);
            g.endFill();

            if (levelsUp == 0)
            {
                var startX:int = lineX;
                var endX:int = startX + indentation;
                if (isLastItem)
                {
                    startX = lineX;
                }
                var startY:Number = midY;
                var horizontalDottedLine:BitmapData = dottedLineFill(false);
                g.beginBitmapFill(horizontalDottedLine);
                g.drawRect(startX, startY, endX - startX, 1);
                g.endFill();
            }
        }

        private function dottedLineFill(vertical:Boolean = true):BitmapData
        {
            var w:Number = (vertical ? 1 : 2);
            var h:Number = (vertical ? 2 : 1);
            var dottedLine:BitmapData = new BitmapData(w, h, true, 0xffffff);
            dottedLine.setPixel32(0, 0, 0xFF808080);
            return dottedLine;
        }
    }
}

把Tree实例的itemRenderer属性设为此类即可。

 

说明:不会受到缩进属性indentation和icon大小的影响。


« 上一篇下一篇 »

相关文章:

xmind数据提取  (2016-8-18 16:2:10)

按下拖动双击编辑  (2016-4-21 9:31:28)

PopUpManager弹窗  (2016-4-21 9:15:22)

tree组件拖动改变节点顺序  (2016-4-21 8:52:5)

FLEX 迷你教程 — 基于STRATUS的P2P网络电话(转)  (2016-3-1 11:10:6)

Flex tree叶节点缩进(ItemRenderer应用)  (2015-6-29 9:41:57)

flex动态换肤  (2015-6-23 11:14:51)

Flex tree加三状态的Checkbox  (2015-6-18 11:58:37)

在flash builder中将flex项目导出单独的swf文件  (2015-6-13 11:52:24)

flex 4中如何让panel居中显示  (2015-6-3 14:53:32)

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。