带两个拇指的Flex 4滑块

Question

任何人都知道如何用两个拇指在Flex 4（spark）中制作自定义的hslider？由于Flex 4的滑块组件的thumbcount属性不再可用（在mx组件中很容易设置）。我必须风格的轨道和拇指。

教程会很好。

thx， tux。

Answer 1

我没有给你一个完整的教程，但这里是在创建自定义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（）函数。

Answer 2

我有同样的问题。我现在正在使用mx组件而不是火花组件。

<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)"/> 

Answer 3

你可以在这个主题来看看（AS3）

Flash Range Slider Component

Answer 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" 

/> 

希望这会有所帮助。

注意：在我的情况下，我没有处理第二个游标的可拖动性，因为我并不需要它（它是一个“只读”组件）。不过，我会对看到你如何处理它感兴趣。

Answer 5

帕特里克Mowrer对GitHub的一个免费过来：https://github.com/pmowrer/spark-components

我能够在最近的一个项目使用它没有太大的问题。该组件不向MXML公开所有Spark属性（例如，dataTipFormatFunction缺失），但仍可以通过自定义蒙皮访问和定制它们。