1

我需要通过 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>

"

请帮忙 。提前致谢。

4

3 回答 3

4

如果不是将可缩放画布居中，而是将其显示在其父级左上角的坐标处，则不会出现此问题。

或者，您可以根据其父级的大小计算所需的坐标，而不是让它们低于 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 中删除对齐属性。

于 2009-06-19T18:23:45.480 回答
0

花了一段时间才弄清楚这一点。似乎由于您使用的是垂直中心和水平中心，因此画布被绘制在可视区域之外。当运行右键单击并选择“显示重绘区域”时，您可以清楚地看到画布在该区域之外。

一旦你删除了垂直中心和水平中心，它似乎正在工作（在滚动时看到所有的画布。）

另一方面，我不明白为什么要在同一个面板中放置两个画布，它们之间没有任何内容。也许这只是为了你的例子。

祝你好运

于 2009-06-20T02:36:14.067 回答
0

//声明一个变量

[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}”
于 2009-10-09T16:40:53.057 回答