码迷,mamicode.com
首页 > 其他好文 > 详细

Tips——RN canvas缩放处理

时间:2019-04-16 16:14:57      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:图像   tps   想象力   加载   ...   思路   研究   sage   封装   

一、关于canvas缩放

canvas图像缩放处理有两种思路:

  • ctx.scale(),对整个canvas进行重绘,会导致每次缩放都重新加载,影响体验效果
  • 在canvas外包层view,直接对外层的view进行缩放

二、view触摸事件

view组件借助RN自带的手势响应系统,已经有完善的触摸事件处理体系。

RN触摸事件处理详解:https://www.race604.com/react-native-touch-event/

其中,PanResponder是一个封装好的用于处理多点触摸交互的手势系统。

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

三、关于缩放

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”,会有意想不到的收获。

Tips——RN canvas缩放处理

标签:图像   tps   想象力   加载   ...   思路   研究   sage   封装   

原文地址:https://www.cnblogs.com/bbcfive/p/10717670.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!