| Package | ardisia.components.colorSpacePicker |
| Class | public class ColorSpacePicker |
| Inheritance | ColorSpacePicker  spark.components.supportClasses.SkinnableComponent |
The first three letters denote the color space used ("HSV", "HSL", "RGB"), and the letter after the hyphen denotes the color vector that will be set via the secondary spectrum.
View the technical documentation on the Ardisia Labs website for more information.
| Property | Defined By | ||
|---|---|---|---|
| colorSpace : String
The color space used to draw the primary and secondary spectrums. | ColorSpacePicker | ||
| duration : Number = 150
The duration of the marker animations. | ColorSpacePicker | ||
| easer : IEaser
The easer to use for marker animations. | ColorSpacePicker | ||
| primaryMarkerPart : UIComponent
Instance of the primaryMarkerFactoryPart factory. | ColorSpacePicker | ||
| primarySpectrumPart : PrimarySpectrum
Instance of the primarySpectrumFactoryPart factory. | ColorSpacePicker | ||
| primarySpectrumResolution : uint
The width and height (in pixels) of the squares used to draw the primary
spectrum. | ColorSpacePicker | ||
| secondaryMarkerPart : UIComponent
Instance of the primaryMarkerFactoryPart factory. | ColorSpacePicker | ||
| secondarySpectrumPart : SecondarySpectrum
Instance of the secondarySpectrumFactoryPart factory. | ColorSpacePicker | ||
| secondarySpectrumResolution : uint
The width and height (in pixels) of the squares used to draw the
secondary spectrum. | ColorSpacePicker | ||
| secondarySpectrumWidth : Number
The width of the secondary spectrum. | ColorSpacePicker | ||
| selectedColor : uint
The color that is currently selected in the picker. | ColorSpacePicker | ||
| selectedHSLColor : HSLColor [read-only]
The selected color in HSL format. | ColorSpacePicker | ||
| selectedHSVColor : HSVColor [read-only]
The selected color in HSV format. | ColorSpacePicker | ||
| spectrumGap : Number
The gap between the primary and secondary spectrums. | ColorSpacePicker | ||
| Method | Defined By | ||
|---|---|---|---|
setSelectedColor(color:uint, dispatch:Boolean = false):void
Set the selected color by passing a uint. | ColorSpacePicker | ||
setSelectedHSLColor(color:HSLColor, dispatch:Boolean = false):void
Set the selected color by passing a HSLColor object. | ColorSpacePicker | ||
setSelectedHSVColor(color:HSVColor, dispatch:Boolean = false):void
Set the selected color by passing a HSVColor object. | ColorSpacePicker | ||
| Method | Defined By | ||
|---|---|---|---|
getColorCoordinate(spectrum:UIComponent):Point
Returns the position of the selected color on the passed spectrum. | ColorSpacePicker | ||
layoutPrimaryMarker(skipAnimation:Boolean = false):void
Layout the primary marker. | ColorSpacePicker | ||
layoutSecondaryMarker(skipAnimation:Boolean = false):void
Layout the secondary marker. | ColorSpacePicker | ||
primarySpectrumPartHandler(event:Event):void
Handles events on the primarySpectrumPart. | ColorSpacePicker | ||
secondarySpectrumPartHandler(event:Event):void
Handles events on the secondarySpectrumWrapperPart. | ColorSpacePicker | ||
updatePrimarySpectrumPart():void
Update the PrimarySpectrumPart. | ColorSpacePicker | ||
updateSecondarySpectrumPart():void
Update the SecondarySpectrumPart. | ColorSpacePicker | ||
updateSelectedColorFromMousePosition(spectrum:UIComponent):void
Updates the selected color based on the mouse position over the passed
spectrum. | ColorSpacePicker | ||
| Event | Summary | Defined By | ||
|---|---|---|---|---|
| Dispatched when the "selectedColor" property changes due to user interaction. | ColorSpacePicker | |||
| Dispatched when the "selectedColor" value changes. | ColorSpacePicker | |||
| Style | Description | Defined By | ||
|---|---|---|---|---|
borderAlpha | Type: Number CSS Inheritance: no Alpha of the border. | ColorSpacePicker | ||
borderColor | Type: Number CSS Inheritance: no Color of the border. | ColorSpacePicker | ||
This component uses skins made up of skin parts. Do not set the skin parts directly. The component's skin sets the skin parts.
| Skin Part | Description | Defined By | ||
|---|---|---|---|---|
primaryMarkerFactoryPart:mx.core.IFactory | Required: true Part Type: Static Marks the selected color in the primary spectrum. | ColorSpacePicker | ||
primarySpectrumFactoryPart:mx.core.IFactory | Required: true Part Type: Static Draws the primary spectrum. | ColorSpacePicker | ||
secondaryMarkerFactoryPart:mx.core.IFactory | Required: true Part Type: Static Marks the selected color in the secondary spectrum. | ColorSpacePicker | ||
secondarySpectrumFactoryPart:mx.core.IFactory | Required: true Part Type: Static Draws the secondary spectrum. | ColorSpacePicker | ||
skinLayerPart:Layer | Required: true Part Type: Dynamic Container for the content added to the skin. | ColorSpacePicker | ||
To skin the component, implement a skin that defines the following states. Although you must implement all skin states, a skin state can be empty. An empty skin state specifies no changes to the default skin state.
| Skin State | Description | Defined By | ||
|---|---|---|---|---|
disabled | ColorSpacePicker | |||
normal | ColorSpacePicker | |||
| colorSpace | property |
colorSpace:StringThe color space used to draw the primary and secondary spectrums.
Available color spaces:
The first three letters denote the color space used ("HSV", "HSL", "RGB"), and the letter after the hyphen denotes the color vector that will be set via the secondary spectrum.
E.G. for HSV-H, the color space used will be HSV and the secondary spectrum will display the hue, while the primary spectrum will display the saturation and value.
Default is HSL-L because it is my subjective belief that this is the best color space for a person to pick a color.
The default value is "HSL-L".
public function get colorSpace():String public function set colorSpace(value:String):void| duration | property |
public var duration:Number = 150The duration of the marker animations. Set to 0 to skip animation entirely.
The default value is 150.
| easer | property |
public var easer:IEaserThe easer to use for marker animations.
The default value is Sine.
| primaryMarkerPart | property |
public var primaryMarkerPart:UIComponentInstance of the primaryMarkerFactoryPart factory.
| primarySpectrumPart | property |
public var primarySpectrumPart:PrimarySpectrumInstance of the primarySpectrumFactoryPart factory.
| primarySpectrumResolution | property |
primarySpectrumResolution:uintThe width and height (in pixels) of the squares used to draw the primary spectrum. A value of 1 is the best resolution but will have the slowest performance. Values of 3 - 5 typically look good while being much, much faster than a resolution of 1.
E.G. for a picker with dimensions of 100 x 100 pixels, a resolution of 1 means that the vector drawing runtime must render 10,000 rectangles. A resolution of 3 would require 1,111. Only 11% as many rectangles which will deliver nearly an order of magnitude increase in performance with a minimal loss in quality.
The default value is 3.
public function get primarySpectrumResolution():uint public function set primarySpectrumResolution(value:uint):void| secondaryMarkerPart | property |
public var secondaryMarkerPart:UIComponentInstance of the primaryMarkerFactoryPart factory.
| secondarySpectrumPart | property |
public var secondarySpectrumPart:SecondarySpectrumInstance of the secondarySpectrumFactoryPart factory.
| secondarySpectrumResolution | property |
secondarySpectrumResolution:uintThe width and height (in pixels) of the squares used to draw the secondary spectrum. A value of 1 is the best resolution but will have the slowest performance. Values of 3 - 5 typically look good while being much, much faster than a resolution of 1.
E.G. for a picker with dimensions of 100 x 100 pixels, a resolution of 1 means that the vector drawing runtime must render 10,000 rectangles. A resolution of 3 would require 1,111. Only 11% as many rectangles which will deliver nearly an order of magnitude increase in performance with a minimal loss in quality.
The default value is 3.
public function get secondarySpectrumResolution():uint public function set secondarySpectrumResolution(value:uint):void| secondarySpectrumWidth | property |
secondarySpectrumWidth:NumberThe width of the secondary spectrum.
The default value is 14.
public function get secondarySpectrumWidth():Number public function set secondarySpectrumWidth(value:Number):void| selectedColor | property |
selectedColor:uintThe color that is currently selected in the picker. In RGB uint format.
Is bindable; bound to the "valueCommit" FlexEvent.
The default value is 0x31E836.
This property can be used as the source for data binding.
public function get selectedColor():uint public function set selectedColor(value:uint):void| selectedHSLColor | property |
selectedHSLColor:HSLColor [read-only] The selected color in HSL format. Useful if the user defined the selectedColor via the setSelectedHSLColor(), this will return the exact HSL color.
The default value is null.
public function get selectedHSLColor():HSLColor| selectedHSVColor | property |
selectedHSVColor:HSVColor [read-only] The selected color in HSV format. Useful if the user defined the selectedColor via the setSelectedHSVColor(), this will return the exact HSV color.
The default value is null.
public function get selectedHSVColor():HSVColor| spectrumGap | property |
spectrumGap:NumberThe gap between the primary and secondary spectrums.
The default value is 5.
public function get spectrumGap():Number public function set spectrumGap(value:Number):void| getColorCoordinate | () | method |
protected function getColorCoordinate(spectrum:UIComponent):PointReturns the position of the selected color on the passed spectrum.
Parameters
spectrum:UIComponent — the UIComponent for the spectrum
|
Point — the Point object for the position of the color
|
| layoutPrimaryMarker | () | method |
protected function layoutPrimaryMarker(skipAnimation:Boolean = false):voidLayout the primary marker.
Parameters
skipAnimation:Boolean (default = false) |
| layoutSecondaryMarker | () | method |
protected function layoutSecondaryMarker(skipAnimation:Boolean = false):voidLayout the secondary marker.
Parameters
skipAnimation:Boolean (default = false) |
| primarySpectrumPartHandler | () | method |
protected function primarySpectrumPartHandler(event:Event):voidHandles events on the primarySpectrumPart.
Parameters
event:Event — the Event that triggered the handler
|
| secondarySpectrumPartHandler | () | method |
protected function secondarySpectrumPartHandler(event:Event):voidHandles events on the secondarySpectrumWrapperPart.
Parameters
event:Event — the Event that triggered the handler
|
| setSelectedColor | () | method |
public function setSelectedColor(color:uint, dispatch:Boolean = false):voidSet the selected color by passing a uint.
Parameters
color:uint — the RGB uint
| |
dispatch:Boolean (default = false) |
| setSelectedHSLColor | () | method |
public function setSelectedHSLColor(color:HSLColor, dispatch:Boolean = false):voidSet the selected color by passing a HSLColor object. Will store the exact HSL color passed in the "selectedHSLColor" property.
Parameters
color:HSLColor — the HSLColor object
| |
dispatch:Boolean (default = false) |
| setSelectedHSVColor | () | method |
public function setSelectedHSVColor(color:HSVColor, dispatch:Boolean = false):voidSet the selected color by passing a HSVColor object. Will store the exact HSV color passed in the "selectedHSVColor" property.
Parameters
color:HSVColor — the HSVColor to set
| |
dispatch:Boolean (default = false) |
| updatePrimarySpectrumPart | () | method |
protected function updatePrimarySpectrumPart():voidUpdate the PrimarySpectrumPart.
| updateSecondarySpectrumPart | () | method |
protected function updateSecondarySpectrumPart():voidUpdate the SecondarySpectrumPart.
| updateSelectedColorFromMousePosition | () | method |
protected function updateSelectedColorFromMousePosition(spectrum:UIComponent):voidUpdates the selected color based on the mouse position over the passed spectrum. Also updates the spectrums as necessary.
Parameters
spectrum:UIComponent — the UIComponent for the spectrum
|
| change | Event |
ardisia.components.colorSpacePicker.events.ColorSpacePickerEventardisia.components.colorSpacePicker.events.ColorSpacePickerEventDispatched when the "selectedColor" property changes due to user interaction.
| valueCommit | Event |
mx.events.FlexEventmx.events.FlexEventDispatched when the "selectedColor" value changes.