JavaScript: HTML5 Canvas

Форум программистов и сисадминов Киберфорум

Войти

Регистрация
Восстановить пароль

Sergoi

3 / 2 / 1

Регистрация: 22.03.2011

Сообщений: 69

Смещение мышки при масштабировании

15.06.2022, 11:06. Показов 435. Ответов 0

Метки canvas, canvas html5, canvasjs (Все метки)

Author24 — интернет-сервис помощи студентам

Возможно не лучшее решение использовать css при масштабировании. Но иду к этому решению.

В для css использовал, в js также реализовал:

HTML5    
        
    Скопировано
1
2
3
transform: scale(2);
top:50%;
left:50%;

или

HTML5    
        
    Скопировано
1
2
transform: scale(2);
transform-origin: 0 0;

При увеличении или уменьшении происходит вот такое, что на первой картинке, что на второй мышка сдвигается. Если не масштабировать или возвратить в норму, то рисуется за движением мышки, как и должно.

Возможно нужно, что-то здесь, также пытался смещать, но без результатов:

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
var canvasOffset = canvas.getBoundingClientRect();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
 
mouseeX = parseInt(e.pageX - offsetX);
mouseeY = parseInt(e.pageY - offsetY);

Заказать работу у эксперта

cpp_developer

Эксперт

20123 / 5690 / 1417

Регистрация: 09.04.2010

Сообщений: 22,546

Блог

15.06.2022, 11:06

Ответы с готовыми решениями:

SVG смещается при масштабировании
Ребят, привет! История такая, я создаю html-страницу, на ней я размечаю кликабельные зоны с использованием SVG. Суть в том, что стоит...

Анимация глючит в Firefox при масштабировании блока
Всем привет Столкнулся с такой проблемой. Мне надо изменять размеры блока и его содержимого. Пытался найти красивое и элегантное...

Смещение при масштабировании
Всем привет! При вёрстке столкнулся с такой проблемой-при масштабировании некоторые элементы смещаются на расстояние, а некоторые остаются....

Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.

raxper

Эксперт

30234 / 6612 / 1498

Регистрация: 28.12.2010

Сообщений: 21,154

Блог

15.06.2022, 11:06

Помогаю со студенческими работами здесь

Смещение блоков при масштабировании
Имеется блок wrapper. В нем 2 дочерних блока block1 и block2. Блоки стоят в ряд, но при масштабировании один из блоков смещается вниз. Не...

Смещение логотипа при масштабировании страницы
Помогите пожалуйста зафиксировать логотип сайта,я еще новичек в этом деле,при увеличении логотип вправо уезжает,хотелось бы чтоб он был на...

При масштабировании квадрата происходит смещение за курсором
вот код которым я увеличиваю и уменьшаю квадрат. glPushMatrix(); glTranslated(Xcurs, Ycurs, 0); glScaled(scale,...

Равномерное смещение элементов при масштабировании страницы
Доброго времени суток. Страница состоит из нескольких блочных структур. Вот один из них: <div class="level1"> ...

При движении мышки над панелью на ней появляется тест "Ой, щекотно". При уводе мышки текст исчезает
При движении мышки над панелью на ней появляется тест "Ой, щекотно". При уводе мышки текст исчезает С# ПОМОГИТЕ

Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:

Новые блоги и статьи Все статьи Все блоги /
Как работает Node.js изнутри run.dev 29.03.2025 Node. js изменил подход к разработке веб-приложений, позволив использовать JavaScript не только на стороне клиента, но и на сервере. Созданный в 2009 году Райаном Далем, этот открытый,. . .	Моки в Python: Mock Object Library py-thonny 29.03.2025 Тестирование кода требует особого подхода, когда речь идёт о компонентах, взаимодействующих с внешним миром. Мы часто сталкиваемся с непредсказуемостью HTTP-запросов, чтением данных из базы или. . .	JavaScript: Управление памятью и улучшение производительности run.dev 29.03.2025 В отличие от низкоуровневых языков программирования, JavaScript не требует ручного выделения и освобождения памяти. Здесь работает автоматический сборщик мусора, который определяет, какие объекты. . .	Мультитенантная архитектура со SpringBoot и PostgreSQL ArchitectMsa 29.03.2025 SaaS-приложения редко обслуживают одного клиента и обычно они должны поддерживать множество организаций, каждая из которых работает в своём изолированном пространстве. Мультитенантная архитектура. . .	std::span в C++: Производительность и лучшие практики NullReferenced 28.03.2025 std::span — одно из самых недооценённых нововведений стандарта C++20, которое радикально меняет подход к работе с непрерывными последовательностями данных. По сути, это невладеющее представление. . .
Многопоточность в C#: Threadpool UnmanagedCoder 28.03.2025 Пул потоков в C# — это коллекция заранее созданных и готовых к использованию потоков, которые находятся в распоряжении приложения. Вместо того чтобы создавать и уничтожать потоки для каждой небольшой. . .	Вопросы на собеседованиях по микросервисам ArchitectMsa 27.03.2025 Работодатели ищут не просто разработчиков, знающих базовые концепции, а специалистов, разбирающихся в тонкостях масштабирования, отказоустойчивости и производительности. Сейчас на первый план выходят. . .	Взаимодействие Python с REST API py-thonny 27.03.2025 REST API - это архитектурный стиль взаимодействия компонентов распределённого приложения в сети. Python располагает функциональным набором инструментов для работы с REST API и основная библиотека для. . .	sshd restrictions, ssh access limitations jigi33 26.03.2025 sshd restrictions \| ssh access limitations рестрикции доступа на сервер sshd статья: https:/ / www. golinuxcloud. com/ restrict-allow-ssh-certain-users-groups-rhel	Компиляция C++ с Clang API NullReferenced 24.03.2025 Компиляторы обычно воспринимаются как черные ящики, которые превращают исходный код в исполняемые файлы. Мы запускаем компилятор командой в терминале, и вуаля — получаем бинарник. Но что если нужно. . .

Наверх