Форум

KupueIIIKo · #1 (**permalink**) 06.09.2015, 10:40

Суть такова реализую новый интерфейс, чтоб избавиться от лишней кнопки меню, появилась идея, если человек кликнул нарисовал горизонтальную (типо линию в рабочей области экрана естествено неважно где), а потом кликнул и нарисовал вериткальную и получился примерно плюс то вывести меню) Или например круговое движение, и желательно кросбраузерно) Ктонить видел решения?)

caetus · #2 (**permalink**) 06.09.2015, 10:59

чувак если я тебя правильно понял, то что за хрень ты делаешь ?

<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/

BETEPAH · #3 (**permalink**) 06.09.2015, 11:17

caetus,
он пытается реализовать управление жестами, а не отслеживание кликов.
KupueIIIKo,
http://www.coolwebmasters.com/review...ch-events.html

KupueIIIKo · #4 (**permalink**) 06.09.2015, 11:17

У тебя двумя кликами рисуется плюс) Мне нужно типо рисовалка) То есть если в два действия нарисовано что-то типо плюса, то вывести меню)

caetus · #5 (**permalink**) 06.09.2015, 11:29

а ну тогда ясно ))

тут есть нативные события http://youon.ru/Андроид/Ра�...h-realizatsiya

touchmove движения пальцем

changedTouches - Список пальцев, которые учавствуют в текущем событии. Если например это событие touchend, то список будет содержать палец который был убран (Даже если остальные 4 пальца до сих пор на экране).

рисуешь линию и запоминаешь координаты

потом находишь формулу (Точка пересечения двух прямых) и вуаля готово !

nesnayka · #6 (**permalink**) 06.09.2015, 13:04

В принципе caetus дал направление, но я позволю себе немного уточнить и разложить по полочкам весь процесс (просто самому стало интересно - не очень простой тут алгоритм выходит

).
1. получить координаты клика.
2. получить координаты, когда кнопка отпущена (палец убран с сенсора)
3. подумать, какой плюс будет учитываться, только нарисованный сначала с горизонтальной составляющей или оба - горизонталь+вертикаль и вертикаль+горизонталь.
4. посчитать угол между проведенной линией и стороной экрана и ее длину (дабы исключить явно проведенную косую линию, случайное движение пальца - короткий штрих (задать минимальную длину линии) и учесть предыдущий пункт).
5. задать проверку интервала времени после истечения которого проведенные линии будут считаться отдельными жестами, а не одним "рисованием плюса".
6. проверить вторую проведенную линию.
7. если все сходится, то запустить функцию вывода меню, если нет, то сбросить все промежуточные переменные.

KupueIIIKo · #7 (**permalink**) 07.09.2015, 10:37

С помощью jquery mobile можно проверить горизонтальный swipe, потом вертикальный) Если это было в 2 клика сделано) значит вывести меню) Вот такая мысль родилась)

Deff · #8 (**permalink**) 07.09.2015, 14:46

KupueIIIKo,
Может табличку ? С заранее нарисованными иконками
крест, вертикальная, горизонтальная, круг, линии под 45°

caetus · #9 (**permalink**) 07.09.2015, 18:02

тут набросал кое что ! может так пойдет ?? можно еще сделать что б только ровные линии +- ровные проходили проверку

<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]

KupueIIIKo · #10 (**permalink**) 07.09.2015, 18:25

Сообщение от caetus

тут набросал кое что ! может так пойдет ?? можно еще сделать что б только ровные линии +- ровные проходили проверку

Вариант не плохой куча недочетов)

Форум

Справочник

Discord чат

Курсы javascript