Question

我创建了一个可以使用Canvas和EaselJS绘制的HTML页面，我可以在Web应用程序中使用鼠标绘制画布。另外，我想将页面嵌入到React-native Webview中。

在iOS中，它嵌入到Webview中成功，但是，无法用手指触摸绘制。我找不到原因并弄清楚如何解决它。

在网络浏览器中：

在iOS应用中，它可以在Webview中呈现，但是，不能使用笔来触摸绘图。

下面的HTML代码（我添加了触摸事件监听）：

<!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>

React本机代码段是：

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>
              )
            }

可以在舞台上创造形状，不能用手指触摸画画！

See html in iOS emulator(picture)

同时，HTML页面在iOS中成功呈现，但是，无法在HTML中加载js代码和js引用链接。比如React-native中的问题8089/505。

有什么帮助吗？

感谢。

Answer 1

您应该添加代码以启用触摸事件。添加以下代码以启用它

 createjs.Touch.enable(stage);

如需进一步，请参阅以下文件 http://www.createjs.com/docs/easeljs/classes/Touch.html

React-Native，在Webview中渲染H5 Canvas和EaselJS形状

1 个答案: