Блог

У меня есть набор инструментов для рисования, которые работают на HTML-холсте, и набор других инструментов, которые работают с базовым изображением SVG в теге объекта.

После множества проб и ошибок, а также проблем с пикселизацией SVG при увеличении, размещение SVG в теге объекта решило проблемы с пикселизацией при изменении размера окна просмотра или увеличении масштаба, в частности, с мобильными телефонами / Safari при использовании инструментов SVG.

Однако при использовании инструментов canvas SVG снова отображается в пикселях.

Цель/Ожидаемый результат: Наложение холста и SVG друг на друга с определенным размером для каждого, Которое может масштабироваться в зависимости от области просмотра (телефон, рабочий стол и т.д.) И поддерживать выравнивание элементов, нарисованных/размещенных на каждом.
Кроме того, отображайте непикселированный слой SVG при активации инструментов Canvas для работы со слоем canvas.

Фактический результат: Элементы, нарисованные на холсте, не совпадают с базовым изображением SVG при изменении размера окна просмотра, повороте телефона и т. Д.

Необходима помощь: Есть ли способ определить размер холста, как мы делали с SVG в объекте, используя viewBox=»0 0 3168 2448″ ?

Как мы очень точно определяем размеры / поле просмотра как для SVG, так и для элементов холста? Таким образом, они поддерживают идеальное визуальное выравнивание?

В коде высота и ширина очень точно определены при изменении размера окна просмотра/браузера. Они все еще не идеально совпадают.

     <div id="m-container" class="jss332" style="width: 880.384px; height: 680.297px; margin: auto; transition: all 0.1s ease 0s;">
  <object aria-labelledby="SVGm" id="loaded-svg-cont" class="jss44"
    style="z-index: 5; position: absolute; top: 0px; left: 0px; width: 880.384px; height: 680.297px; pointer-events: all;">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3168 2448">
    </svg>
  </object>
  <div class="canvas-container" style="width: 880.384px; height: 680.297px; position: relative; user-select: none;">
    <canvas id="281299b3" class="lower-canvas" width="1760.7683823529412" height="1360.59375"style="position: absolute; width: 880.384px; height: 680.297px; left: 0px; top: 0px; touch-action: none; user-select: none;">
     </canvas>
    <canvas class="upper-canvas" width="1760.7683823529412" height="1360.59375" style="position: absolute; width: 880.384px; height: 680.297px; left: 0px; top: 0px; touch-action: none; user-select: none; cursor: pointer;">
    </canvas>
  </div>
</div>