Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Мультитач ONLY! (https://javascript.ru/forum/project/32367-multitach-only.html)

9xakep 13.10.2012 18:02

Мультитач ONLY!
 
Вот написал такое баловство на своем планшете, вроде работает относительно без тормозов.
<canvas id='touch' width='500' height='500'></canvas>
<div id='info'></div>
<script>
    var canvas = document.getElementById('touch'),
        ctx = canvas.getContext('2d'),
        touches = [];
    ctx.lineWidth = 3;
    canvas.addEventListener('touchmove', function (event) {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        event.preventDefault();
        touches = event.touches;
        len = touches.length;
        for (i = 0; i < len; i++) {
            var touch = touches[i]
            if (len == 2) {
                ctx.beginPath();
                ctx.moveTo(touches[0].pageX, touches[0].pageY)
                ctx.lineTo(touches[1].pageX, touches[1].pageY)
                ctx.stroke();
            }
            if (len == 4) {
                ctx.beginPath();
                ctx.moveTo(touches[0].pageX, touches[0].pageY)
                ctx.lineTo(touches[1].pageX, touches[1].pageY)
                ctx.lineTo(touches[2].pageX, touches[2].pageY)
                ctx.lineTo(touches[3].pageX, touches[3].pageY)
                ctx.lineTo(touches[0].pageX, touches[0].pageY)
                ctx.stroke();
            }
            //document.getElementById('info').innerHTML += 'x: ' + touch.pageX + '; y: '+ touch.pageY + '<br>'
        }
    })
</script>


Принцип: ставите один палец на экран, потом начинаете двигать второй (появляется линия) После ставите 4 пальца получается четырехугольник, и трансформируете его как хотите..

P.S. в opera mobile подтормаживает немного, так что если есть возможность смотрите через хром
P.S. У меня андроид
Пример:https://picasaweb.google.com/lh/phot...t=d irectlink

Gvozd 13.10.2012 20:40

У меня суботняя лень
Если бы ты выложил на свой хостинг отдельно - было бы классно
PS через "Посмотреть" почему-то не сработало

9xakep 13.10.2012 21:10

Gvozd,
ноу проблемс
http://gmoryes.bplaced.net/touch.html

Tim 13.10.2012 21:26

а у меня нет планшета =(

Hekumok 13.10.2012 21:27

эх...жалко у меня нет мультитача(

Gvozd 13.10.2012 23:43

9xakep,
я думал на телефоне заведется
Не завелось
Opera mini, встроенный браузер.
андроид

9xakep 13.10.2012 23:48

Gvozd,
Ну на телефонах такое естессно тормозить будет, и попробуй через хром посмотреть, у мёня на планшете в опере тоже тормозит

melky 14.10.2012 11:33

Цитата:

Сообщение от 9xakep (Сообщение 209908)
Gvozd,
Ну на телефонах такое естессно тормозить будет, и попробуй через хром посмотреть, у мёня на планшете в опере тоже тормозит

Странно ... если включен рендеринг с использованием OpenGL, то получается такая дребедень :



Если же его вырубить ( about:debug ), то всё нормально :



у меня телефон с кастомом 4.1.2 - дело в кастоме, ящитаю :)

9xakep 14.10.2012 19:28

Это где? Я хз почему так, я тут использую канвас, и какой браузер вообще поддерживает OpenGL, или я что не так понял? Кстати не знаешь, есть отладчики на андродид, что б не подключаться удаленно через ip итд, и то такую возможность только у оперы видел

melky 14.10.2012 22:18

Цитата:

Сообщение от 9xakep
Это где?

Android 4.1.2 AOSP.

в стандартном браузере вводим в адресную строку about:debug, далее лезем в настройки, там появится подменюшка "Выполнить отладку" и ещё консоль на странице.


Цитата:

Сообщение от 9xakep
Я хз почему так, я тут использую канвас, и какой браузер вообще поддерживает OpenGL, или я что не так понял?

я так понял, я отключил аппаратное ускорение в браузере - на моей прошивке только оно вызывает такие графические баги.

браузер стандартный - т.е. вообще от гугла :) это webkit.


Цитата:

Сообщение от 9xakep
Кстати не знаешь, есть отладчики на андродид, что б не подключаться удаленно через ip итд, и то такую возможность только у оперы видел

хм.. а что за отладка у оперы такая ? я использовал аналогичную для Chrome.


меня просто вынесла от удобства вот эта отладка :
https://developers.google.com/chrome...docs/debugging

для неё понадобится установленный Android SDK на компе и установленный Chrome на телефоне.


Часовой пояс GMT +3, время: 16:03.