在 WebView 中反應本機畫布

Question

我正在嘗試使用 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;

以及我在上面Canvas組件中WebView的html道具中使用的Paint組件。

這個組件只不過是一個很長的字符串，包含來自這個教程的 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 中監聽哪些事件？

Answer 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>`;

Answer 2

react-native-canvas目前的維護者，對於來這里尋找 React Native canvas 解決方案的人們：我想讓你知道今天的react-native-canvas是一個穩定的解決方案，它與它過去的代碼注入 hack 有很大的不同是。

Answer 3

@flyskywhy/react-native-gcanvas是一個基於 gpu opengl glsl shader 的 C++ 原生畫布組件，在 Android 和 iOS 上運行良好。 您可以看到Performance Test Result ，以及一個易於移植的<canvas/>示例react-native-particles-bg在 Android、iOS 和 Web 上運行。

在 WebView 中反應本機畫布

問題描述

3 個解決方案

解決方案1
4 已采納 2015-12-22 13:29:11

解決方案2
2 2018-11-18 21:04:16

解決方案3
0 2020-12-23 23:57:32

在 WebView 中反應本機畫布

問題描述

3 個解決方案

解決方案1 4 已采納 2015-12-22 13:29:11

解決方案2 2 2018-11-18 21:04:16

解決方案3 0 2020-12-23 23:57:32

解決方案1
4 已采納 2015-12-22 13:29:11

解決方案2
2 2018-11-18 21:04:16

解決方案3
0 2020-12-23 23:57:32