带两个拇指的 Flex 4 滑块答案

【问题标题】：Flex 4 Slider with two thumbs带两个拇指的 Flex 4 滑块
【发布时间】：2011-02-10 07:01:40
【问题描述】：

有人知道如何用两个拇指在 Flex 4 (spark) 中制作自定义 hslider 吗？自 Flex 4 以来，滑块组件的 thumbcount 属性不再可用（在 mx 组件上很容易设置）。我必须设置轨道和拇指的样式。

有教程就好了。

谢谢，晚礼服。

【问题讨论】：

【解决方案1】：

我遇到了同样的问题。我现在使用的是 mx 组件而不是 sparks 组件。

<mx:HSlider x="46" y="358" minimum="1" maximum="600" snapInterval="1"
thumbCount="2" values="[1,600]" id="hsTiming" height="23" width="618" 
change="hsTiming_changeHandler(event)"/>

【讨论】：

【解决方案2】：

你可以看看这个话题（AS3）

Flash Range Slider Component

【讨论】：

【解决方案3】：

我没有完整的教程供您参考，但这里是创建自定义 hslider 组件的前几个步骤。希望对您有所帮助。

首先查看由两部分组成的 hslider 皮肤，一个拇指和一个轨道：

<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
              skinClass="spark.skins.spark.HSliderTrackSkin" />
<s:Button id="thumb" top="0" bottom="0" width="11" height="11" 
              skinClass="spark.skins.spark.HSliderThumbSkin" />

现在，创建一个新皮肤，除了给它两个按钮：

<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100"
                  skinClass="spark.skins.spark.HSliderTrackSkin" />
<s:Button id="thumb" top="0" bottom="0" width="11" height="11" 
                  skinClass="spark.skins.spark.HSliderThumbSkin" />
<s:Button id="thumb2" top="0" bottom="0" width="11" height="11" 
                  skinClass="spark.skins.spark.HSliderThumbSkin" />

创建一个扩展 HSlider 的新组件，并将其命名为 MultiButtonSlider。覆盖 partAdded() 函数并在添加时获取对 thumb2 的引用。

override protected function partAdded(partName:String, instance:Object):void{
if(partName == "thumb2"){
    thumb2 = instance as Button;
}
}

希望这能让您朝着正确的方向迈进。不要忘记设置 MultiButtonSlider.skinClass = "YourNewSkin"

接下来的步骤是使其可拖动并将其点转换为值。请参阅 HSlider.pointToValue() 函数。

【讨论】：

【解决方案4】：

为了补充shi11i的答案，谁让我走上了正轨，这里是完整的代码：

package test.components

{

import flash.geom.Point;

import spark.components.Button;
import spark.components.Group;
import spark.components.HSlider;


public class HSliderTwoThumbs extends HSlider
{
    private var _value2:Number;

    [Bindable]
    public function get value2():Number
    {
        return _value2;
    }

    public function set value2(value:Number):void
    {
        _value2=value;
        invalidateDisplayList();
    }


    [SkinPart(required="true")]
    public var thumb2:Button;

    public function HSliderTwoThumbs()
    {
        super();
        //this.setStyle("skinClass", "HRangeSliderSkin");
    }

    override protected function partAdded(partName:String, instance:Object):void
    {
        super.partAdded(partName, instance);
    }


    override protected function updateSkinDisplayList():void
    {
        super.updateSkinDisplayList();

        if (!thumb2 || !track || !rangeDisplay)
            return;

        var thumbRange:Number=track.getLayoutBoundsWidth() - thumb2.getLayoutBoundsWidth();
        var range:Number=maximum - minimum;

        // calculate new thumb position.
        var thumbPosTrackX:Number=(range > 0) ? ((value2 - minimum) / range) * thumbRange : 0;
        // convert to parent's coordinates.
        var thumbPos:Point=track.localToGlobal(new Point(thumbPosTrackX, 0));
        var thumbPosParentX:Number=thumb2.parent.globalToLocal(thumbPos).x; //- distanceToSecondThumb

        thumb2.setLayoutBoundsPosition(Math.round(thumbPosParentX), thumb2.getLayoutBoundsY());

    }

}}

这里是如何使用它：

    <components:HSliderTwoThumbs id="sliderTwoThumbs"                                                skinClass="test.skins.HRangeSliderSkin"
width="300"
minimum="0"
maximum="300"
value="150"
value2="100"

/>

希望这会有所帮助。

注意：在我的例子中，我没有处理第二个光标的可拖动性，因为我不需要它（它是一个“只读”组件）。不过，我很想看看你是如何处理它的。

【讨论】：

【解决方案5】：

Patrick Mowrer 在 GitHub 上有一个免费的：https://github.com/pmowrer/spark-components

在最近的一个项目中，我可以毫无问题地使用它。该组件不会（向 MXML）公开 Spark 的所有属性（例如，dataTipFormatFunction 不存在），但仍然可以通过自定义皮肤访问和自定义它们。

【讨论】：