_pen
画笔_clean
橡皮_addImageUrl
以url的方式导入图片_addImageBase64
以base64的方式导入图片_rotateRight
向右旋转_getBase64
把画布以base64的形式导出- 通过props设置画布的宽高
- 通过回调的方式获取base64
<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'
即可
- webview
- postMessage
- canvas
- 列表内容
- 你应该了解rn的webview
- postMessage的作用
- canvas基本api的使用
- 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})
}
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,实现效果
- ps: 刚接触rn的童鞋可以来看看我这个随便写的项目,里面是我练手的项目,我会慢慢把他写完,也会遇到很多坑,欢迎大家来一起踩坑 ,欢迎喜欢的童鞋star
- 项目地址