Zoom flessibile e problema di scorrimento

Question

Mi viene richiesto di ingrandire una tela tramite Hslider. Il problema è che dopo aver ingrandito la tela non riesco a scorrere fino all'estrema sinistra e la parte superiore della tela, ovvero alcune parti della tela sinistra e superiore non sono visibili. non riesco a trovare il motivo. Di seguito è riportato il codice sorgente per l'esempio. & Quot;

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>

& Quot;

per favore aiutatemi. Grazie in anticipo.

Answer 1

Non avresti questo problema se invece di centrare la tela zoomabile, la mostrassi ai coord nella parte in alto a sinistra del suo genitore.

In alternativa puoi calcolare le coordinate necessarie, in base alle dimensioni del suo genitore, e non lasciarle scendere al di sotto di 0.

Ecco il codice che ti aiuterà:

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);
}

Tutto quello che devi fare è aggiungere questo metodo alla tua applicazione e

this.callLater(calculateCoordinates);

alla fine dei metodi changeZoom e AdjustDefaultZoom. Rimuovere anche le proprietà di allineamento da layout_cnv.

Answer 2

Ci è voluto un po 'per capire questo. Sembra che da quando stai usando verticalCenter e il centro orizzontale la tela viene disegnata al di fuori dell'area visibile. Quando esegui il tasto destro del mouse e seleziona "mostra aree ridisegnate", puoi vedere chiaramente che l'area di disegno è al di fuori dell'area.

Dopo aver rimosso verticalCenter e il centro orizzontale, sembrava funzionare (vedere tutta la tela mentre si scorre.)

In un'altra nota non vedo perché vuoi due tele nello stesso pannello senza nulla tra loro. Forse questo era solo per il tuo esempio.

Buona fortuna

Answer 3

// Dichiara una variabile

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

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

& # 8230; & # 8230 ;. in altre funzioni cambia il colore

myborderColor:.selectedColor = Color.RED ;

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