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

Question

我一直在寻找像 scaleGridLeft 和 scaleGridRight 这样的属性的真正含义，但在任何地方都找不到连贯的解释。一种描述说，如果你有一张图像，你要做的是在该图像中定义一个不受缩放影响的矩形。下面的代码用于垂直滚动条拇指的自定义皮肤。我已将“右”设置为 -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 提供的链接很有帮助，但答案不正确。

left、right、top 和 bottom 值均根据您要缩放的任何内容的注册点计算。这意味着左上角是（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 切片。 Left 是从左侧开始的像素数，top 是从顶部开始的像素数，right 是从右侧开始向内移动的像素数，bottom 是从底部向上移动的像素数。

如果您尝试缩放圆角框之类的东西并希望保持圆角半径，则使用此选项。以下是一些详细描述 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/