给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是怎么写的。

//[email protected]

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