給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是怎么寫的。

//[e-mail]

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