Flex 4 Slider với hai ngón tay cái

Question

bất kỳ ai biết cách tạo hslider tùy chỉnh trong Flex 4 (tia lửa) bằng hai ngón tay cái? Vì Flex 4 thuộc tính thumbcount của thành phần thanh trượt không còn khả dụng nữa (ở thành phần mx, nó dễ dàng được thiết lập). Tôi phải tạo kiểu cho bản nhạc và các ngón tay cái.

Hướng dẫn sẽ rất hay.

thx, tux.

Answer 1

Tôi không có một hướng dẫn đầy đủ cho bạn, nhưng đây là vài bước đầu tiên trong việc tạo ra một thành phần tùy chỉnh hslider . Hy vọng nó giúp.

Bắt đầu bằng cách nhìn vào da hslider mà được tạo thành từ 2 phần, một ngón tay cái và một ca khúc:

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

Bây giờ, tạo một làn da mới, ngoại trừ cung cấp cho nó hai nút:

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

Tạo một thành phần mới mở rộng HSlider và gọi nó là một cái gì đó giống như MultiButtonSlider. Ghi đè hàm partAdded() và lấy tham chiếu đến thumb2 khi được thêm vào.

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

Hy vọng điều này sẽ giúp bạn đi đúng hướng. Đừng quên đặt MultiButtonSlider.skinClass = "YourNewSkin"

Các bước tiếp theo sẽ làm cho nó có thể kéo và chuyển đổi điểm của nó thành giá trị. Xem hàm HSlider.pointToValue().

Answer 2

Tôi gặp vấn đề tương tự. Tôi đang sử dụng các thành phần mx thay vì các tia lửa compontent cho bây giờ.

<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

Bạn có thể có một cái nhìn tại chủ đề này (AS3)

Flash Range Slider Component

Answer 4

Bổ sung câu trả lời shi11i, người đưa tôi đi đúng hướng, đây là mã đầy đủ:

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()); 

    } 

}} 

Và đây là làm thế nào để sử dụng nó:

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

/> 

Hy vọng điều này sẽ hữu ích.

Lưu ý: Trong trường hợp của tôi, tôi không xử lý khả năng kéo của con trỏ thứ hai, vì tôi không cần nó (đó là thành phần "chỉ đọc"). Tôi sẽ quan tâm đến việc xem cách bạn xử lý nó, mặc dù.

Answer 5

Patrick Mowrer có một miễn phí qua trên GitHub: https://github.com/pmowrer/spark-components

tôi đã có thể sử dụng nó mà không có nhiều của một vấn đề trong một dự án gần đây. Thành phần không hiển thị (với MXML) tất cả các thuộc tính mà Spark thực hiện (ví dụ: dataTipFormatFunction không có mặt), nhưng vẫn có thể truy cập và tùy chỉnh chúng thông qua skinning tùy chỉnh.