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

Question

在扩展 flash.display.Sprite 并利用低级 DisplayObjects（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 行）。

下面是代码的摘录。 这全部来自扩展精灵的单个动作脚本类。

设置我希望滚动的三个区域：

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);



        }

    }

Answer 1

将子项添加到每个 Canvas 后，您可能需要调用 Canvas.invalidateSize() （在每个 Canvas 上）以使它们重新计算其大小。

是否需要执行此操作取决于您要添加子组件的组件生命周期的哪个阶段 - 即当您调用“_drawColumLabels”时。

我假设您希望 _colSprite （和 _rowSprite）中出现一个滚动条，如果其中的标签多于其可见区域中可以显示的标签？ 如果是这种情况，您需要使用 Sprite 以外的其他东西，例如 Canvas，因为 Sprite 不支持滚动。

您可能还想调试每个组件的 x/y/宽度/高度值，以确保它们符合您的预期 - 我发现对布局有帮助的是在纸上绘制布局并开始编写尺寸和坐标这样我就可以看到我的计算是正确的。