Question

我正在尝试在用户触摸Android / Iphone设备屏幕时绘制一条线。我正在使用kinetic-v4.7.2.min.js。它在DeskTop上运行完美。但不是在开发Devic。所以我只需将鼠标点击事件更改为触摸事件。但是，它还没有触及Device。它触发功能完美，但它不会绘制任何线条＆amp;不会将该行添加到图层。有什么想法吗？

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>

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

Answer 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（）。

动态层不适用于javascript中的触摸事件

1 个答案: