react-native-web-canvas

原创 2017年11月13日 20:44:01

react-native-web-canvas

基于webview实现的canvas画布,提供了默认的几个接口

  1. _pen画笔
  2. _clean橡皮
  3. _addImageUrl以url的方式导入图片
  4. _addImageBase64以base64的方式导入图片
  5. _rotateRight向右旋转
  6. _getBase64把画布以base64的形式导出
  7. 通过props设置画布的宽高
  8. 通过回调的方式获取base64

demo

<WebCanvas 
      handleBase64={this._handleBase64.bind(this)}
      ref='canvas'
      height={500} 
      width={500}
    />

功能实现

_pen(){
this.refs.canvas._pen();
}

_clean(){
this.refs.canvas._clean();
}

// 以url的形式添加背景
_addImageUrl(){
this.refs.canvas._addImageUrl(url);
}

// 以base64的形式添加背景
_addImageBase64(){
this.refs.canvas._addImageBase64(base64);
}

// 得到图片的base64形式
_getBase64(){
this.refs.canvas._getBase64(base64);
}

// 保存base64
_handleBase64(data){
alert(data)
}

// 图片右转
_rotateRight(){
this.refs.canvas._rotateRight();
}

使用

  • git clone git@github.com:qn9301/react-native-web-canvas.git
    • WebCanvas.js文件放入你的项目中
    • import WebCanvas from 'path/to/WebCanvas'即可

在公司项目中遇到了一个需要画板的模块,但是找了很久没有中意的,与项目相符的组件,于是打算自己写一个

知识点

  1. webview
  2. postMessage
  3. canvas
  4. 列表内容

预知内容

  1. 你应该了解rn的webview
  2. postMessage的作用
  3. canvas基本api的使用
  4. js的语法。。这个是废话

贴上代码

constructor(props) {
    super(props);
    this.state = {
      height: this.props.height,
      width: this.props.width
    }
  }

我们希望组件的宽高由外部的父组件决定,webview初始化html的时候也需要设置成跟组件的宽高相同,所以传入了宽和高

  render() {
    return (
      <View style={{width:this.state.width, height:this.state.height}}>  
        <WebView 
          style={{width:this.state.width, height:this.state.height}}
          ref = {(w) => {this.webview = w}}
          onLoad={this.webviewload.bind(this)}
          source={{html: html}}
          onMessage={this.messageHandler.bind(this)}
          javaScriptEnabled={true}
          domStorageEnabled={false}
          automaticallyAdjustContentInsets={true}
          scalesPageToFit={false}
          />
      </View>
    );
  }

1 . 我们将webview组件保存成为这个类的一个属性,而不是this.refs的形式,看着更加清爽
2. 其次我们为webview传入我们自己写好的canvas画布的html代码
3. 监听webview,并在加载成功后注入我们的js代码,注入的代码来初始化我们的canvas画布

  webviewload(){
    // alert('加载成功!')
    this.webview.injectJavaScript('init_canvas('+this.props.width+', '+this.props.height+');');  
  }

调用html中写好的初始化方法,初始化整个画布

通信部分

// 用于监听html想rn发送的信息
onMessage={this.messageHandler.bind(this)}
  messageHandler(e){
    var obj = JSON.parse(e.nativeEvent.data);
    if (obj.action == 0){
      this.props.handleBase64(obj.data);
    }
  } 

唯一的通信只是将canvas转换成base64传到我们的组件

  // 将我们的指令打包成json字符串传送给html
  post(obj){
    this.webview.postMessage(JSON.stringify(obj));
  }
  // 得到图片的base64形式
  _getBase64(){
    this.post({action: 0})
  }

再来看html部分

    window.document.addEventListener('message', function (e){
        var obj = JSON.parse(e.data);
        switch (parseInt(obj.action)){
          case 1:
              /* 铅笔 */
              isclean=false;
              break;
          case 2:
              /* 橡皮 */
              isclean=true;
              break;
          case 3:
              /* 右转 */
              rotateRight();
              break;
          case 4:
              /* url */
              createImg(obj.data);
              break;
          case 5:
              /* case64 */
              createImg(obj.data);
              break;
          case 0:
              /* 返回base64 */
              returnBase64();
              break;
        }
    });

通过postMessage为html传输指令,调用html中的api,实现效果

其他的都是通过html中的js代码实现的,我只是做了一个实现的方法,具体的大家可以根据大家自己的需要改写html代码

版权声明:本文为博主原创文章,转载请注明出处。

React实战-深入分析ReactNative中的动画效果

React实战-深入分析ReactNative中的动画效果 说起动画效果感觉回到JavaScript的起源了,在早期的Web开发中,JS更多的是扮演着页面特效的角色,当然也只是属于做些边角料的工作,真...
  • loveu2000000
  • loveu2000000
  • 2016年09月24日 22:26
  • 5250

react-native-art画二次贝塞尔曲线实现

1、关于react-native ART库的使用,目前网上能搜到的少之又少,简书上的一篇react-native-art 绘图入门,从基本上讲解了一下react-native-art的使用方法,但是只...
  • xiongqiangwin1314
  • xiongqiangwin1314
  • 2016年12月19日 17:58
  • 2328

基于Canvas和React极简游戏(一)

游戏设计思路游戏引擎:游戏循环,游戏原型 我把这个 miniGame的实现看作是业务逻辑的实现。 因为我希望我的react组件可以复用,而不是嵌入太多业务逻辑的代码。 所以import 这个mi...
  • jlin991
  • jlin991
  • 2017年03月19日 11:13
  • 1833

React Native 基于画板简析封装安卓原生UI

封装Android原生视图的基本步骤展示。
  • SEATELL
  • SEATELL
  • 2017年12月25日 15:10
  • 65

自定义View签名画板并保存

项目中用到签名的功能。实现完记录一下。效果图:首先是签名的功能。原理很简单将我们手指一动的轨迹绘制出来就可以了。主要用到了canvas的绘制path的api。 canvas.drawPath(mPat...
  • mingyunxiaohai
  • mingyunxiaohai
  • 2016年09月18日 10:52
  • 1666

React-Native系列Android自定义原生UI组件

由于官方的Android原生UI组件解释的并不是很完整,根据个人的不断摸索,终于成功完成原生组件的制作,所以写下这篇文章作为记录,也给让小白们少走些弯路。我这里通过讲解制作一个绘圆组件的流程,来学习制...
  • d780793370
  • d780793370
  • 2016年09月17日 22:18
  • 5307

React Native 常用控件

React 初识,常用基本控件
  • RuseAndJack
  • RuseAndJack
  • 2016年11月11日 11:15
  • 732

如何将React Native 项目运行在 Web 浏览器上面

React Native 的出现,让前端工程师拥有了使用 JavaScript 编写原生 APP 的能力。相比之前的 Web app 来说,对于性能和用户体验提升了非常多。 但是 React Nati...
  • OneCrazyDog
  • OneCrazyDog
  • 2016年12月07日 10:51
  • 1240

react-native项目跑在web上(react-web)

1.项目搭建 版本: “dependencies”: { “react”: “15.0.0”, “react-native”: “0.48.2”...
  • m0_37829185
  • m0_37829185
  • 2017年12月15日 12:09
  • 84

react-native-webview-bridge使用问题

1.在github上将该三方插件集成到自己项目中,具体参考:https://github.com/alinz/react-native-webview-bridge 在个人当前试用版会导致不兼容,修改...
  • lxq0426
  • lxq0426
  • 2016年07月09日 14:50
  • 4671
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react-native-web-canvas
举报原因:
原因补充:

(最多只允许输入30个字)