Сравнение с плюсом
Суть такова реализую новый интерфейс, чтоб избавиться от лишней кнопки меню, появилась идея, если человек кликнул нарисовал горизонтальную (типо линию в рабочей области экрана естествено неважно где), а потом кликнул и нарисовал вериткальную и получился примерно плюс то вывести меню) Или например круговое движение, и желательно кросбраузерно) Ктонить видел решения?)
|
чувак если я тебя правильно понял, то что за хрень ты делаешь ?
<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]
|
Цитата:
|
говори что нужно исправить постараюсь помочь
|
Надо учитывать что юзеры ровно не нарисуют) Надо новую схему) Век сенсорников)
Я вот щас новую систему регистраций запиливаю через изображения) Выдается картинка с логотипом) По углам квадраты с пикселями) В одном углу логин в 3 остальных защитные рандомные пиксели) естественно все 10x10) Посмотрю как будут юзеры реагировать) Создам щас отдельную тему по этому поводу проблема с кнопкой сохранения изображения) Фишка в том, что очень просто) Нажимаем авторизоваться выбираем изображения и все) Не надо вводить логины и пароли) Все в кликах) |
Цитата:
|
Опишу еще некоторые измышления.
Все таки, управление жестами немного не комильфо. Взять тот же плюс. Как нормально разграничить жесты пользователя на те, которые предназначены для управления интерфейсом вашего приложения(сайта) и интерфейсом страницы и браузера в целом? Слайд сверху вниз - это начало рисования плюса или желание прокрутить страницу??? Вводить новый прозрачный (или непрозрачный элемент) на странице и рассматривать манипуляции над ним, как управление внутренним интерфесом? Но тогда как узнать когда этот элемент должен быть введен? По клику на кнопку - тогда проще сделать кнопки для всех действий и не морочить ни себе ни людям голову. Какой-то специальный жест, который будет активировать "рабочую область для рисования", например touch+slideUp - это лишняя путаница... Цитата:
|
если еще актуально , теперь только ровные линии! можно еще изменить допустимую кривизну в меньшую сторону или в большую!
как изменить mousemove на touchmove поможет эта хорошая статья http://habrahabr.ru/company/sibirix/blog/227175/
<canvas id="c" width="500" height="150" style="border: solid red 1px"></canvas>
[JS]
<script>
var canvas = document.getElementById('c'),
ctx = canvas.getContext('2d');
var o = {
cor: [],
handleEvent: function (e) {
var that = this;
if(e.type == 'mousedown') {
this.cor.push([{x: e.x, y: e.y}])
canvas.onmousemove = function (e) { that.draw(e) };
}
else if(e.type == 'mouseup') {
canvas.onmousemove = null;
this.cor[this.cor.length-1].push({x: e.x, y: e.y})
if(this.cor.length == 2) this.fn();;
}
},
init: function () {
canvas.addEventListener('mousedown', this, false);
canvas.addEventListener('mouseup', this, false);
},
draw: function (e) {
ctx.beginPath();
ctx.fillRect(e.x,e.y, 5,5)
ctx.strokeStyle = 'red';
ctx.stroke();
var cor = this.cor, len = this.cor.length-1;
if(Math.abs(cor[len][0].x - e.x) > 10 || Math.abs(cor[len][0].y - e.y) > 10) {
this.cor[this.cor.length-1].push({x: e.x, y: e.y})
}
},
fn: function (){
var cor1 = Math.abs(this.cor[0][0].x - this.cor[0][this.cor.length-1].x)
var cor2 = Math.abs(this.cor[1][0].x - this.cor[1][this.cor.length-1].x)
var x = (cor1 > cor2) ? this.cor[0] : this.cor[1];
var y = (cor1 > cor2) ? this.cor[1] : this.cor[0];
//+15 это какая кривизна линии допустима
this.flag = y.every(function(o){ return o.x > y[0].x-15 && o.x < y[0].x+15; }) &&
x.every(function(o){ return o.y > x[0].y-15 && o.y < x[0].y+15; })
console.log(this.flag)
if(!this.flag) {
alert('упс!!!! а линия кривая')
this.cor = [];
return;
}
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[x.length-1].x > y[y.length-1].x && x[x.length-1].y < y[y.length-1].y) alert('попробуй нарисовать кривую линию');
this.cor = [];
}
}
o.init();
</script>
[/JS]
|
Вот: http://habrahabr.ru/post/178611/
Может пригодится. |
| Часовой пояс GMT +3, время: 07:01. |