Перемещение элемента внутри холста с помощью Leap Motion Leap.Js — Как сохранить состояние?

Я пытаюсь сделать движение LEAP, чтобы увеличивать и уменьшать масштаб элемента Canvas, и он отлично работает.

Прямо сейчас, когда вы кладете руку в активную зону и двигаетесь вертикально или горизонтально, объект перемещается соответственно. Отлично.

Когда вы подносите руку к экрану, элемент уменьшается в размере, когда вы тянете его к себе, он увеличивается в размере. Также хорошо.

Проблемы начинаются, когда вы хотите убрать руку из зоны.

Элемент следует за вами до крайности, а значит, становится очень большим (если тянуть руку назад к себе). Мне удалось реализовать элемент управления, при котором, если я убираю несколько пальцев (например, указываю пальцем на экран — вводите PIN-код), изображение зависает. Хороший.

Теперь проблема и вопрос: как сделать так, чтобы когда я возвращаю руку в зону контроля, элемент стартовал с того же места, где я его оставил? Я боролся с этим всю ночь, и это было трудно, и я не справился. Так что, если у вас получится это сделать, по крайней мере, я должен вам пиво :)

Вот код (s — мой элемент холста, camera[0] имеет свойства x, y, .ratio — глубина):

        var defaultRatio = s.cameras[0].ratio;
        var firstValidFrame = null;
        var started = null;
        var controller = new Leap.Controller({enableGestures: true});
        controller.loop(function(frame) {
            if(frame.hands.length > 0)
            {
                if (!firstValidFrame && frame.valid) firstValidFrame = frame;
                var hand = frame.hands[0];
                var position = hand.stabilizedPalmPosition;
                var fingers = hand.fingers;
                var center = hand.sphereCenter;

                if (position[2] < 60) {
                    started = 1;
                }

                if (fingers.length > 2 && started) {
                    s.cameras[0].x =  - position[0]*2;
                    s.cameras[0].y = position[1]*2-360;
                    s.cameras[0].ratio = defaultRatio - (position[2]*2/360);

                }
            }
        });

Я использую его с библиотекой Leap.Js в своем приложении Node.Js для визуализации графика Sigma.Js, если вам интересно...

Большое спасибо!


person Aerodynamika    schedule 17.02.2014    source источник


Ответы (1)


Я могу придумать два способа сделать это:

  1. Заставьте пользователя переместить руку обратно в то же место, где был «брошен» движущийся элемент, прежде чем снова начать его перемещать.

  2. Переместите элемент относительно положения руки. Другими словами, когда вы вернете руку в активную зону, сохраните это положение и по мере движения руки перемещайте элемент на ту же относительную величину.

person Charles Ward    schedule 20.02.2014