0
CanvasとEaselJSで描画できるHTMLページを作成しました。ウェブアプリケーションでキャンバスに描画できます。また、React-native Webviewにこのページを埋め込みたいと思います。React-Native、レンダリングH5キャンバスとWebviewのEaselJSシェイプ
iOSでは、Webviewは正常に埋め込まれていますが、指で触れることはできません。私は理由を見つけられず、それを解決する方法を見つけることができません。 Webブラウザで
：iOSアプリで
、それはWebViewの中でレンダリングすることができますが、タッチで描くためにペンを使用することはできません。
下記のHTMLコード（私は聞いてタッチイベントを追加した）：、それがステージにシェイプを作成するために大丈夫だ
render() {
return (
<View style={styles.container}>
<WebView source={
Platform.OS === 'ios' ? require('../../server/public/index.html') : {uri: 'file:///android_asset/index.html'}}
javaScriptEnabled={true}
ref={c => { this.webview = c; }}
onLoad={this.injectJavaScript}
startInLoadingState={true}
mediaPlaybackRequiresUserAction={true}
scrollEnabled={ this.props.scrollEnabled || false } />
</View>
)
}
描くことはできません。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="easeljs/utils/UID.js"></script>
<script type="text/javascript" src="easeljs/events/EventDispatcher.js"></script>
<script type="text/javascript" src="easeljs/events/MouseEvent.js"></script>
<script type="text/javascript" src="easeljs/geom/Matrix2D.js"></script>
<script type="text/javascript" src="easeljs/geom/Rectangle.js"></script>
<script type="text/javascript" src="easeljs/filters/Filter.js"></script>
<script type="text/javascript" src="easeljs/filters/BoxBlurFilter.js"></script>
<script type="text/javascript" src="easeljs/display/DisplayObject.js"></script>
<script type="text/javascript" src="easeljs/display/Container.js"></script>
<script type="text/javascript" src="easeljs/display/Text.js"></script>
<script type="text/javascript" src="easeljs/display/Graphics.js"></script>
<script type="text/javascript" src="easeljs/display/Shape.js"></script>
<script type="text/javascript" src="easeljs/display/Stage.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.js" integrity="sha256-tA8y0XqiwnpwmOIl3SGAcFl2RvxHjA8qp0+1uCGmRmg=" crossorigin="anonymous"></script>
<script type="text/javascript">
var canvas, stage, ctx;
var tooltype = '';
//Use draw|erase
use_tool = function(tool) {
tooltype = tool; //update
}
function free_hand_draw() {
//Variables
var canvasx = $(canvas).offset().left;
var canvasy = $(canvas).offset().top;
var last_mousex = last_mousey = 0;
var mousex = mousey = 0;
var mousedown = false;
//Mousedown
start = function(e) {
last_mousex = mousex = parseInt(e.clientX - canvasx);
last_mousey = mousey = parseInt(e.clientY - canvasy);
mousedown = true;
};
$(canvas).on('mousedown', start);
$(canvas).on('touchstart', start);
//Mouseup
end = function(e) {
mousedown = false;
};
$(canvas).on('mouseup', end);
$(canvas).on('touchend', end);
//Mousemove
move = function(e) {
mousex = parseInt(e.clientX - canvasx);
mousey = parseInt(e.clientY - canvasy);
if (mousedown) {
var shape = new createjs.Shape();
if (tooltype == 'draw') {
shape.graphics.beginStroke("black").setStrokeStyle(2, 'round').moveTo(last_mousex, last_mousey).lineTo(mousex, mousey);
stage.addChild(shape);
stage.update();
} else if (tooltype == 'erase') {
shape.graphics.beginStroke("white").setStrokeStyle(10, 'round').moveTo(last_mousex, last_mousey).lineTo(mousex, mousey);
stage.addChild(shape);
stage.update();
}
}
last_mousex = mousex;
last_mousey = mousey;
};
$(canvas).on('mousemove', move);
$(canvas).on('touchmove', move);
}
function createShape(type, value = '') {
var shape = new createjs.Shape();
switch (type) {
case 'circle':
shape.graphics.beginStroke("black").drawCircle(0, 0, 50);
shape.x = 100;
shape.y = 100;
stage.addChild(shape);
break;
case 'line':
shape.graphics.beginStroke("black").setStrokeStyle(10, 'round').moveTo(30, 30).lineTo(90, 90);
shape.x = 20;
shape.y = 20;
stage.addChild(shape);
break;
case 'rect':
shape.graphics.beginStroke("black").drawRect(0, 0, 50, 50);
shape.x = 70;
shape.y = 70;
stage.addChild(shape);
break;
case 'text':
var text = new createjs.Text(value, "20px Arial", "#ff7700");
text.x = 20;
stage.addChild(text);
document.getElementById('input_text').value = '';
break;
case 'pen':
use_tool('draw');
break;
case 'erase':
use_tool('erase');
break;
}
stage.update();
}
function getText() {
return document.getElementById('input_text').value
}
function init() {
if (canvas) {
document.removeChild(canvas);
}
canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;
var parent = document.getElementById('canvas');
parent.appendChild(canvas);
ctx = canvas.getContext('2d');
stage = new createjs.Stage(canvas);
free_hand_draw();
}
</script>
</head>
<body onload="init();">
<div style="display: block; width: 300px;">
<div id="canvas" style="float: left; padding-right: 20px;"></div>
<input type="button" id="circle" value="Add Circle">
<input type="button" value="Add Square" onclick="createShape('rect');">
<input type="button" value="Add Line" onclick="createShape('line');">
<input type="button" id="pen" value="Use Pen">
<input type="button" value="Erase" onclick="createShape('erase');">
<input type="text" id="input_text">
<input type="button" value="Input text" onclick="createShape('text', getText());">
</div>
</body>
</html>
はインクルードは、ネイティブコードスニペットがあるリアクト指でタッチ！
See html in iOS emulator(picture)
同時に、HTMLページはiOSのに成功したレンダリングされた、しかし、HTMLでjsのコードとJS参照リンクの両方のJSをロードすることができませんでした。 React-nativeの8089/505のような があります。
いずれかが役に立ちますか？
ありがとうございました。