闪光范围滑块组件
Posted
技术标签:
【中文标题】闪光范围滑块组件【英文标题】: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”解决方案。
【讨论】:
以上是关于闪光范围滑块组件的主要内容,如果未能解决你的问题,请参考以下文章