My Layout Flex 4_el 设置matrix3d-优快云博客

本文介绍了一个名为 CocoLayout_Layout 的自定义布局组件，该组件使用 ActionScript 编写，适用于 Flex 应用程序。此布局通过计算元素宽度并将其沿圆周分布来实现独特的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layout

Import my own spark.components -Skin :

layout

Properties :

layout

/**
*
* coco layout
* author : coco
**/
package coco_layout
{
import flash.geom.Matrix3D;
import flash.geom.Vector3D;

import mx.core.ILayoutElement;
import mx.core.IVisualElement;

import spark.components.supportClasses.GroupBase;
import spark.layouts.supportClasses.LayoutBase;

public class CocoLayout_Layout extends LayoutBase
{
  //----------------------------------------------
  //
  // Constructor
  //
  //----------------------------------------------

  public function CocoLayout_Layout()
  {

  }

  //----------------------------------------------
  //
  // Properties
  //
  //----------------------------------------------
  private var totalWidth:Number=0;
  private var maxWidth:Number = 0;
  private var radiuIn:Number = 0;
  private var itemWidth:Number = 0;

  /**Get the total width of all items*/
  private function getTotalWidth():void
  {
   var iter:LayoutIterator = new LayoutIterator(target);
   var element:ILayoutElement;
   while(element = iter.nextElement())
   {

    --> element.setLayoutBoundsSize(NaN,NaN);
    var perferredWidth:Number = element.getLayoutBoundsWidth(false);
    totalWidth += perferredWidth;
    maxWidth = Math.max(maxWidth,perferredWidth);
   }

   radiuIn = totalWidth*0.5/Math.PI;
  }

  //----------------------------------------------
  //
  // Overridden methods : LayoutBase
  //
  //----------------------------------------------

        override public function set target(value:GroupBase) : void
        {
        super.target = value;
        if(target)
        {
          target.maintainProjectionCenter = true;
        }
        }

        override public function measure() : void
        {
        getTotalWidth();
        }

        override public function updateDisplayList(containerwidth:Number, containerheight:Number) : void
        {
        var iter:LayoutIterator = new LayoutIterator(target);
        var el:ILayoutElement = iter.nextElement();
        itemWidth = -el.getLayoutBoundsWidth(false)/2;
        iter.reset();
        while(el = iter.nextElement())
        {
          el.setLayoutBoundsSize(NaN,NaN,false);
          var elementWidth:Number = el.getLayoutBoundsWidth(false);
          var elementHeight:Number = el.getLayoutBoundsHeight(false);
          var degrees:Number = 360 * (itemWidth + elementWidth/2) / totalWidth;

          //Calculate and set the Matrix3D
          var matrix3D:Matrix3D = new Matrix3D();
          matrix3D.appendTranslation(-elementWidth/2,-elementHeight/2,-radiuIn);
          matrix3D.appendRotation(degrees,Vector3D.Y_AXIS);
          matrix3D.appendRotation(10,Vector3D.X_AXIS);
          matrix3D.appendTranslation(containerwidth/2,containerheight/2,radiuIn);
          el.setLayoutMatrix3D(matrix3D,false);

          //Determines the order in which items inside of groups and datagroups are rendered.
          //Groups and DataGroups order their items based on their layer property,
          // with the lowest layer in the back, and the higher in the front.
          //items with the same layer value will appear in the order
          //they are added to the Groups item list
          if (el is IVisualElement)
                IVisualElement(el).layer = Math.abs( Math.floor(180 - Math.abs(degrees % 360)) );
          itemWidth += elementWidth;
        }
        }
}
}

import spark.components.supportClasses.GroupBase;
import mx.core.ILayoutElement;

class LayoutIterator
{
private var _target:GroupBase;
private var _curIndex:int = -1;
private var _totalElements:int;

public function LayoutIterator(target:GroupBase):void
{
  _totalElements = target.numElements;
  _target = target;
}

public function nextElement():ILayoutElement
{
  while(_curIndex < _totalElements - 1)
  {
   var element:ILayoutElement = _target.getElementAt(++_curIndex);
   if(element && element.includeInLayout)
   {
    return element;
   }
  }
  return null;
}

public function reset():void
    {
        _curIndex = -1;
    }
}