步驟:
1.拖放一張300*200的圖片並命名爲“小圖”。
2.拖放一個150*100的矩形(黃底黃邊),並設置【不透明度】爲30%,初始狀態設爲【隱藏】,命名爲“放大鏡”,放置在“小圖”的右下角
3.拖放一個300*200的動態面板,初始狀態設爲【隱藏】,命名爲“放大窗口”,放置在小圖右邊,並在state1面板狀態中放置一張600*400的圖片,命名爲“大圖”
4.添加頁面載入時用例
(1)新增一個全局變量,取名爲“enlarge”
(2)在用例中設置全局變量“enlarge”爲大小圖寬度比例,即【大圖寬度/小圖寬度】
5.爲“放大鏡”添加鼠標移動時的用例
(1)絕對移動“放大器”,x軸移動到【鼠標的x座標-“放大鏡”寬度的一半】,y軸移動到【鼠標的y座標-“放大鏡”高度的一半】,並且左側、右側、頂部和底部的邊界分別爲“小圖”的左側、右側、頂部和底部。
(2)絕對移動“大圖”,x軸移動到【(“小圖”左側-“放大鏡”左側)*OnLoadVariable】,y軸移動到【(“小圖”頂部-“放大鏡”頂部)*OnLoadVariable】。
6.爲“小圖”添加鼠標移動時用例:該用例與“放大鏡”的鼠標移動時用例一樣,直接複製粘貼過來就行了
7.爲“小圖”添加鼠標移入時用例
(1)顯示“放大鏡”
(2)顯示“放大窗口”
8.完成,點擊瀏覽一下
原型查看效果地址:https://3je03h.axshare.com
原型RP文件下載地址:https://download.csdn.net/download/qq_27884377/10757435