闪光范围滑块组件

Posted 2023-02-21

【中文标题】闪光范围滑块组件

【英文标题】：Flash Range Slider Component

【发布时间】：2011-01-01 11:52:38

【问题描述】：

flash 中是否有类似于this jquery 组件的东西，或者是否有任何现成的示例说明如何做到这一点？

谢谢。

【参考方案1】：

我不知道有任何此类内置（或第三方）组件。但是，我确信一些第三方的肯定存在，但它们不太可能是免费的。

您可以轻松创建自己的。我已经创建了一个基本的工作版本，您可以根据需要构建它：

// Main class, shows how to use other classes:

import flash.display.*;
import flash.events.*;
import flash.text.TextField;


public class Main extends Sprite

    private var output:TextField;
    private var range:RangeSlider;

    public function Main()
    
        output = new TextField();
        addChild(output);

        // SliderImage and ThumbImage are PNGs exported (inheriting from BitmapData) from the fla
        var thumb:SliderThumb = new SliderThumb(new ThumbImage(20, 20), stage);
        range = new RangeSlider(new SliderImage(1, 1), thumb, 100);

        range.x = 55;
        range.y = 55;

        range.addEventListener(Event.CHANGE, updateOutput);

        addChild(range);

        updateOutput();
    

    private function updateOutput(e:Event = null):void
    
        output.text = range.min + ' to ' + range.max;
    

SliderThumb 类：

import flash.display.*;
import flash.events.*;
import flash.geom.Point;

public class SliderThumb extends Sprite

    private var image:Bitmap;
    private var mouseIsDown:Boolean;
    private var _stage:Stage;

    public var min:Number;
    public var max:Number;


    public function SliderThumb(imageData:BitmapData, _stage:Stage)
    
        min = max = 0;

        this._stage = _stage;

        image = new Bitmap(imageData);
        addChild(image);

        addEventListener(Event.ADDED_TO_STAGE, init);
    

    private function init(e:Event):void
    
        removeEventListener(Event.ADDED_TO_STAGE, init);

        mouseIsDown = false;

        // Center image:
        image.x = -Math.round(image.width / 2);
        image.y = -Math.round(image.height / 2);

        addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
        _stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
        _stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
    

    public function clone():SliderThumb
    
        var clone:SliderThumb = new SliderThumb(image.bitmapData, _stage);

        clone.min = min;
        clone.max = max;

        return clone;
    

    private function mouseDown(e:MouseEvent):void
    
        mouseIsDown = true;
    

    private function mouseUp(e:MouseEvent):void
    
        mouseIsDown = false;
    

    private function mouseMove(e:MouseEvent):void
    
        if (mouseIsDown) 
            x = parent.globalToLocal(new Point(_stage.mouseX, 0)).x;

            if (x < min) 
                x = min;
            
            else if (x > max) 
                x = max;
            

            dispatchEvent(new Event(Event.CHANGE));
        
    

RangeSlider 类：

import flash.display.*;
import flash.events.*;
import flash.geom.Point;

public class RangeSlider extends Sprite

    private var background:BitmapData;
    private var sliders:Array;

    // Background is a one-pixel wide image that will be tiled horizonatally to give the slider its look
    public function RangeSlider(background:BitmapData, slider:SliderThumb, size:Number)
    
        this.background = background;

        slider.min = 0;
        slider.max = size;
        sliders = [slider, slider.clone()];
        for each (slider in sliders) 
            addChild(slider);
            slider.addEventListener(Event.CHANGE, function (e:Event)  dispatchEvent(e); );        // Pass on the CHANGE event
        
        sliders[1].x = size;

        this.size = size;
    

    public function set size(value:Number):void
    
        // Update background:
        graphics.clear();
        graphics.beginBitmapFill(background);           // Tiles by default
        graphics.drawRect(0, 0, value, background.height);
        graphics.endFill();
    

    // Returns the position of the first slider (from 0 to size):
    public function get min():Number
    
        return sliders[0].x;
    

    // Returns the position of the second slider (from 0 to size):
    public function get max():Number
    
        return sliders[1].x;
    

【讨论】：

太棒了。非常感谢。我缺少 SliderImage 类，但我认为它只是一个 BitmapData。

是的，ThumbImage 和 SliderImage 都继承自 BitmapData。

要注意的一点是滑块的大小（即最大值）对应于其宽度（以像素为单位），这可能不太理想。此外，在当前实现中，最小值始终为 0。就像我说的，可以建立一些东西:-)

【参考方案2】：

如果您愿意导入 Flex 库，有几个已构建的解决方案：

Flex 3 MX 库有一个slider component that supports two thumbs. Patrick Mowrer 制作了一个 Flex 4 Spark 滑块组件，该组件还实现了多个拇指的选项。但是，我认为目前他的待办事项列表中仍有trackHighlight 功能（如 jQuery UI 示例中所示）。尽管在 Flex 4 皮肤框架中，实现它应该不是那么难的事情。它可以在 GitHub 上免费获得：https://github.com/pmowrer/spark-components

正如我所说，这两种解决方案都需要使用 Flex 库，这意味着额外的开销。不过，它们是有效的“Flash”解决方案。