Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Canvas и координаты мышки? / 12 сообщений из 12, страница 1 из 1
30.03.2021, 11:45
    #40058140
wolverin
wolverin
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Canvas и координаты мышки?
Подскажите, рисую мышкой
Код: javascript
1.
2.
canvas = document.getElementById("id");
context = canvas.getContext("2d");


по событиям onmousedown
Код: javascript
1.
2.
context.beginPath();
context.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);



и onmousemove
Код: javascript
1.
2.
сontext.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
context.stroke();



но не получается найти верно координаты указателя мышки, нужно еще что то отнять в координатах, а вот что не соображу )
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.03.2021, 11:46
    #40058142
wolverin
wolverin
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Canvas и координаты мышки?
удалено
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.03.2021, 12:19
    #40058156
DHDD
DHDD
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Canvas и координаты мышки?
wolverin,

Код: javascript
1.
2.
e.offsetX
e.offsetY
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.03.2021, 13:19
    #40058186
wolverin
wolverin
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Canvas и координаты мышки?
DHDD,

спасибо! да что то лишнее я считал )
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.03.2021, 14:26
    #40058222
wolverin
wolverin
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Canvas и координаты мышки?
DHDD,

не знаете, а для
Код: javascript
1.
touch = e.changedTouches[0]

как координаты получить на элементе canvas??
touch.client* и touch.page* видимо что то отнять от них надо, т.к. touch.offset* андефаенд
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.03.2021, 14:27
    #40058225
wolverin
wolverin
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Canvas и координаты мышки?
удалено
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.03.2021, 14:37
    #40058229
DHDD
DHDD
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Canvas и координаты мышки?
wolverin,

Код: html
1.
<canvas width=400 height=400 style="border:1px solid red" ontouchstart="console.log(event)"></canvas>



открываешь консоль, десктоп/мобила, исследуешь в консоли TouchEvent.

event.touches[0].clientX
или
event.changedTouches[0].clientX
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.03.2021, 16:54
    #40058296
voraa
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Canvas и координаты мышки?
wolverin,
Используй PointerEvents
https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent

TouchEvents не будут работать, например, на ноутах с тачскрином под виндой.
Там браузеры просто не видят эти события.

А используя PointerEvents можно просто забыть про всякие mousedown? mousemove. Эти события совершенно одинаково работают и для мыши и для пальцев. Есть во всех современных браузерах и на десктопах и на мобильных.
Ну есть некоторые проблемы с Мозиллой. Не корректно отрабатываются касания несколькими пальцами. С одним пальцем или с мышью все нормально.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
30.03.2021, 17:04
    #40058300
DHDD
DHDD
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Canvas и координаты мышки?
Код: html
1.
<canvas width=400 height=400 style="border:1px solid red" onpointermove="console.log(event)"></canvas>



event.pressure (1 - кнопка нажата, 0 - отпущена)
offsetX, offsetY присутствуют.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.03.2021, 06:09
    #40058378
wolverin
wolverin
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Canvas и координаты мышки?
voraa,

спасибо, PointerEvent одинаково и с мышкой и с тачскрином работает
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.03.2021, 06:11
    #40058381
wolverin
wolverin
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Canvas и координаты мышки?
единственно не пойму, почему мышкой рисуется линия, а с тачскрина непрерывная линия не получается
использую события
Код: javascript
1.
2.
3.
onpointerdown
onpointermove
onpointerup
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
31.03.2021, 08:48
    #40058397
voraa
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Canvas и координаты мышки?
wolverin,
https://developer.mozilla.org/ru/docs/Web/CSS/touch-action
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Canvas и координаты мышки? / 12 сообщений из 12, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
созд. / загр.: 374ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1443270]:
 0ms
get settings:
 10ms
get forum list:
 14ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 49ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 49ms
get tp. blocked users:
 2ms
others: 227ms
total:  374ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]