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

Question

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

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

<?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>

Answer 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个像素。

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

Answer 2

这些值是指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/