ActionScript 3可视化中的可滚动区域

时间:2020-03-06 15:02:30  来源:igfitidea点击:

在扩展Flash.display.Sprite并利用低级DisplayObject(Sprite'a,Shape's,TextField)的层次结构的ActionScript 3可视化中创建几个可滚动区域的最佳方法是什么?

我尝试使用三个mx.containers.Canvas对象作为主Sprite的子级添加,并且还尝试将主Sprite转换为Canvas,但无法使用这两种方法显示任何内容。我也尝试过同时使用Canvas.addChild和Canvas.rawChildren.addChild添加DisplayObjects。

是否有必要/可能要重写整个内容以使用mx。*组件,或者是否有技巧在Canvas对象中显示更多原始对象?

这是一些使用精灵的方式的示例代码。我们希望使用链接的滚动条来使_colSprite,_rowSprite和_mapSprite滚动。当我将它们转换为Canvas对象时,代码在绘制任何显示对象之前会静默挂起(如果我没记错的话,会在addChild行上)。

以下是代码摘录。所有这些都来自于扩展了sprite的单个actionscript类。

设置三个我想滚动的区域:

this._log("Creating Sprites"); 

                this._colSprite = new Sprite();

                this._colSprite.y=0;

                this._colSprite.x=this._rowLabelWidth + this._rowLabelRightPadding + this._horizontalPadding;

this._rowSprite = new Sprite();

                this._rowSprite.y=this._columnLabelHeight+this._columnLabelBottomPadding + this._verticalPadding;

                this._rowSprite.x=this._horizontalPadding;

                this._mapSprite = new Sprite();

                this._mapSprite.y=this._columnLabelHeight+this._columnLabelBottomPadding+ this._verticalPadding;

                this._mapSprite.x=this._rowLabelWidth + this._rowLabelRightPadding+this._horizontalPadding;

                    this._log("adding kids"); 

addChild(this._mapSprite);

addChild(this._rowSprite);

addChild(this._colSprite);

样图功能:

private function _drawColumLabels(colStartIndex: int): void {

        for (var col : int = colStartIndex; col < myData.g.length; col++) {

            var colName : String = this.myData.g[col].label;

            var bottomLeftPoint : Object = this._getCellXYTopLeft(0, col);

            bottomLeftPoint.y = this._columnLabelHeight + this._verticalPadding;

            var centerX : int = Math.round(this._cellWidth / 2 + (this._fontHeight / 2) - 1);

            var colLabel : TextField = new TextField();

                colLabel.defaultTextFormat = this._labelTextFormat;

                colLabel.width = this._columnLabelHeight+this._columnLabelBottomPadding;

                colLabel.text = colName;                

                colLabel.embedFonts = true;

                var colSprite : Sprite = new Sprite();

                colSprite.addChild(colLabel);

                colSprite.x = bottomLeftPoint.x;

                colSprite.y = bottomLeftPoint.y;

                colSprite.rotation = -45;

                this._colSprite.addChild(colSprite);

        }

    }

解决方案

将子级添加到每个Canvas之后,我们可能需要调用Canvas.invalidateSize()(在每个Canvas上)以使他们重新计算其大小。

是否需要执行此操作取决于我们要添加子级的组件生命周期的哪个阶段,即何时调用" _drawColumLabels"。

我假设我们想让scolbar出现在_colSprite(和_rowSprite)上,如果其中的标签多于在可见区域中显示的标签?如果是这种情况,则我们需要使用Sprite以外的其他工具,例如Canvas,因为Sprite不支持滚动。

我们可能还需要调试每个组件的x / y / width / height值,以确保它们符合期望。我认为对布局很有帮助的是在纸张上绘制布局并开始书写尺寸和坐标,以便我可以看到我的计算是正确的。