Я пытаюсь сделать движение 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, если вам интересно...
Большое спасибо!