0 / 0 / 0
Регистрация: 20.11.2021
Сообщений: 40
1

Работа с zoom и pan. Посчитать абсолютное поз. DOM елемента поверх канваса , когда использую зум и pan

22.12.2022, 15:44. Показов 505. Ответов 0

Author24 — интернет-сервис помощи студентам
Я использую pan/zoom канваса, референс брал вот отсюда https://codesandbox.io/s/react... Canvas.tsx
Немного изменил функцию zoom и убрал зум по скролу колёсика мыши.
Код
event.preventDefault();
  const ZOOM_NUMBER = direction === "out" ? 100 : -100;
  if (context) {
    const zoom = 1 - ZOOM_NUMBER / ZOOM_SENSITIVITY;
    const viewportTopLeftDelta = {
      x: (window.innerWidth / 2 / scale) * (1 - 1 / zoom),
      y: (window.innerHeight / 2 / scale) * (1 - 1 / zoom)
    };
    const newViewportTopLeft = addPoints(viewportTopLeft, viewportTopLeftDelta);

    context.translate(viewportTopLeft.x, viewportTopLeft.y);
    context.scale(zoom, zoom);
    context.translate(-newViewportTopLeft.x, -newViewportTopLeft.y);

    setViewportTopLeft(newViewportTopLeft);
    setScale(scale * zoom);
    isResetRef.current = false;
  }
Мне нужно при наведении на определённый отрисованный элемент на канвасе чтоб всплывала кнопка плюс, у этой кнопки абсолютное позиционирование и она является частью ДОМ дерева (span). При ховере я передаю x,y координаты этой кнопке и она появляется сбоку, так же все работает и с pan, я просто прибавляю offset к этим координатам и координаты выходят правильными

Выглядит это примерно вот так -
Код
showAddButton({ 
x: (x + offset.x)
y: (y + offset.y)
})
Но дальше, если я уменьшаю или приближаю канвас используя кнопку зума функционал ломается.
Я перепробовал все комбинации в вычислении, все равно точка улетает куда-то, а если еще и использовать pan все становится совсем плохо.

Сейчас мои координаты считаются вот так

showAddButton({
x: (x + offset..x + marginX) * scale,
y: (y + offset.y - marginY) * scale
})

Хоть я и умножаю на scale, координаты считаются неправильно

marginX/marginY - переменные чтобы кнопка не появлялась прямо поверх точки, на которую наводимся.

Я буду невероятно благодарен любым подсказкам!
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
22.12.2022, 15:44
Ответы с готовыми решениями:

Как добавить к карте функции zoom(in/out), pan?
дана карта (tiled map) http://projekti.kurtuesi.lv/tilecache/tile...=512&HEIGHT=512 как...

Организация PAN. загвоздка
Имеются два компа: 1. Ноут Packard Bell, Windows 7 Home Basic 2. Стандвртныйс ПК, Win XP SP3 ...

360 pan video
Вот тут компания разработала приложение для просмотра панорамного видео в 360 кто-нибудь до этого...

БП на мать pan 102 1 94v-0
Досталась мать pan 102 1 94v-0, хочу ее включить а БП нету)) Какой подойдет БП к ней или...

0
22.12.2022, 15:44
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
22.12.2022, 15:44
Помогаю со студенческими работами здесь

Как настроить VLC на потоковое вещание через bluetooth сеть (PAN)?
Доброго (утра/обеда/вечера/ночи) всем! Пытаюсь сэкономить несколько ТЫРов на покупке...


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

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru