在 WebView 中反应原生画布答案

【问题标题】：React Native canvas in WebView在 WebView 中反应原生画布
【发布时间】：2015-12-21 19:44:48
【问题描述】：

我正在尝试使用 React Native 0.17 编写一个“绘画”Android 应用程序。

我有一个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;

还有一个Paint 组件，我在上面Canvas 组件的WebView 的html 属性中使用。

这个组件不过是一个很长的字符串，包含来自这个教程的 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>`;

我的 HTML/JS 在浏览器 (Chrome) 中运行良好，但不幸的是我无法在我的 React Native 应用程序中绘制任何内容。

有人可以帮助我吗？我应该在 React Native 中监听哪些事件？

【问题讨论】：

标签： javascript android canvas webview react-native

【解决方案1】：

当您在 <script> 标签中注释一些 JS 行时，ES6 模板字符串似乎中断了。

尝试删除它们：

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】：

react-native-canvas 是这里的当前维护者，对于来这里寻找 React Native 画布解决方案的人们：我想让你知道 react-native-canvas 今天是一个稳定的解决方案，它与过去的代码注入黑客非常不同.

【讨论】：

【解决方案3】：

@flyskywhy/react-native-gcanvas是一个基于gpu opengl glsl shader的C++原生canvas组件，在Android和iOS上运行良好。你可以看到Performance Test Result，以及一个简单的<canvas/> 移植示例react-native-particles-bg 在Android、iOS 和Web 上运行。

【讨论】：