Flex 4 Slider с двумя большими пальцами

Question

кто-нибудь знает, как сделать пользовательский hslider во Flex 4 (spark) двумя большими пальцами?Начиная с Flex 4, свойство thumbcount компонента слайдера больше недоступно (для компонента mx его было легко установить).Мне нужно оформить трек и превью.

Учебное пособие было бы неплохо.

thx, смокинг.

Answer 1

У меня нет полного руководства для вас, но вот первые несколько шагов по созданию пользовательского компонента hslider. Надеюсь, это поможет.

Начните с рассмотрения скина hslider, который состоит из 2 частей, большого пальца и дорожки:

<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

У Патрика Маурера есть бесплатный аккаунт на GitHub: https://github.com/pmowrer/spark-components

Я смог использовать его без особых проблем в недавнем проекте. Компонент не предоставляет (в MXML) все свойства, которые делает Spark (например, dataTipFormatFunction отсутствует), но можно по-прежнему обращаться к ним и настраивать их с помощью пользовательской обложки.

Answer 3

В дополнение к ответу 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 4

Вы можете взглянуть на эту тему (AS3)

Компонент слайдера диапазона вспышки

Answer 5

У меня была такая же проблема. Сейчас я использую компонент 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)"/>