中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

整個(gè)小案例耗時(shí)大概在1個(gè)小時(shí)，對(duì)于動(dòng)態(tài)面板也有了些新的認(rèn)識(shí)。

最近耳機(jī)前面的3.5mm接頭被弄斷，為了修好耳機(jī)，在淘寶上選接頭的時(shí)候，“發(fā)現(xiàn)”鼠標(biāo)在移動(dòng)到圖片上可以放大圖片細(xì)節(jié)。如圖：

以前看著也沒什么感覺，現(xiàn)在正好在學(xué)習(xí)axure，就想著看能不能實(shí)現(xiàn)這個(gè)效果；做下來整個(gè)小案例耗時(shí)大概在1個(gè)小時(shí)，對(duì)于動(dòng)態(tài)面板也有了些新的認(rèn)識(shí)。

預(yù)期實(shí)現(xiàn)功能

1. 鼠標(biāo)在小圖上移動(dòng)，獲取固定范圍內(nèi)的高清大圖；
2. 放大的范圍不能超出圖片本身的邊界。

思路整理

根據(jù)要實(shí)現(xiàn)的功能，并參考上面的圖，分析我們需要準(zhǔn)備的元件如下：

1. 一張較小的原圖origin；
2. 一張長寬同比例放大的高清大圖tripleImg。由于只需要模擬，這里用了張固定3倍大小的圖；
3. 一個(gè)可以挪動(dòng)的正方形框zoomSquare：模擬一個(gè)放大鏡。

動(dòng)作分析：

（1）放大鏡的挪動(dòng)

• 涉及到圖形的移動(dòng)，初步分析需要用到動(dòng)態(tài)面板
• 無法與上面效果完全一樣，僅靠移動(dòng)鼠標(biāo)就能達(dá)到效果
• 查看動(dòng)態(tài)面板支持的事件，找到能夠?qū)崿F(xiàn)我們要求的動(dòng)作——“拖動(dòng)時(shí)”

（2）大圖tripleImg的展示

• zoomSquare挪動(dòng)的時(shí)候，大圖只顯示出對(duì)應(yīng)的部分，可以使用動(dòng)態(tài)面板實(shí)現(xiàn)，并注意不要選擇自動(dòng)調(diào)整為內(nèi)容尺寸。
• 在為了配合展示對(duì)應(yīng)的部分，大圖需要進(jìn)行同比例的相對(duì)移動(dòng)，比如當(dāng)放大鏡zoomSquare在向右移動(dòng)時(shí)，我們的高清圖在向左移動(dòng)，將需要展示的部分放置于動(dòng)態(tài)面板處。

主要界面

主界面

動(dòng)態(tài)面板1-放大鏡

動(dòng)態(tài)面板2-高清圖

功能實(shí)現(xiàn)

1. 使用圖片元件，添加兩張圖片，大小比例是3（設(shè)置全局變量rate=3）。開始考慮到為了方便后續(xù)對(duì)位置的計(jì)算，保持兩張圖片都貼邊，即x起始坐標(biāo)為0，小圖的寬是196像素。想著只需要計(jì)算大圖的y就可以了。后來發(fā)現(xiàn)這個(gè)完全沒有必要，具體后面會(huì)提到。

2. 接下來，按同樣的比例設(shè)置好正方形的大小。如圖：

3. 轉(zhuǎn)換兩張圖片為動(dòng)態(tài)面板，并加以命名（命名這事兒真的挺重要，要保持這個(gè)習(xí)慣）；

4. 選中zoomP設(shè)置“拖動(dòng)時(shí)”交互用例如圖：

設(shè)置方塊挪動(dòng)時(shí)的邊界

設(shè)置挪動(dòng)時(shí)，大圖顯示的位置

一開始將y設(shè)置為[[-(zoomSquare.y+196)]]，發(fā)現(xiàn)圖片無論如何都到不了預(yù)想中的地方，后來在tranceTxt中將當(dāng)前zoomSquare坐標(biāo)打印出來，并且挪動(dòng)小圖位置發(fā)現(xiàn)：動(dòng)態(tài)面板的坐標(biāo)系計(jì)算只基于它所處的state頁面，而與外層頁面無關(guān)。無論在index頁面將圖片放在哪里，只要state頁面中它是以(0，0)為起點(diǎn)，那么可以直接取當(dāng)前元件坐標(biāo)即可；

最終只需要按照下圖設(shè)置坐標(biāo)：

總結(jié)

1. 整體實(shí)現(xiàn)不復(fù)雜，達(dá)到當(dāng)初設(shè)定的目標(biāo)。對(duì)于動(dòng)態(tài)面板的坐標(biāo)計(jì)算也有了更深的印象，個(gè)人感覺這個(gè)在教程中沒有看到，不知道是不是自己看漏了。

2. 如果不使用方塊當(dāng)做放大鏡，默認(rèn)以鼠標(biāo)為中心進(jìn)行高清圖片的展示也是可以的。此時(shí)只需要在origin圖片上配置“移動(dòng)時(shí)”事件，當(dāng)然這個(gè)時(shí)候就需要考慮坐標(biāo)的計(jì)算了，參考配置如圖：

附上下載鏈接：http://url.cn/55kfZET

本文由 @盜不留蘅 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于 CC0 協(xié)議