Javascript 用于AngularJS的HTML5画布/DOM中的多点触控

我开始用Angular创建一个小的远程控制应用程序。我创建了一个使用画布的操纵杆指令

我把它包在一个有角度的指令里，效果很好。您可以在此处看到一个示例注意：仅触摸，尚未出现鼠标事件：

我想做的是控制一辆车，这意味着我将一直拖动操纵杆，此外，我还想控制另一个按钮，例如喇叭。我更喜欢在这里使用一个简单的按钮

但是，如果我拖动操纵杆，所有像ng click这样的处理程序都会停止工作。我可以听其他触摸事件，例如简单地添加另一个操纵杆，在画布上独立工作，当然还有其他画布，但我可以简单地听其他事件，比如触摸吗？我如何以最有角度/最简单的方式实现这一点

下面是小提琴上的代码：

angular.module('myApp').directive('joystick', function() {

    function joystickController ($scope) {

    }

    return {
        restrict : 'E',
        controller : ['$scope', function ($scope) {
            return joystickController($scope);
        }],
        scope : {
            // Using primitives here did not work, so we use an Object, see: http://stackoverflow.com/questions/14049480/what-are-the-nuances-of-scope-prototypal-prototypical-inheritance-in-angularjs
            position : '='
        },
        template : '<canvas class="joystickCanvas"></canvas>',
        link : function(scope, element) {

            var joystickHeight = 200;
            var joystickWidth  = 200;

            var center = {
                x : joystickHeight / 2,
                y : joystickWidth / 2
            };

            var radiusCircle = 35;
            var radiusBound = 50;

            // Canvas and context element
            var container = element[0];
            var canvas = container.children[0];
            var ctx = canvas.getContext('2d');

            // Id of the touch on the cursor
            var cursorTouchId = -1;
            var cursorTouch = {
                x : center.x,
                y : center.y
            };

            function resetCanvas() {
                canvas.height = joystickHeight;
                canvas.width = joystickWidth;
            }

            function onTouchStart(event) {
                var touch = event.targetTouches[0];
                cursorTouchId = touch.identifier;
                cursorTouch = {
                    x : touch.pageX - touch.target.offsetLeft,
                    y : touch.pageY - touch.target.offsetTop
                };
            }

            function onTouchMove(event) {
                // Prevent the browser from doing its default thing (scroll, zoom)
                event.preventDefault();
                for(var i = 0; i < event.changedTouches.length; i++){
                    var touch = event.changedTouches[i];

                    if(cursorTouchId === touch.identifier)
                    {
                        cursorTouch = {
                            x : touch.pageX - touch.target.offsetLeft,
                            y : touch.pageY - touch.target.offsetTop
                        };

                        var scaleX = radiusBound / (cursorTouch.x - center.x);
                        var scaleY = radiusBound / (cursorTouch.y - center.y);

                        if(Math.abs(scaleX) < 1) {
                            cursorTouch.x = Math.abs(cursorTouch.x - center.x) * scaleX + center.x;
                        }

                        if (Math.abs(scaleY) < 1) {
                            cursorTouch.y = Math.abs(cursorTouch.y - center.y) * scaleY + center.y;
                        }

                        scope.$apply(
                            scope.position = {
                                x : Math.round(((cursorTouch.x - center.x)/radiusBound) * 100),
                                y : Math.round(((cursorTouch.y - center.y)/radiusBound) * -100)
                            }
                        );

                        break;
                    }
                }

            }

            function onTouchEnd() {

                cursorTouchId = -1;

                scope.$apply(
                    scope.position = {
                        x : 0,
                        y : 0
                    }
                );

                cursorTouch.x = center.x;
                cursorTouch.y = center.y;
            }

            function draw() {
                // Clear the canvas
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                ctx.beginPath();
                ctx.strokeStyle = 'cyan';
                ctx.lineWidth = 5;
                ctx.arc(center.x, center.y, radiusCircle, 0, Math.PI*2, true);
                ctx.stroke();

                ctx.beginPath();
                ctx.strokeStyle = 'cyan';
                ctx.lineWidth = 2;
                ctx.arc(center.x, center.y, radiusBound, 0, Math.PI*2, true);
                ctx.stroke();

                ctx.beginPath();
                ctx.strokeStyle = 'cyan';
                ctx.lineWidth = 2;
                ctx.arc(cursorTouch.x, cursorTouch.y, radiusCircle, 0, Math.PI*2, true);
                ctx.stroke();

                requestAnimFrame(draw);
            }

            // Check if touch is enabled
            var touchable = true;

            if(touchable) {
                canvas.addEventListener( 'touchstart', onTouchStart, false );
                canvas.addEventListener( 'touchmove', onTouchMove, false );
                canvas.addEventListener( 'touchend', onTouchEnd, false );

                window.onorientationchange = resetCanvas;
                window.onresize = resetCanvas;
            }

            // Bind to the values from outside as well
            scope.$watch('position', function(newval) {
                cursorTouch = {
                    x : ((newval.x * radiusBound) / 100) + center.x,
                    y : ((newval.y * radiusBound) / -100) + center.y
                };
            });

            resetCanvas();
            draw();

        }

    };

});

---

你试过使用吗？据我所知，ngTouch只提供了刷卡指令，在这种情况下是无用的。仔细看看：我不知道它是否适用于你的情况，但它提供了更多的刷卡功能…我看了一下，发现它改变了ngClick的行为，但即使包括ngTouch模块，该行为保持不变，sameI在ngTouch的ngClickdirective中添加了一个console.log，从而触发了touchstart，但由于某种原因，没有发生单击。touchend也会被触发。