Гибкое увеличение и прокрутка - PullRequest
Новая
       47

Гибкое увеличение и прокрутка

1 голос
/ 19 июня 2009

Мне нужно увеличить холст через 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>

«

пожалуйста, помогите. Заранее спасибо.

Ответы [ 3 ]

4 голосов
/ 19 июня 2009

У вас не будет этой проблемы, если вместо центрирования масштабируемого холста вы будете показывать его в координатах в верхней левой части родительского элемента.

В качестве альтернативы вы можете рассчитать необходимые координаты, основываясь на размере его родителя, и не позволить им опуститься ниже 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 и AdjustDefaultZoom. Также удалите свойства выравнивания из layout_cnv.

0 голосов
/ 09 октября 2009

// Объявляем переменную 

[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}”
0 голосов
/ 20 июня 2009

Потребовалось время, чтобы понять это. Кажется, что поскольку вы используете вертикальный центр и горизонтальный центр, холст рисуется за пределами видимой области. При запуске щелкните правой кнопкой мыши и выберите «показывать области перерисовки», тогда вы можете четко видеть, что холст находится за пределами области.

Как только вы удалили вертикальный центр и горизонтальный центр, казалось, что он работает (видя весь холст при прокрутке.)

В другой заметке я не понимаю, зачем вам два холста на одной панели, между которыми ничего нет. Может быть, это было только для вашего примера.

Удачи

...