HTML5 Canvas ~ масштабирование и сохранение относительного смещения текущего холста (просмотр центральной точки порта) - PullRequest
Новая
       28

HTML5 Canvas ~ масштабирование и сохранение относительного смещения текущего холста (просмотр центральной точки порта)

0 голосов
/ 05 марта 2019

Сообщение включено, Увеличение точки (с использованием масштабирования и перевода)
не вполне дало ответ, который я искал;а именно: «Как сохранить текущую точку на холсте с центром в окне порта представления в той же относительной позиции после масштабирования холста?»

1 Ответ

0 голосов
/ 05 марта 2019

смещение холста

Синий прямоугольник выше представляет порт просмотра (монитор).

Красный прямоугольник представляет холст, который в настоящее время выходит за пределы порта просмотра.

Когда вы масштабируете холст, как вы удерживаете красную точку в той же относительной позиции?

Давайте просто посмотрим на размер x:

Текущая ширина холста100 = 30 + 50 + 20

Если мы масштабируем в 2 раза, текущая ширина становится 200 = 60 + 100 + 40;однако порт просмотра представляет только 50 из новой ширины 100: 200 = 60 + (25 + 50 + 25) + 40

Числа, которые вас действительно волнуют, это смещения x и y, которые позиционируют холст;в настоящее время смещение по оси х составляет -30.Новое смещение, чтобы красная точка оставалась в той же относительной позиции после 2-кратной шкалы, будет -85 = (-1) * (60 + 25).

Новая относительная позиция будет 110 = 60 +25 + 25 (вторые 25 - половина размера порта обзора).Обратите внимание, что 55 x 2 = 110.

В коде: 

    boundingBoxLeft = boundingBox.left;
    beginCanvasWidth = canvas.width;
    canvas.width = canvasWidth*scaleFactor;
    var scaleChange = canvas.width/beginCanvasWidth;

    var leftOffset = ((-1)*boundingBoxLeft*scaleChange) + 
            (((window.innerWidth*scaleChange) - window.innerWidth)/2);
...