动力学层不适用于javascript中的触摸事件答案

【问题标题】：kinetic layer is not working on touch event in javascript动力学层不适用于javascript中的触摸事件
【发布时间】：2013-11-29 05:28:55
【问题描述】：

当用户触摸 Android/Iphone 设备的屏幕时，我正在尝试画一条线。我正在使用kinetic-v4.7.2.min.js。它在桌面上完美运行。但不适用于 Devic。所以我只是将鼠标单击事件更改为触摸事件。但是，它仍然不能在触摸设备上工作。它触发了完美的功能，但它不绘制任何线条并且不将线条添加到图层。有什么想法吗？

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript"
    src="http://code.jquery.com/jquery.min.js"></script>
<script
    src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>


<style>
#container {
    border: solid 1px #ccc;
    margin-top: 10px;
}
</style>
<script>
    //create a stage and a layer
    $(function() {


        window.addEventListener('load', function(){ // on page load

             document.body.addEventListener('touchstart', function(e){
             // alert(e.changedTouches[0].pageX) // alert pageX coordinate of touch point
             }, false)

            }, false)

        var isdrawing = false;
        var stage;
        var layer;
        var background;
        function InitLayer() {
            stage = new Kinetic.Stage({
                container : 'container',
                width : 350,
                height : 350
            });
            layer = new Kinetic.Layer();
            stage.add(layer);
        }

        // an empty stage does not emit mouse-events
        // so fill the stage with a background rectangle
        // that can emit mouse-events
        function drawRect() {
            background = new Kinetic.Rect({
                x : 0,
                y : 0,
                width : stage.getWidth(),
                height : stage.getHeight(),
                fill : 'white',
                stroke : 'black',
                strokeWidth : 1,
            })
            layer.add(background);
            layer.draw();

            // a flag we use to see if we're dragging the mouse
            isMouseDown = false;
            // a reference to the line we are currently drawing
            newline;
            // a reference to the array of points making newline
            points = [];

        }

        //a flag we use to see if we're dragging the mouse
        var isMouseDown;
        // a reference to the line we are currently drawing
        var newline;
        // a reference to the array of points making newline
        var points = [];
        InitLayer();
        drawRect();

        // on the background
        // listen for mousedown, mouseup and mousemove events
        background.on('touchstart', function(e) {
            //alert(e.changedTouches[0].pageX)
            //onMousedown();
            isdrawing = true;
            isMouseDown = true;
            points = [];
            points.push(stage.getMousePosition());
            var line = new Kinetic.Line({
                points : points,
                stroke : "green",
                strokeWidth : 5,
                lineCap : 'round',
                lineJoin : 'round'
            });
            layer.add(line);
            newline = line;
        });
        background.on('touchend', function() {
            //onMouseup();
            isMouseDown = false;
        });
        background.on('touchmove', function() {
            //onMousemove();
            if (!isMouseDown) {
                return;
            }
            ;
            points.push(stage.getMousePosition());
            newline.setPoints(points);
            // use layer.drawScene
            // this is faster since the "hit" canvas is not refreshed
            layer.drawScene();
        });


        $('#clear').on('click', function() {

            layer.removeChildren().add(background).draw();
            isdrawing = false;

        });

        $('#save').on(
                'click',
                function() {
                    var img = $('.kineticjs-content').find('canvas').get(0)
                            .toDataURL("myimage/png");
                    if (isdrawing) {
                        $('body').prepend('<img src="' + img + '">');
                    }
                });
    });
</script>
</head>

<body>

    <h3>Drag to sketch</h3>
    <button id="save">SAVE as PNG</button>
    <button id="clear">CLEAR</button>
    <div id="container"></div>

</body>
</html>

任何帮助将不胜感激！谢谢。

【问题讨论】：

您在哪个设备上测试？
@Triode Samsung Tab2.
你能检查浏览器是否支持画布？这只是我说的一种可能性
@Triode 在 Android 设备的默认浏览器上打开此 html。也在 Chrome、Android 设备的 firefox 浏览器上打开此 html。它不支持画布。
@Triode 画布在我的设备上支持。它可能是层问题。

标签： javascript android ios touch kineticjs

【解决方案1】：

您使用 stage.getMousePosition() 来获取您的 touchmove 事件中的位置：

    background.on('touchmove', function() {
        //onMousemove();
        if (!isMouseDown) {
            return;
        }
        ;
        points.push(stage.getMousePosition());
        newline.setPoints(points);
        // use layer.drawScene
        // this is faster since the "hit" canvas is not refreshed
        layer.drawScene();
    });

但你应该改用 stage.getPointerPosition()。

【讨论】：