Сравнение с плюсом
Суть такова реализую новый интерфейс, чтоб избавиться от лишней кнопки меню, появилась идея, если человек кликнул нарисовал горизонтальную (типо линию в рабочей области экрана естествено неважно где), а потом кликнул и нарисовал вериткальную и получился примерно плюс то вывести меню) Или например круговое движение, и желательно кросбраузерно) Ктонить видел решения?)
|
чувак если я тебя правильно понял, то что за хрень ты делаешь ?
<style>
.div1 {
width: 100px;
height: 3px;
background: black;
position: absolute;
left: 0;
top: 50px;
display: none;
}
.div2 {
height: 100px;
width: 3px;
background: black;
position: absolute;
left: 50px;
top: 0px;
display: none;
}
</style>
<div id="id">
<div class="div1"></div>
<div class="div2"></div>
</div>
<script>
(function () {
var id = document.getElementById('id')
var i = -1;
document.onclick = function () {
i++
id.children[i].style.display = 'block';
if(i) document.onclick = null
console.log(1)
}
}());
</script>
Анимация на JS: движение по окружности http://habrahabr.ru/sandbox/62771/ |
caetus,
он пытается реализовать управление жестами, а не отслеживание кликов. KupueIIIKo, http://www.coolwebmasters.com/review...ch-events.html |
У тебя двумя кликами рисуется плюс) Мне нужно типо рисовалка) То есть если в два действия нарисовано что-то типо плюса, то вывести меню)
|
а ну тогда ясно ))
тут есть нативные события http://youon.ru/Андроид/Ра�...h-realizatsiya touchmove движения пальцем changedTouches - Список пальцев, которые учавствуют в текущем событии. Если например это событие touchend, то список будет содержать палец который был убран (Даже если остальные 4 пальца до сих пор на экране). рисуешь линию и запоминаешь координаты потом находишь формулу (Точка пересечения двух прямых) и вуаля готово ! |
В принципе caetus дал направление, но я позволю себе немного уточнить и разложить по полочкам весь процесс (просто самому стало интересно - не очень простой тут алгоритм выходит :) ).
1. получить координаты клика. 2. получить координаты, когда кнопка отпущена (палец убран с сенсора) 3. подумать, какой плюс будет учитываться, только нарисованный сначала с горизонтальной составляющей или оба - горизонталь+вертикаль и вертикаль+горизонталь. 4. посчитать угол между проведенной линией и стороной экрана и ее длину (дабы исключить явно проведенную косую линию, случайное движение пальца - короткий штрих (задать минимальную длину линии) и учесть предыдущий пункт). 5. задать проверку интервала времени после истечения которого проведенные линии будут считаться отдельными жестами, а не одним "рисованием плюса". 6. проверить вторую проведенную линию. 7. если все сходится, то запустить функцию вывода меню, если нет, то сбросить все промежуточные переменные. |
С помощью jquery mobile можно проверить горизонтальный swipe, потом вертикальный) Если это было в 2 клика сделано) значит вывести меню) Вот такая мысль родилась)
|
KupueIIIKo,
Может табличку ? С заранее нарисованными иконками крест, вертикальная, горизонтальная, круг, линии под 45° |
тут набросал кое что ! может так пойдет ?? можно еще сделать что б только ровные линии +- ровные проходили проверку
<body>
<canvas id="c" width="400" height="150" style="border: solid red 1px"></canvas>
</body>
[JS]
<script>
var canvas = document.getElementById('c'),
ctx = canvas.getContext('2d');
var o = {
cor: [],
handleEvent: function (e) {
if(e.type == 'mousedown') {
// сохраняем начальные координаты
this.cor.push([{x: e.x, y: e.y}])
canvas.onmousemove = this.draw
}
else if(e.type == 'mouseup') {
canvas.onmousemove = null;
// сохраняем конечные координаты
this.cor[this.cor.length-1].push({x: e.x, y: e.y})
// есть две линии , тогда проверяем на крест !
// можно проверку сделать и для 10 .
if(this.cor.length == 2) this.fn();
}
},
init: function () {
canvas.addEventListener('mousedown', o, false);
canvas.addEventListener('mouseup', o, false);
},
draw: function (e) {
ctx.beginPath();
ctx.fillRect(e.x,e.y, 5,5)
ctx.strokeStyle = 'red';
ctx.stroke();
},
fn: function (){
//узнаем какая линия горизонтальная
var cor1 = Math.abs(this.cor[0].startX - this.cor[0].endX)
var cor2 = Math.abs(this.cor[1].startX - this.cor[1].endX)
// X горизонтальная ну а Y само собой вертикальная
var x = (cor1 > cor2) ? this.cor[0] : this.cor[1];
var y = (cor1 > cor2) ? this.cor[1] : this.cor[0];
// сортируем по возрастанию
x = x.sort(function(a,b) {return a.x - b.x})
y = y.sort(function(a,b) {return a.y - b.y})
// проверяем
if(x[0].x < y[0].x && x[0].y > y[0].y && x[1].x > y[1].x && x[1].y < y[1].y) alert(2);
this.cor = [];
}
}
o.init();
</script>
[/JS]
|
Цитата:
|
| Часовой пояс GMT +3, время: 11:39. |