Как реализовать Rules на flex

[Juggernaut]

Доброго дня всем, вопрос - как можно реализовать компонент rules (линейка по типу фотошоповской или флешовой) во flex?. Имеются компоненты mx:VRule и mx:HRule - но какие то они "кастрированные", а требуется создать настоящую волосатую линейку с делениями и возможностью зума.

[GBee]

Самому придется писать или поищите готовый. Я тупо метки рисовал в УИкомпоненте. Но можно вроде как то исхитрится полосатой битмапой залить прямоугольник, наверное.

[Juggernaut]

Та не полосатый битмап не катит, во первых размер плавающий во вторых показания меняться будут от сантиметров до дюймов и миллиметров - одним словом линейка должна быть настоящая . В принципе ничего сложного нет в том чтоб сделать 2 широкие полосы и раскидать на них метки через фиксированное расстояние (в зависимости от типа измерения), а потом каждый раз их перерисовывать, но я думал есть способ попроще. На ткнулся на интересный пример http://www.hulstkamp.com/2010/09/29/...4/555#more-555 сижу разбираюсь

Добавлено через 3 часа 29 минут
Вот навоял - так себе получилось, но работает. Может кому пригодится, ну или кто, что лучше предложит

FLEX

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx" 
		 width="100%" height="100%"
		 creationComplete="initRules()" >
	
<fx:Script>
	<![CDATA[
		import mx.controls.HRule;
		import mx.controls.Label;
		import mx.controls.VRule;
		
		[Bindable]private var widthRules:Number = 680; //длинна горизонтального бакграунда
		[Bindable]private var heightRules:Number = 680; //высота вертикального бакграунда
		
		[Bindable]private var positionIndicatorVertical:Number = 0; //позиция вертикального ползунка
		[Bindable]private var positionIndicatorHorizontal:Number = 0; //позиция гори зонтального ползунка
		
		[Bindable]private var heightIndicatorVertical:Number = widthRules - positionIndicatorVertical; //высота вертикального ползунка
		[Bindable]private var widthIndicatorHorizontal:Number = heightRules - positionIndicatorHorizontal; //длинна горизонтального ползунка
		
		[Bindable]private var colorBack:uint=0xEEEEEE;
		
		//попиксельная разметка для различных длин к пикселю
		private var spPr:Array=[{pr:3.92,id:"sm"}, {pr:28,id:"m"}, {pr:72,id:"dm"}]
		private var curentId:int=0; //активный параметр измерения 0-3 spPr:Array
		private var dist:int = 10; //сколько делений между основными показателями
		private var percentZoom:int=0 //Процент увеличения zoom
		private var arrZn:Array=[];
		
		public function initRules():void{
			//формируем деления
			var i:Number=0;
			var xp:Number=hGr.x;
			var yp:Number=vGr.y;
			var idCn:int=0;
			var rlCn:int=0;
			//Формируем горизонтальную полосу
			while(i<widthIndicatorHorizontal/spPr[curentId].pr){
				var vl:VRule = new VRule();
				var vlb:Label = new Label();
				if(i==idCn){
					vl.height = hGr.height;
						vlb.text = rlCn.toString();
						vlb.x = xp;
						vlb.y = vl.height - 14;	
						hPosGrid.addElement(vlb);
					arrZn.push({ln:vl,id:vlb});
					idCn +=dist;
					rlCn ++;
				}else if(i==(idCn-(dist/2))){
					vl.height = hGr.height/2;
					arrZn.push({ln:vl,id:null});
				}else{
					vl.height = hGr.height/4;
					arrZn.push({ln:vl,id:null});
				}
				vl.x = xp; vl.y = 0;
				hPosGrid.addElement(vl);
				xp+=spPr[curentId].pr+percentZoom;
				i++
			}
			i =0;
			xp = 0;
			idCn =0;
			rlCn =0;
			//формируем вертикальную полосу
			while(i<heightIndicatorVertical/spPr[curentId].pr){
				var hl:HRule = new HRule();
				var hlb:Label = new Label();
				if(i==idCn){
					hl.width = hGr.height;
						hlb.text = rlCn.toString();
						hlb.x = hl.width - 14;
						hlb.y = yp;	
						vPosGrid.addElement(hlb);
					arrZn.push({ln:hl,id:hlb});
					idCn +=dist;
					rlCn ++;
				}else if(i==(idCn-(dist/2))){
					hl.width = hGr.height/2;
					arrZn.push({ln:hl,id:null});
				}else{
					hl.width = hGr.height/4;
					arrZn.push({ln:hl,id:null});
				}
				hl.x = 0; hl.y = yp;
				vPosGrid.addElement(hl);
				yp+=spPr[curentId].pr+percentZoom;
				i++
			}
		}
			
	]]>
</fx:Script>
	<s:VGroup id="hGr" x="20">
		<s:Line width="{widthRules}">
			<s:stroke>
				<s:SolidColorStroke color="{colorBack}"
									caps="square"
									weight="20"
									alpha="1" />
			</s:stroke>
		</s:Line>
	</s:VGroup>
	<s:VGroup id="vGr" y="20">
		<s:Line height="{heightRules}">
			<s:stroke>
				<s:SolidColorStroke color="{colorBack}"
									caps="square"
									weight="20"
									alpha="1" />
			</s:stroke>
		</s:Line>
	</s:VGroup>
	<mx:Canvas id="vPosGrid" 
			   verticalScrollPolicy="off" 
			   horizontalScrollPolicy="off"
			   y="{positionIndicatorVertical}" height="{heightIndicatorVertical}"/>
	<mx:Canvas id="hPosGrid" 
			   verticalScrollPolicy="off" 
			   horizontalScrollPolicy="off"
			   x="{positionIndicatorHorizontal}" width="{widthIndicatorHorizontal}"/>
</s:Group>