在 WebView 中反应本机画布
[英]React Native canvas in WebView
问题描述
I'm trying to code a "paint" Android app with React Native 0.17.
我正在尝试使用 React Native 0.17 编写一个“绘画”Android 应用程序。
I have a Canvas component (strongly inspired by react-native-canvas ):我有一个Canvas组件（强烈受到react-native-canvas 的启发）：
import React from 'react-native';
import Paint from '../utils/paint'
var {
View,
WebView
} = React;
const Canvas = React.createClass({
render() {
return (
<WebView
html={Paint}
style={this.props.style}
javaScriptEnabledAndroid={true}
/>
);
},
});
export default Canvas;
and a Paint component that I use in the html props of the WebView in the Canvas component above.以及我在上面Canvas组件中WebView的html道具中使用的Paint组件。
This component is nothing more than a very long string containing HTML and JS that come from this tuto: creating-a-paint-application-with-html5-canvas这个组件只不过是一个很长的字符串，包含来自这个教程的 HTML 和 JS： creating-a-paint-application-with-html5-canvas
export default `<html>
<head></head>
<body>
<h1 id='toto'>TATA</h1>
<br />
<div id="sketch">
<canvas id="paint" style='border: 1px solid black'></canvas>
</div>
<script>
(function() {
var canvas = document.querySelector('#paint');
var ctx = canvas.getContext('2d');
var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
var mouse = {x: 0, y: 0};
var start_events = ["mousedown", "touchstart"];
var move_events = ["mousemove", "touchmove"];
var end_events = ["mouseup", "touchend"];
/* Mouse Capturing Work */
move_events.forEach(function(event) {
canvas.addEventListener(event, function(e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);
});
/* Drawing on Paint App */
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'back';
start_events.forEach(function(event) {
canvas.addEventListener(event, function(e) {
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);
move_events.forEach(function(me){ canvas.addEventListener(me, onPaint, false); });
}, false);
});
end_events.forEach(function(event) {
canvas.addEventListener(event, function(e) {
move_events.forEach(function(me){ canvas.removeEventListener(me, onPaint, false); });
}, false);
});
var onPaint = function() {
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
};
}());
</script>
</body>
</html>`;
My HTML/JS works well in a brower (Chrome) but unfortunately I'm not able to draw anything in my React Native app.我的 HTML/JS 在浏览器 (Chrome) 中运行良好，但不幸的是我无法在我的 React Native 应用程序中绘制任何内容。
Can someone help me?有人能帮我吗？ Which events should I listen in React Native?我应该在 React Native 中监听哪些事件？
3 个解决方案
解决方案1
4 已采纳 2015-12-22 13:29:11
ES6 template string seems to break when you comment some lines of JS in your <script> tag.当您在<script>标记中注释某些 JS 行时，ES6 模板字符串似乎会中断。
Try remove them:尝试删除它们：
export default `<html>
<head></head>
<body>
<h1 id='toto'>TATA</h1>
<br />
<div id="sketch">
<canvas id="paint" style='border: 1px solid black'></canvas>
</div>
<script>
(function() {
var canvas = document.querySelector('#paint');
var ctx = canvas.getContext('2d');
var sketch = document.querySelector('#sketch');
var sketch_style = getComputedStyle(sketch);
canvas.width = parseInt(sketch_style.getPropertyValue('width'));
canvas.height = parseInt(sketch_style.getPropertyValue('height'));
var mouse = {x: 0, y: 0};
var start_events = ["mousedown", "touchstart"];
var move_events = ["mousemove", "touchmove"];
var end_events = ["mouseup", "touchend"];
move_events.forEach(function(event) {
canvas.addEventListener(event, function(e) {
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
}, false);
});
ctx.lineWidth = 5;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = 'back';
start_events.forEach(function(event) {
canvas.addEventListener(event, function(e) {
ctx.beginPath();
ctx.moveTo(mouse.x, mouse.y);
move_events.forEach(function(me){ canvas.addEventListener(me, onPaint, false); });
}, false);
});
end_events.forEach(function(event) {
canvas.addEventListener(event, function(e) {
move_events.forEach(function(me){ canvas.removeEventListener(me, onPaint, false); });
}, false);
});
var onPaint = function() {
ctx.lineTo(mouse.x, mouse.y);
ctx.stroke();
};
}());
</script>
</body>
</html>`;
解决方案2
2 2018-11-18 21:04:16
react-native-canvas current maintainer here, to people coming here looking for a canvas solution for React Native: I want to let you know react-native-canvas today is a stable solution which is very different from the code injection hack it used to be. react-native-canvas目前的维护者，对于来这里寻找 React Native canvas 解决方案的人们：我想让你知道今天的react-native-canvas是一个稳定的解决方案，它与它过去的代码注入 hack 有很大的不同是。
解决方案3
0 2020-12-23 23:57:32
@flyskywhy/react-native-gcanvas is a C++ native canvas component based on gpu opengl glsl shader, runs well on Android and iOS. @flyskywhy/react-native-gcanvas是一个基于 gpu opengl glsl shader 的 C++ 原生画布组件，在 Android 和 iOS 上运行良好。 You can see Performance Test Result , and an easily <canvas/> ported example react-native-particles-bg runs on Android, iOS and Web.您可以看到Performance Test Result ，以及一个易于移植的<canvas/>示例react-native-particles-bg在 Android、iOS 和 Web 上运行。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.