Flex-Zoom und Scroll-Ausgabe

Question

Ich bin verpflichtet, eine Leinwand durch HSlider zu zoomen. Das Problem wird nach der Leinwand Zoomen kann ich nicht auf die Spitze navigieren Sie nach links und oben auf der Leinwand das heißt, einen Teil von linker und oberen Leinwand ist nicht sichtbar. Ich kann den Grund nicht finden. Der Quellcode für das Beispiel ist unten angegeben. „

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>

„

Bitte helfen. Vielen Dank im Voraus.

Answer 1

Sie würde dieses Problem nicht haben, wenn stattdessen die zoombare Leinwand von Zentrieren Sie es bei coords in der oberen linken Teil seiner Eltern zeigen würde.

Alternativ können Sie die benötigten Koordinaten berechnen, basierend auf der Größe ihrer Eltern, und nicht lassen Sie sie unter 0 fallen.

Hier ist Code, der helfen wird:

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

Alles, was Sie tun müssen, ist diese Methode zu Ihrer Anwendung hinzufügen und

this.callLater(calculateCoordinates);

am Ende Ihrer Change und adjustDefaultZoom Methoden. Entfernen Sie auch align Eigenschaften von layout_cnv.

Answer 2

Es dauerte eine Weile, diese herauszufinden. Es scheint, dass da Sie vertical und horizontalen Mitte der Leinwand verwenden außerhalb des sichtbaren Bereichs gezogen werden. Bei der Ausführung der rechten Maustaste und wählen Sie ‚Aktualisierungsbereiche anzeigen‘ dann kann man deutlich sehen, dass die Leinwand außerhalb des Bereichs ist.

Wenn Sie die vertical und horizontale Mitte entfernen schien es zu funktionieren (alle von der Leinwand zu sehen, beim Scrollen.)

Auf einer anderen Anmerkung Ich sehe nicht, warum Sie zwei Leinwand mit nichts in der gleichen Platte wollen zwischen ihnen. Vielleicht war das nur für Ihr Beispiel.

Viel Glück

Answer 3

// Deklarieren Sie eine Variable

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

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

... .... in anderer Funktion, um die Farbe ändern

myborderColor:.selectedColor = Color.RED ;

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