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和adjustDefaultZoom方法结束时。还要从layout_cnv中删除对齐属性。

Answer 2

花了一段时间才弄明白这个。似乎因为您正在使用verticalCenter和水平中心，所以画布将被绘制在可视区域之外。右键单击并选择“显示重绘区域”时，您可以清楚地看到画布位于该区域之外。

删除verticalCenter和水平中心后，它似乎正常工作（滚动时看到所有画布。）

另一方面，我不明白为什么你想要在同一个面板中有两个画布，它们之间没有任何东西。也许这仅仅是为了你的榜样。

祝你好运

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}”

Flex缩放和滚动问题

3 个答案: