更新记录

1.0.0（2026-04-03） 下载此版本

• 初版发布，实现Canvas绘制刻度尺
• 支持自动PPI计算校准
• 支持手动系数微调
• 适配小程序/H5/APP多平台

平台兼容性

uni-app(3.7.3)

其他

直尺子测量组件 使用说明（直接复制保存为 readme.md 即可上传）

📏 组件介绍

xiaozhi-ruler 是一款基于 uni-app + Canvas 开发的高精度尺子测量组件，支持自动PPI校准、手动系数微调，适配多端运行，可用于身高测量、物体尺寸测量等场景，开箱即用。

✨ 功能特性

• 🎯 自动校准：通过屏幕PPI自动计算标尺比例，无需手动设置
• 🔧 手动微调：支持滑块/按钮双向调节系数，适配身份证等实物校准
• 📱 多端兼容：完美支持微信/支付宝/抖音/百度/QQ小程序、App（Android/iOS/鸿蒙）、H5
• 🎨 双端刻度尺：屏幕上下双刻度尺，读数更直观
• 💾 本地缓存：自动保存校准系数，下次打开无需重新校准
• 🎯 身份证校验：内置身份证尺寸参考，快速校准精度

📦 安装使用

1. 安装方式

• 插件市场导入：在 uni-app 插件市场搜索「直尺子测量」，直接导入项目
• 手动导入：将组件文件夹复制到项目 components/ 目录下

2. 页面引入

在需要使用尺子的页面 xxx.vue 中引入组件：

<template>
  <view class="ruler-page">
    <xiaozhi-ruler @back="handleBack"></xiaozhi-ruler>
  </view>
</template>

<script>
import xiaozhiRuler from '@/components/xiaozhi-ruler/xiaozhi-ruler.vue'

export default {
  components: {
    xiaozhiRuler
  },
  methods: {
    handleBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.ruler-page {
  width: 100%;
  height: 100vh;
}
</style>

⚙️ 核心逻辑说明

1. 自动校准原理

组件通过以下公式自动计算屏幕PPI，生成精准标尺：

// 对角线像素 = √(宽像素² + 高像素²)
const diagonalPx = Math.sqrt(widthPx ** 2 + heightPx ** 2);
// 对角线英寸 = √(宽英寸² + 高英寸²)
const diagonalInch = Math.sqrt(widthInch ** 2 + heightInch ** 2);
// PPI = 对角线像素 / 对角线英寸
const ppi = Math.round(diagonalPx / diagonalInch);

自动计算后，生成对应厘米刻度，无需手动配置。

2. 手动校准方法

1. 准备一张居民身份证（标准尺寸：8.56cm × 5.40cm）
2. 将身份证贴紧屏幕，对比刻度尺
3. 通过页面滑块/加减按钮微调系数，直到刻度与身份证尺寸完全匹配
4. 系数自动保存，下次打开直接生效

🎨 页面功能说明

📱 兼容性说明

📝 注意事项

1. 校准建议：首次使用建议用身份证校准，确保测量精度
2. 屏幕适配：组件自动适配不同尺寸手机，无需手动修改宽高
3. nvue环境：组件基于web端Canvas开发，不支持nvue原生渲染
4. 编码规范：组件使用UTF-8编码，scss样式，符合uni-app开发规范
5. 缓存说明：校准系数存储在uni.getStorageSync("chizi")，可手动清除重置

📌 更新日志

v1.0.0

• 初版发布，实现Canvas双刻度尺绘制
• 支持自动PPI计算校准
• 支持手动系数微调（滑块+按钮）
• 适配多平台运行
• 新增身份证校准参考

📄 开源协议

本组件基于 MIT 协议 开源，可免费用于商业项目，无需授权。

📞 问题反馈

如有使用问题或优化建议，可通过插件市场留言反馈。

上传说明

1. 将上述内容复制到文本编辑器，保存为 readme.md 文件
2. 确保编码为 UTF-8，仅使用标准Markdown语法
3. 直接在发布页点击「选择文件」，上传该文件即可
4. 如需添加演示图，可将图片上传至uniCloud云存储，在文档中插入图床链接

需要我帮你补充一份组件API文档或者演示效果说明，让说明更完整吗？