Spark Skins中的ScaleGrid属性有什么作用?

时间:2012-06-15 17:03:50

标签: actionscript-3 flex flash-builder flex4.5 flex-spark

我一直在寻找像scaleGridLeft和scaleGridRight这样的属性实际意味着什么,但无法在任何地方找到连贯的解释。一个描述说,如果你有一个图像,你要做的是在该图像中定义一个不受缩放影响的矩形。以下代码适用于Vertical Scroll Bar Thumb的自定义外观。我将'右'设置为-1,因为当拇指位于轨道中时,拇指的右侧会留下太大的间隙。

如果scrollThumb.png是10x331并且曲目是16x521,我该如何制作它以使拇指在轨道中正确居中,并根据需要进行缩放?

Scroll Thumb enter image description here

<?xml version="1.0" encoding="utf-8"?>


<!--- The default skin class for the Spark Button component.

   @see spark.components.Button

  @langversion 3.0
  @playerversion Flash 10
  @playerversion AIR 1.5
  @productversion Flex 4
-->

<fx:Metadata>
    <![CDATA[ 
    /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
     */
    [HostComponent("spark.components.Button")]
    ]]>
</fx:Metadata>

<!-- states -->
<s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
</s:states>


<s:BitmapImage source="@Embed('assets/scrollThumb.png', scaleGridLeft='2', scaleGridTop='20', scaleGridRight='11', scaleGridBottom='50')" 
               left="0"  top="0" bottom="0" right="-1" />
</s:SparkButtonSkin>

2 个答案:

答案 0 :(得分:1)

@wovencharlie提供的链接很有帮助,但答案不正确。

左,右,上和下的值都是根据您要扩展的任何内容的注册点进行计算。这意味着左上角是(0,0)。您使用这些值定义的是矩形,如果它缩放,您不关心它。换句话说,比例是什么 那个矩形。

如果我设置scaleGridLeft ='2',这意味着从0到2的所有内容都不会缩放。如果我设置scaleGridTop ='5',这意味着视觉上高于y值5的所有内容(相对于初始0,0注册点,因此y值小于5的任何内容)将无法缩放。如果我设置scaleGridRight ='12',这并不意味着从右边开始的像素数。它设置了从初始注册点开始的像素数(12),创建了右边的假想垂直线资产不会扩大规模。由于我的拇指资产只有10像素宽,12不是一个好的值,导致奇怪的结果(它似乎想要重绘拇指的垂直镜像,延伸到轨道外)。 9将是合法的价值。

这就是为什么如果输入的scaleGridLeft数大于scaleGridRight数,Flash Builder会告诉您这些是非法值。它们是不可能的 - 你不能拥有一个数字大于正确值的左值,因为它们都是相对于那个初始值(0,0)计算的。

scaleGridBottom也是如此。它不是从底部计算出来的;它是从0,0计算出来的。同样,您的底值不能低于最高值,因此如果您尝试,Flash Builder会抱怨。

如果将scaleGridTop设置为(比如说)20并将scaleGridBottom设置为30,则不要说“不要缩放前20和后30”。您说“不要扩展前20个并且不要扩展到30以下” - 即使您的资产高200或300像素。换句话说,你所允许缩放的只有10个像素。

我相信您可能会收到错误,因为这小于组件的允许大小(虽然不确定该组件)。

答案 1 :(得分:0)

这些值是指scale9切片。左边是从左边开始的像素数,顶部是从顶部开始的像素数,右边是从右边开始移动的像素数,下边是从底部向上移动的像素数。

如果您尝试缩放像圆角框这样的东西并想要保持角半径,则使用此选项。以下是一些详细描述scale9的链接:

http://asgamer.com/2009/using-9-slice-scaling-to-retain-shape-while-resizing

对于滚动条缩略图,您可以查看此网站,了解有关如何使用它的一些想法。

http://dgrigg.com/blog/2010/07/06/flex-spark-list-with-custom-scroll-bar-and-itemrenderer/