在WebView中反应本地画布

问题描述：

我正在尝试使用React Native 0.17编写一个“绘制”Android应用程序。在WebView中反应本地画布

我有一个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部件我在WebView的html道具在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>`;

我的HTML/JS行之有效的布劳尔（铬），但遗憾的是我没有能够在我的React Native应用程序中绘制任何内容。

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

答

当您在<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>`;

在WebView中反应本地画布

相关推荐