在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中偵聽哪些事件？

來源

2015-12-21 Jules Ivanic

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

來源

2015-12-22 13:29:11 zoontek

在WebView中反應本地畫布

回答

相關問題