0

我一直在寻找像 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>
4

2 回答 2

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

我相信您可能会遇到错误，因为这小于组件的允许大小（尽管不确定该部分）。

于 2012-06-21T17:41:24.747 回答
0

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

于 2012-06-16T01:36:05.810 回答