帶兩個拇指的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缺失），但仍可以通過自定義蒙皮訪問和定製它們。