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

Вы можете использовать CSS для создания порядка инсульта и заполнения. То есть, сначала ударьте, а затем заполните второй и получите желаемый эффект.

MDN на paint-order: https://developer.mozilla.org/en-US/docs/Web/ SVG / Attribute / paint-order

Код CSS:

paint-order: stroke;

-2
задан user2782 8 March 2019 в 19:41
поделиться

1 ответ

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

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

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

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

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

Текущая ширина холста равна 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);
0
ответ дан user2782 8 March 2019 в 19:41
поделиться
Другие вопросы по тегам:

Похожие вопросы: