给flexpaper增加注解功能

先看效果图:

位置,大小都是跟随面板进行缩放的。

以前没有写过flex代码,这次为了完成这个功能,稍微了解了下。好了介绍下思路和修改过程。

1.点击图标让鼠标变成note背景图并给paper增加监听事件。对应的代码如下:

[Embed(source="/../assets/image37.png")]
public var clickHand:Class;//图标

//调用的时候
var cursorID:int = CursorManager.setCursor(clickHand);
paper1.addEventListener(MouseEvent.MOUSE_DOWN,addExplain);

2.然后当鼠标点击paper的时候,记录下鼠标的位置,并生成注解框。然后就可以对服务器提交数据了。

最关键的是怎么记录x,y的位置。以便下次load pdf的时候能够准确的加载注解。保存的x,y分别是:

localX = e.stageX + paper1.PaperContainer.horizontalScrollPosition;
localY = paper1.PaperContainer.verticalScrollPosition + e.stageY - 26;

3.读取数据的时候,大家看下我的代码吧,关键看下img的x,y是怎么写的。

//yimiao@iflytek.com
/* paperX=paper1.PageList[0].x 是当时创建的时候获取当时的。
 * 缩放的时候每页中间的间隔6px是不跟随一起缩放的,所以需要减去,然后在进行比例的计算,最后还需要加回来。
*/
public function createImg(imgX:Number):void {
//removeImg();
for(var i:int;i<o.length;i++) {
var img:Image = new Image();
img.source = clickHand;
img.x = (imgX + ((o[i].localX-o[i].paperX)/o[i].Scale)*Number(paper1.Scale));
//Alert.show((o[i].currentPage-1).toString());
img.y = ((o[i].localY-(o[i].currentPage-1)*6)/o[i].Scale)*Number(paper1.Scale) + (o[i].currentPage-1)*6;
//if(paper1.PaperContainer.verticalScrollPosition != 0)
//img.y += 26*Number(paper1.Scale);
img.name = "lists";
img.id = o[i].guid;
img.scaleX = Number(paper1.Scale)/2;
img.scaleY = Number(paper1.Scale)/2;

img.accessibilityDescription = o[i].comment;

img.addEventListener(MouseEvent.CLICK,showComment);


paper1.PaperContainer.addChild(img);
}
}

4.缩放的时候,需要重新改变所加载的注解位置和大小。我的方法时候删除所有注解,然后在重新建立。(当然可以直接改变,我懒得在改了)

在com.devaldi.controls.flexpaper.Viewer.as中找到tweenComplete这个函数。这是当缩放完成的时候会请求这个函数,然后重新改变paper的位置。

我们需要在这个函数中增加一个回调函数。

if(_tweencount==0){
repositionPapers();
    //具体的完成在events文件夹下
dispatchEvent(new ScaleChangeOverEvent(ScaleChangeOverEvent.SCALE_CHANGEOVER,"complete"));
//Alert.show(_displayContainer.getChildAt(0).x.toString());
}

其实他的作用就是通知你,paper的位置修改已经完成,你可以进行你注解的修改了。

private function onScaleChangeOver(event:Event):void{
//Alert.show(paper1.PaperContainer.horizontalScrollPosition.toString());  
    createImg(paper1.PageList[0].x);
}


还有个小地方注意下,就是在FlexPaperViewer.mxml文件中onScaleChanged这个方法里,删除创建的注解。这样保证比较美观,别等到回调函数的时候在删除。本人试过了。

private function onScaleChanged(event:Event):void {
removeImg();
txtPct.text = formatPct(paper1.Scale);
_sliderUserChange = false;
slidPctScale.value = Number(paper1.Scale);
}







原文地址:https://www.cnblogs.com/yimiao/p/2355807.html