Tips——RN canvas縮放處理

1、關於canvas縮放

canvas圖像縮放處理有兩種思路：

• ctx.scale()，對整個canvas進行重繪，會致使每次縮放都從新加載，影響體驗效果
• 在canvas外包層view，直接對外層的view進行縮放

2、view觸摸事件

view組件藉助RN自帶的手勢響應系統，已經有完善的觸摸事件處理體系。

RN觸摸事件處理詳解：https://www.race604.com/react-native-touch-event/

其中，PanResponder是一個封裝好的用於處理多點觸摸交互的手勢系統。

基本用法：https://reactnative.cn/docs/panresponder/#docsNav

3、關於縮放

A pure JavaScript RN component that makes ANY views transformable using gestures like pinch, double tap or pull.：react-native-view-transformer（https://github.com/ldn0x7dc/react-native-view-transformer）

用輪子封裝自定義組件便可：

Usage import ViewTransformer from 'react-native-view-transformer'; ... render() { return ( <ViewTransformer>
      //ANY views
    </ViewTransformer>
 ); }

一個及其有效的學習方式：研究別人輪子的實現方式，既有助於深刻理解RN，同時還能激發想象力。

血的教訓：

當你搜索「RN 手勢識別」、「panresponder 縮放」等等，發現超過1個小時尚未解決問題，那麼請直接搜索「RN gesture recognition」、「panresponder zoom」，會有意想不到的收穫。