时间戳

首页 > 解决方案 > 画布层和包含相互叠加的 SVG 的对象

html - 画布层和包含相互叠加的 SVG 的对象

问题描述

我有一组在 HTML 画布上工作的绘图工具，以及一组在对象标签中的 SVG 基础图像上工作的其他工具。

经过大量试验和错误以及缩放时 SVG 的像素化问题，将 SVG 放在对象标签中解决了调整视口大小或放大的像素化问题，尤其是在使用 SVG 工具时，手机/Safari。

但是，当使用画布工具时，SVG 再次出现像素化。

目标/预期结果： 将 Canvas 和 SVG 叠加在一起，每个都有定义的大小，可以随视口（手机、桌面等）缩放并保持绘制/放置在每个上的元素对齐。
此外，当激活 Canvas 工具以在画布层上工作时，显示未像素化的 SVG 层。

实际结果： 在调整视口大小、旋转手机等时，在画布上绘制的项目与 SVG 基础图像不对齐。

需要帮助： 有没有办法像我们在对象中使用 viewBox="0 0 3168 2448" 来定义画布大小？

我们如何非常精确地定义 SVG 和 Canvas 元素的尺寸/视图框？所以他们保持完美的视觉对齐？

在代码中，高度和宽度在调整视口/浏览器大小时非常精确地定义。他们仍然没有完全对齐。

    <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>

标签： htmlsvgcanvas

解决方案

推荐阅读