Files

T

完成后端设计（未在本仓库体现），通过安全的手段完成了登录鉴权

2026-08-06 16:27:36 +08:00

智绘微刻小程序 - 遮罩尺寸配置指南

📌 概述

本小程序的 DIY 工作台使用**遮罩层（Mask）**来模拟实际产品的雕刻区域。用户在画布上看到的半透明黑色区域之外的部分，即为该产品的实际外形轮廓；白色/透明区域则是激光雕刻的可用范围。

当你们确定了各品类的真实尺寸后，只需修改一个配置文件，所有页面的渲染就会自动更新。

文件路径：

src/utils/productConfig.ts

此文件导出一个 PRODUCTS 数组，每个品类对象中都有一个 mask 属性，就是遮罩的配置。

假设铜质杯垫实际直径为 90mm，画布区域在手机上显示为 300px 宽：

先量出杯垫实际直径对应的像素比例：
90mm ÷ 90mm × 280 = 280px
（如果直接按1:1在画布上展示，就填280）

更简单的方式：等真实的样品拿到后，直接用手机截图量一下在 375px 逻辑像素下应该占多大，然后把数值填进去即可。

适用于：笔记本、笔盒、书本灯等方形/圆角矩形产品

mask: {
  type: 'rect',
  width: 300,    // 遮罩宽度（px）
  height: 420,   // 遮罩高度（px）
  radius: 8      // 圆角半径（px），不需要圆角填 0
}

适用于：杯垫、徽章等圆形产品

mask: {
  type: 'circle',
  width: 280,    // 椭圆外接矩形宽度（px）
  height: 280    // 椭圆外接矩形高度（px）
}

如果 width === height，即为正圆；如果不相等，则为椭圆。

遮罩在 UI 上的表现：

用户上传图片后，可以通过拖拽调整图片在遮罩内的位置，通过缩放按钮调整图片大小，确保想要雕刻的内容落在白色遮罩区域内。