AR 绘图桌 · 描边投影绘画小程序

相机取景叠半透明线稿 · 手机里的一张描红桌

📅 2026 📱 微信小程序 ⚙️ Taro 4 + Vue 3 🚀 Skyline 渲染

一款描边投影式绘画工具：相机取景，把半透明线稿叠在实时画面上，照着描就行。严格说不是真 AR（不做空间定位与平面检测），是「投影描红」——用最低的技术成本解决「手头没有临摹台」这个真实痛点。

整套流程在手机上闭环：选张照片 → 纯前端转成线稿（Canvas 2D，零服务端成本）→ 进描边页描 → 拍照存相册。线稿库走云开发下发，管理端做素材上传与上下线。

渲染上全站跑 Skyline + glass-easel，为的是让 camera 同层渲染、线稿叠层不再被原生组件层级问题卡住。代价是踩了一串 Skyline 特有的坑，下面单列。

Taro 4.2 Vue 3 Sass Skyline / glass-easel Canvas 2D 云开发 Python PIL

核心能力

描边页（核心） — 单指拖动、双指缩放旋转、锁定画面、透明度滑杆调节、拍照存相册、屏幕常亮，照着投影直接描。
转线稿（零成本） — chooseMedia 选图后在 Canvas 2D 上处理，纯前端转换，不占服务端资源、不产生费用。
三档转换模式 — auto / line / outline：line 用 Otsu 二值化保留原线（适合线条画），outline 用 Sobel 抽边缘（适合照片），auto 按中灰占比自动判定。
线稿库首页 — 分页触底加载、分类切换走内存缓存（零请求切回）、滚动超过一屏出现回到顶部。
素材管理后台 — 云函数白名单鉴权，选图上传自建服务器、填分类与排序、上下线与删除，管理员 openid 才显示入口。

算法按用户反馈重构 — 初版 Sobel 把细线两侧各抽一次边、转成双线轮廓（阴刻感），被反馈「原图是线条、转出来变轮廓」，于是拆出 line 模式走 Otsu 二值化保留原线。
素材体积压掉 89% — 服务端把 1024 RGBA 线稿转成 LA 二值化（alpha 阈值实体化、纯黑实线）：投影到白纸的场景下抗锯齿灰边毫无用处，二值化既省体积又更清晰，23 张从 4.0MB 降到 456KB。
Skyline 踩坑集 — 自定义导航页面右上角约 90px 是微信胶囊按钮禁区（控件必须让位）；钩子是 useDidShow 而非 useShow；glassEaselWebview 是 app.json 顶层字段不是 window 字段；Taro 的 mini 构建默认开 autoprefixer，会注入 Skyline 不认的 -webkit- 前缀，须显式关掉。
废弃 API 兜底 — Taro 4.2.1 未导出 getWindowInfo，导致兼容写法永远走废弃分支，改为直接判断原生 wx.getWindowInfo 是否可用再兜底。