Spark Skins中的ScaleGrid属性做了什么？

Question

我一直在寻找像scaleGridLeft和scaleGridRight这样的属性的实际含义，但在任何地方都找不到连贯的解释。一种描述说，如果你有一个图像，你要做的是定义一个矩形，这个矩形将在该图像中通过缩放进行UNaffected。下面的代码是用于垂直滚动条拇指的自定义外观。我将“right”设置为-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)。您使用这些值定义的是一个矩形，您并不关心它是否在其中缩放。换句话说，will scale是在矩形之外的是什么。

如果我设置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是从右侧开始移入的像素数，底部是从底部向上移动的像素数。

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