ReSQL.ru
     
powered by simpleCommunicator - 2.0.49     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Canvas и координаты мышки?
12 сообщений из 12, страница 1 из 1
Canvas и координаты мышки?
    #40058140
Фотография wolverin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
wolverin
Участник
Подскажите, рисую мышкой
Код: 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:45
| Ответить | Цитировать | Написать  
Canvas и координаты мышки?
    #40058142
Фотография wolverin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
wolverin
Участник
удалено
...
Рейтинг: 0 / 0
30.03.2021, 11:46
| Ответить | Цитировать | Написать  
Canvas и координаты мышки?
    #40058156
DHDD
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DHDD
Гость
wolverin,

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

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

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

как координаты получить на элементе canvas??
touch.client* и touch.page* видимо что то отнять от них надо, т.к. touch.offset* андефаенд
...
Рейтинг: 0 / 0
30.03.2021, 14:26
| Ответить | Цитировать | Написать  
Canvas и координаты мышки?
    #40058225
Фотография wolverin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
wolverin
Участник
удалено
...
Рейтинг: 0 / 0
30.03.2021, 14:27
| Ответить | Цитировать | Написать  
Canvas и координаты мышки?
    #40058229
DHDD
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DHDD
Гость
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, 14:37
| Ответить | Цитировать | Написать  
Canvas и координаты мышки?
    #40058296
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
wolverin,
Используй PointerEvents
https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent

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

А используя PointerEvents можно просто забыть про всякие mousedown? mousemove. Эти события совершенно одинаково работают и для мыши и для пальцев. Есть во всех современных браузерах и на десктопах и на мобильных.
Ну есть некоторые проблемы с Мозиллой. Не корректно отрабатываются касания несколькими пальцами. С одним пальцем или с мышью все нормально.
...
Рейтинг: 0 / 0
30.03.2021, 16:54
| Ответить | Цитировать | Написать  
Canvas и координаты мышки?
    #40058300
DHDD
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DHDD
Гость
Код: 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
30.03.2021, 17:04
| Ответить | Цитировать | Написать  
Canvas и координаты мышки?
    #40058378
Фотография wolverin
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
wolverin
Участник
voraa,

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


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