zoom Flex e emissão de rolagem

Question

eu sou obrigado a aplicar zoom em uma tela através HSlider. O problema é depois de ter aproximado a tela i não pode rolar para a extrema esquerda e superior da tela ou seja uma parte de esquerda e superior da lona não são visíveis. i não pode encontrar a razão. O código de fonte para o exemplo é dado abaixo. "

import mx.events.SliderEvent;

private function changeZoom(event:SliderEvent) : void
{
layout_cnv.scaleY = event.target.values[0]*2/100;
layout_cnv.scaleX = event.target.values[0]*2/100;
}

private function adjustDefaultZoom() : void
{
layout_cnv.scaleX = slider.values[0]/100*2;
layout_cnv.scaleY = slider.values[0]/100*2;
}

private function myDataTipFunc(val:String):String {
            return  String(val)+ "%";
        }

]]>
</mx:Script>

<mx:Panel title="Zoom Demo" width="100%" height="100%">

<mx:Canvas id="canvas" width="100%" height="100%"  horizontalScrollPosition="500">

<!--<mx:Image id="img" x="{canvas.width/2 - img.width/2}"
y="{canvas.height/2 - img.height/2}"
source="@Embed('../assets/products/Nokia_6630.png')"
creationComplete="adjustDefaultZoom()"
/>-->

<mx:Canvas visible="true" id="layout_cnv" creationComplete="adjustDefaultZoom()"  borderStyle="solid" height="300"

             width="500" verticalCenter="0" horizontalCenter="0"
              verticalScrollPolicy="off" horizontalScrollPolicy="off" backgroundColor="#FFFFFF">

        <mx:TextArea id="company_name_ta" visible="true"   selectable="true"  editable="true" height="20" backgroundAlpha="0.0" borderColor="#000000"  width="200" fontSize="14" 
            borderStyle="solid"  x="10" y="10" />
        <mx:TextArea id="job_ta" height="20"  selectable="true" borderColor="#000000" width="200"  x="289" y="10"  backgroundAlpha="0.0" textAlign="right"/>
        <mx:TextArea id="fullname_ta" height="20"    selectable="true" backgroundAlpha="0.0" borderColor="#000000" width="200"  x="10" y="38" editable="true" enabled="true"/>
        <mx:TextArea id="adress_line3_ta"  height="20" selectable="true" backgroundAlpha="0.0" borderColor="#000000"  width="200" x="10" y="268"/>
        <mx:TextArea id="adress_line2_ta"  height="20" selectable="true" backgroundAlpha="0.0" borderColor="#000000"  width="200"  x="10" y="240"/>
        <mx:TextArea id="adress_line1_ta" height="20"   selectable="true" backgroundAlpha="0.0" borderColor="#000000"  width="200" y="212" x="10"/>
        <mx:TextArea id="mobile_ta" height="20" selectable="true" backgroundAlpha="0.0" borderColor="#000000" width="200"  x="289" y="40"  textAlign="right"/>
        <mx:TextArea id="fax_ta"  height="20"  selectable="true" backgroundAlpha="0.0" borderColor="#000000" width="200" y="68" x="289"  textAlign="right"/>
        <mx:TextArea id="email_ta" height="20"  selectable="true" backgroundAlpha="0.0" borderColor="#000000" width="200" x="289" y="268" textAlign="right"/>
        </mx:Canvas>
</mx:Canvas>

<mx:ControlBar horizontalAlign="center">
<mx:HSlider id="slider"
width="400"
minimum="1"
maximum="100"
labels="['0%','100%']"
values="[50]" 
tickInterval="10"
snapInterval="1" 
liveDragging="true" 
change="changeZoom(event)"
 dataTipFormatFunction="myDataTipFunc" />

</mx:ControlBar>

</mx:Panel>

"

Por favor, ajudem. Agradecemos antecipadamente.

Answer 1

Você não teria esse problema se, em vez de centrar a tela com zoom, você apresente-a no coords no topo parte esquerda de seu pai.

Alternativamente, você pode calcular as coordenadas necessárias, com base no tamanho do seu pai, e não deixá-los cair abaixo de 0.

O código aqui que vai ajudar:

private function calculateCoordinates() : void
{
    var x : Number = (canvas.width - layout_cnv.width) / 2;
    x = x < 0 ? 0 : x;
    var y : Number = (canvas.height - layout_cnv.height) / 2;
    y = y < 0 ? 0 : y;
    layout_cnv.move(x, y);
}

Tudo que você tem a fazer é adicionar esse método para sua aplicação e

this.callLater(calculateCoordinates);

no final de seus métodos changeZoom e adjustDefaultZoom. Também remover as propriedades de alinhamento de layout_cnv.

Answer 2

Levou um tempo para descobrir isso. Parece que desde que você está usando verticalCenter e centro horizontal da tela está sendo desenhado fora da área visível. Ao executar clique com o botão direito e selecione 'Mostrar regiões de redesenho', então você pode ver claramente que a tela é fora da área.

Uma vez que você remover o centro verticalCenter e horizontal parecia estar a trabalhar (ver toda a tela durante a rolagem.)

Em outra nota, não vejo por que você quer duas lona no mesmo painel com nada entre eles. Talvez este foi apenas para o seu exemplo.

Boa sorte

Answer 3

// Declare uma variável

[Bindable]
public var myborderColor: ColorPicker = new ColorPicker();

private function init():void
{
myborderColor:.selectedColor = Color.WHITE ;

... .... em outra função mudar a cor

myborderColor:.selectedColor = Color.RED ;

mx:TextInput id=”myText” backgroundColor=”{numcasoborderColor.selectedColor}”