寫一個圖片預覽器（react-native）,溫習一下初中數學

william 發布于2019-08-21 11:52 / 2970人閱讀

摘要：什么意思呢看圖吧合理的解釋縮放操作時，上面的始終觸點在圓圓的眼睛上面對不起圓圓了，下面的觸點始終在中指戒指上一點點。不過這也是為了滿足自己的開發需求，沒有開放很多可定制的內容。最后為了裝個學英語，寫英文的

statistics

source	download	download/month
npmjs.com
npm.taobao.org
cnpmjs.org

需求很簡單：

可以放大任意一處我想放大的地方

可以移動，查看任意圖片細節

支持網絡圖片和本地圖片

技術實現 一、加載圖片和獲取圖片尺寸 二、設置尺寸、放大到剛好滿屏、居中

react-native圖片transform的縮放的中心點在圖片的中心，因此，把圖片先發居中就好

比較圖片的長寬比和屏幕的寬高比，如果是圖片比較寬那么就橫向滿屏，如果比較高就縱向滿屏，如下圖：

    /*
    * center and zoom to fit the window
    * @ _width: the picture width
    * @ _height: the picture height
    * */
    center(_width, _height){
        let {width, height} = Dimensions.get("window"),
            rateImage = _width/_height,
            rateWindow = width/height,
            top,
            left,
            scale
        if (rateImage > rateWindow) {
            scale = width/_width
        } else {
            scale = height/_height
        }
        top = (height - _height)/2
        left = (width - _width)/2
        this.setState({
            left,
            top,
            width:_width,
            height: _height,
            scale,
            rate: scale
        })
    }

三、準備移動和縮放動作

1.設置兩個變量來記錄（上一次手指的和縮放的）狀態

        this._touches = [
            {},
            {}
        ]
        this._zoom = undefined

2.每次動作結束之后清除狀態

            onPanResponderRelease: (evt, gestureState) => {
                // reset
                this._touches = [
                    {},
                    {}
                ]
                this._zoom = undefined
            }

3.每次開始觸摸的時候的時候記錄狀態

// touche start
onPanResponderGrant:(evt, gestureState) => {
    // mark touches info
    for (let x in this._touches) {
    if (evt.nativeEvent.touches[x]) {
        this._touches[x].x = evt.nativeEvent.touches[x].pageX
        this._touches[x].y = evt.nativeEvent.touches[x].pageY
        this._touches[x].identifier = evt.nativeEvent.touches[x].identifier
        }
    }
},

4.每次移動的時候，如果沒有記錄狀態就記錄狀態，如果有記錄就開始做動作啦↓↓↓

四、移動圖片

1.這個很簡單，只要圖片跟著手指動就可以了，因為縮放變換的中心是圖片的中心，所以只需要簡單的改變left 和 top 就可以了，??

// compute the distance has touch moved
let moveX = evt.nativeEvent.touches[0].pageX - this._touches[0].x
let moveY = evt.nativeEvent.touches[0].pageY - this._touches[0].y
// set the state
this.state.left += moveX
this.state.top += moveY
this.setState({
    left: this.state.left,
    top: this.state.top
})

五、放大圖片

一個宗旨：圖片跟著手指動。什么意思呢？看圖吧！

合理的解釋：縮放操作時，上面的始終觸點在圓圓的眼睛上面（對不起圓圓了），下面的觸點始終在中指戒指上一點點。

1、縮放比例計算（以上圖為例）

// 縮放前，戒指到眼睛的距離為 d，這個是圖片的真實距離
// 屏幕上，戒指到眼睛的距離為D
// 縮放比例為 S,屏幕的尺寸/圖片的尺寸
// 因此有個等式
d * S = D
// 那么，在新的位置
dn * Sn = Dn
// 在圖片中，dn是相等的
// 因此，解個方程可以得到
Sn = Dn/D * S
// Dn 和 D 分別可以有 新的觸點的坐標 和 舊的 觸點的坐標 表示，S已知
// 這樣我們就得到了 新的縮放比例 和 觸點坐標的關系了

2、圖片位置的計算（已上圖為例）

剛剛已經說到，RN變換的中心點是圖片的中心，那么，我要放大一個角落的位置，如何讓圖片看起來是以這個角落為縮放中心呢？改變left 和 top 就可以了。

// 以left為例，top同理可得
// 上圖中，兩個觸點的連線的中點位置大約是圓圓的第二顆牙齒（下面稱為牙齒）
// 設牙齒的X坐標為 X （屏幕的坐標）
// 牙齒在圖片中距離圖片中線的距離為 d
// 圖片的實際寬度為w
// 圖片的位置為l（事實上為放大前的左邊距）
// 縮放比例為 S,屏幕的尺寸/圖片的尺寸
// 圖片的縮放中心是圖片的中心，因此有一個等式：
X = (0.5 * w + l) - d * S
// 那么對于新的位置也有一樣的等式
Xn = (0.5 * wn + ln) - dn * Sn
// 事實上就，X的位置不變，d的位置不變，w也不會變，那么就有等式了
(0.5 * w + l) - d * S = (0.5 * w + ln) - d * Sn
// 由這里就可以解出ln 和 l , S ,Sn的關系了。
// l，S已知，Sn上面已經算出來了

結語

到此整個思路已經出來了，代碼看github。
不過這也是為了滿足自己的開發需求，沒有開放很多可定制的內容。
最后為了裝個X(學英語??)，寫英文的README

云服務器 GPU云服務器初中數學圖片預覽清空圖片預覽圖片本地預覽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87206.html

小哥哥小姐姐看過來，這里有個組件庫需要您簽收一下

摘要：如果你想減少包大小，你可以這樣引入事實上，每個組件都是支持單獨安裝的，我們也推薦你使用這種方式引入組件。以下是運行示例后各界面的截圖組件圖標右上角的圓形徽標數字。 1. 前言一直以來都想做個組件庫，一方面是對工作中常遇問題的總結，另一方面也確實能夠提升工作效率（誰又不想造一個屬于自己的輪子呢~），于是乎就有了本文的主角兒rn-components-kit。市面上web的UI組件庫如...

Alan 2019-08-26 10:47 評論0 收藏0
題庫分庫分表架構方案

摘要：個人博客地址方案項目背景在現在題庫架構下，針對新購買的多道數據進行整合，不影響現有功能。數據切分盡量通過數據冗余或表分組來降低跨庫的可能。個人博客地址 https://www.texixi.com/2019/0... 方案項目背景在現在題庫架構下，針對新購買的1300W多道數據進行整合，不影響現有功能。由于數據量偏多，需要進行數據的切分目標場景兼容舊的功能對1300多W...

kohoh_ 2019-07-01 11:17 評論0 收藏0
[零基礎學python]永遠強大的函數

摘要：萊布尼茲所指的函數現在被稱作可導函數，數學家之外的普通人一般接觸到的函數即屬此類。中文的函數一詞由清朝數學家李善蘭譯出。前面提供的維基百科中的函數詞條，里面可以做一個概覽。函數，對于人類來講，能夠發展到這個數學思維層次，是一個飛躍。可以說，它的提出，直接加快了現代科技和社會的發展，不論是現代的任何科技門類，乃至于經濟學、政治學、社會學等，都已經普遍使用函數。下面一段來自維基百科（...

cangck_X 2019-07-24 17:34 評論0 收藏0
[ 一起學React系列 -- 2 ] UI的靈魂--State

摘要：首先賣個關子，下面我們一起來復習下小學還是初中的一枚數學知識。一旦更改了，會觸發組件的重新渲染。為了頁面渲染性能的考慮，有助于在中進行比較并確定是否重新渲染。概念引入對于React來說, 沒有State就沒有頁面的渲染, 我們也將什么都看不到咋一聽怎么那么唬人？不過的確是這樣，正如標題所言State是UI的靈魂。我們都知道React的核心思想之一是組件化，將頁面所展示的東西按一定...

XBaron 2019-08-23 11:43 評論0 收藏0