Zoom 및 스크롤 문제를 플렉스하십시오

Question

HSLIDER를 통해 캔버스를 확대해야합니다. 문제는 캔버스를 확대 한 후 캔버스의 왼쪽과 상단으로 스크롤 할 수 없다는 것입니다. 즉 왼쪽과 상단 캔버스의 일부는 보이지 않습니다. 이유를 찾을 수 없습니다. 예제의 소스 코드는 다음과 같습니다. "

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>

"

도와주세요 . 미리 감사드립니다.

Answer 1

확대 가능한 캔버스를 중심으로하는 대신 부모의 왼쪽 상단에 코디로 표시되면이 문제가 발생하지 않습니다.

또는 부모의 크기에 따라 필요한 좌표를 계산하고 0 이하로 떨어 뜨리지 않도록 할 수 있습니다.

다음은 도움이 될 코드입니다.

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

이 방법을 응용 프로그램에 추가하고

this.callLater(calculateCoordinates);

ChangeZoom 및 AdgredeFaultZoom 메소드의 끝에. 또한 layout_cnv에서 정렬 속성을 제거하십시오.

Answer 2

이것을 알아내는 데 시간이 걸렸습니다. 수직 센터 및 수평 센터를 사용하고 있기 때문에 캔버스가 볼 수있는 영역 밖에서 그려지는 것 같습니다. 마우스 오른쪽 버튼을 클릭하고 'Redraw Regains Show'를 선택하면 캔버스가 해당 지역 외부에 있음을 명확하게 알 수 있습니다.

수직 센터 및 수평 중심을 제거하면 작동하는 것처럼 보였습니다 (스크롤하는 동안 모든 캔버스가 보입니다.)

또 다른 메모에서 나는 왜 같은 패널에 두 개의 캔버스를 원하는지 알 수 없습니다. 아마도 이것은 당신의 모범을위한 것일 수도 있습니다.

행운을 빕니다

Answer 3

// 변수를 선언합니다

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

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

……. 다른 기능에서는 색상이 변경됩니다

myborderColor:.selectedColor = Color.RED ;

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