如何在div中复现Canvas的缩放效果（仅缩放内部元素）？

你想要在div中实现类似示例里Canvas的缩放效果（仅缩放内部内容，保持容器div尺寸不变），且已经完成了移动功能，以下是可行的实现方案：

问题背景 #

你提供的Canvas示例通过context.scale()实现了内容缩放，容器#wrapper尺寸固定。但尝试CSS scale时，会连容器div一起缩放，不符合需求。

解决方案：嵌套容器+Transform缩放 #

核心思路是用两层div：外层作为固定尺寸的容器（保持不变），内层作为内容容器，对其应用缩放，同时通过transform-origin控制缩放原点，配合JS调整缩放比例。

实现代码示例 #

<!DOCTYPE HTML>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    /* 外层容器：固定尺寸，作为可视窗口 */
    #wrapper {
      position: relative;
      border: 1px solid #9C9898;
      width: 578px;
      height: 200px;
      overflow: hidden; /* 隐藏超出容器的内容 */
    }
    /* 内层内容容器：承载所有需要缩放的元素 */
    #contentContainer {
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: 0 0; /* 以左上角为缩放原点，方便计算位置 */
      transition: transform 0.1s ease; /* 可选：添加平滑过渡 */
    }
    #buttonWrapper {
      position: absolute;
      width: 30px;
      top: 2px;
      right: 2px;
      z-index: 10; /* 按钮保持在顶层，不被缩放影响 */
    }
    input[type="button"] {
      padding: 5px;
      width: 30px;
      margin: 0 0 2px 0;
    }
    /* 示例内部元素 */
    .shapedBox {
      width: 578px;
      height: 200px;
      background: linear-gradient(90deg, #8ED6FF, #004CB3);
      border: 5px solid #0000ff;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div id="wrapper">
    <div id="contentContainer">
      <div class="shapedBox"></div>
    </div>
    <div id="buttonWrapper">
      <input type="button" id="plus" value="+">
      <input type="button" id="minus" value="-">
    </div>
  </div>

  <script>
    const wrapper = document.getElementById('wrapper');
    const contentContainer = document.getElementById('contentContainer');
    const plusBtn = document.getElementById('plus');
    const minusBtn = document.getElementById('minus');

    let scale = 1.0;
    const scaleMultiplier = 0.8;
    // 移动相关变量（你已实现，这里保留基础结构）
    let translatePos = { x: 0, y: 0 };
    let startDragOffset = {};
    let mouseDown = false;

    // 更新缩放和位移的函数
    function updateTransform() {
      contentContainer.style.transform = `translate(${translatePos.x}px, ${translatePos.y}px) scale(${scale})`;
    }

    // 放大按钮事件
    plusBtn.addEventListener('click', () => {
      scale /= scaleMultiplier;
      updateTransform();
    });

    // 缩小按钮事件
    minusBtn.addEventListener('click', () => {
      scale *= scaleMultiplier;
      updateTransform();
    });

    // 移动功能（适配新结构）
    wrapper.addEventListener('mousedown', (evt) => {
      mouseDown = true;
      startDragOffset.x = evt.clientX - translatePos.x;
      startDragOffset.y = evt.clientY - translatePos.y;
    });

    ['mouseup', 'mouseout', 'mouseover'].forEach(event => {
      wrapper.addEventListener(event, () => {
        mouseDown = false;
      });
    });

    wrapper.addEventListener('mousemove', (evt) => {
      if (mouseDown) {
        translatePos.x = evt.clientX - startDragOffset.x;
        translatePos.y = evt.clientY - startDragOffset.y;
        updateTransform();
      }
    });

    // 初始化
    updateTransform();
  </script>
</body>
</html>

关键说明 #

• 两层容器分离：外层#wrapper固定尺寸，作为可视区域，设置overflow: hidden隐藏超出部分；内层#contentContainer承载所有需要缩放的内容，对其应用transform: scale()和translate()。
• 缩放原点控制：设置transform-origin: 0 0（左上角），这样缩放时内容的位置计算更直观，也可以根据需求改为中心（50% 50%）。
• 顶层元素处理：像控制按钮这类不需要缩放的元素，放在外层容器中，设置z-index确保在内容上方。
• 性能优化：使用transform进行缩放和位移，属于GPU加速属性，比直接修改尺寸/位置性能更好。

其他可选方案 #

• 使用zoom属性：部分浏览器支持zoom（如Chrome、Edge），直接给内容容器设置zoom: scaleValue，但它不属于标准CSS属性，兼容性较差，不推荐跨场景使用。
• JS动态调整尺寸：遍历内部元素，动态修改width、height、font-size等属性实现缩放，但这种方式性能较差，且需要处理大量元素的样式，适合简单场景。

内容的提问来源于stack exchange，提问作者Jho