oxy-uni-ui 1.2.3 → 2.0.0

package/components/oxy-qrcode/draw.ts

@@ -0,0 +1,398 @@
+/**
+ * 导入所需的工具函数和依赖
+ */
+import { generateFrame } from './qrcode'
+import type { ClQrcodeMode } from './types'
+import { uuid } from '@/uni_modules/oxy-uni-ui/components/common/util'
+import CanvasContext = UniNamespace.CanvasContext
+
+declare type Image = HTMLImageElement
+/**
+ * 二维码生成配置选项接口
+ * 定义了生成二维码所需的所有参数
+ */
+export type QrcodeOptions = {
+  ecc: string // 纠错级别,可选 L/M/Q/H,纠错能力依次增强
+  text: string // 二维码内容,要编码的文本
+  size: number // 二维码尺寸,单位px
+  foreground: string // 前景色,二维码数据点的颜色
+  background: string // 背景色,二维码背景的颜色
+  padding: number // 内边距,二维码四周留白的距离
+  logo: string // logo图片地址,可以在二维码中心显示logo
+  logoSize: number // logo尺寸,logo图片的显示大小
+  mode: ClQrcodeMode // 二维码样式模式,支持矩形、圆形、线条、小方块
+  pdColor: string | null // 定位点颜色,三个角上定位图案的颜色,为null时使用前景色
+  pdRadius: number // 定位图案圆角半径,为0时绘制直角矩形
+}
+
+/**
+ * 绘制圆角矩形
+ * 兼容不同平台的圆角矩形绘制方法
+ * @param ctx Canvas上下文
+ * @param x 矩形左上角x坐标
+ * @param y 矩形左上角y坐标
+ * @param width 矩形宽度
+ * @param height 矩形高度
+ * @param radius 圆角半径
+ */
+function drawRoundedRect(ctx: CanvasContext, x: number, y: number, width: number, height: number, radius: number) {
+  if (radius <= 0) {
+    // 圆角半径为0时直接绘制矩形
+    ctx.fillRect(x, y, width, height)
+    return
+  }
+
+  // 限制圆角半径不超过矩形的一半
+  const maxRadius = Math.min(width, height) / 2
+  const r = Math.min(radius, maxRadius)
+
+  ctx.beginPath()
+  ctx.moveTo(x + r, y)
+  ctx.lineTo(x + width - r, y)
+  ctx.arcTo(x + width, y, x + width, y + r, r)
+  ctx.lineTo(x + width, y + height - r)
+  ctx.arcTo(x + width, y + height, x + width - r, y + height, r)
+  ctx.lineTo(x + r, y + height)
+  ctx.arcTo(x, y + height, x, y + height - r, r)
+  ctx.lineTo(x, y + r)
+  ctx.arcTo(x, y, x + r, y, r)
+  ctx.closePath()
+  ctx.fill()
+}
+
+/**
+ * 绘制定位图案
+ * 绘制7x7的定位图案,包含外框、内框和中心点
+ * @param ctx Canvas上下文
+ * @param startX 定位图案起始X坐标
+ * @param startY 定位图案起始Y坐标
+ * @param px 单个像素点大小
+ * @param pdColor 定位图案颜色
+ * @param background 背景颜色
+ * @param radius 圆角半径
+ */
+function drawPositionPattern(ctx: CanvasContext, startX: number, startY: number, px: number, pdColor: string, background: string, radius: number) {
+  const patternSize = px * 7 // 定位图案总尺寸 7x7
+
+  // 绘制外层边框 (7x7)
+  ctx.fillStyle = pdColor
+  drawRoundedRect(ctx, startX, startY, patternSize, patternSize, radius)
+
+  // 绘制内层空心区域 (5x5)
+  ctx.fillStyle = background
+  const innerStartX = startX + px
+  const innerStartY = startY + px
+  const innerSize = px * 5
+  const innerRadius = Math.max(0, radius - px) // 内层圆角适当减小
+  drawRoundedRect(ctx, innerStartX, innerStartY, innerSize, innerSize, innerRadius)
+
+  // 绘制中心实心区域 (3x3)
+  ctx.fillStyle = pdColor
+  const centerStartX = startX + px * 2
+  const centerStartY = startY + px * 2
+  const centerSize = px * 3
+  const centerRadius = Math.max(0, radius - px * 2) // 中心圆角适当减小
+  drawRoundedRect(ctx, centerStartX, centerStartY, centerSize, centerSize, centerRadius)
+}
+
+/**
+ * 绘制二维码到Canvas上下文
+ * 主要的二维码绘制函数,使用统一的Canvas 2D API
+ * @param context Canvas 2D绘图上下文对象
+ * @param options 二维码配置选项
+ */
+export function drawQrcode(context: CanvasContext, options: QrcodeOptions) {
+  const ctx: CanvasContext = context
+
+  // 生成二维码数据矩阵
+  const frame = generateFrame(options.text, options.ecc)
+  const points = frame.frameBuffer // 点阵数据
+  const width = frame.width // 矩阵宽度
+
+  // 计算二维码内容区域大小（减去四周的padding）
+  const contentSize = options.size - options.padding * 2
+  // 计算每个数据点的实际像素大小
+  const px = contentSize / width
+  // 二维码内容的起始位置（考虑padding）
+  const offsetX = options.padding
+  const offsetY = options.padding
+
+  // 绘制整个画布背景
+  ctx.fillStyle = options.background
+  ctx.fillRect(0, 0, options.size, options.size)
+
+  /**
+   * 判断坐标点是否在定位图案区域内
+   * 二维码三个角上的定位图案是7x7的方块
+   * @param i 横坐标
+   * @param j 纵坐标
+   * @param width 二维码宽度
+   * @returns 是否是定位点
+   */
+  function isPositionDetectionPattern(i: number, j: number, width: number): boolean {
+    // 判断三个角的定位图案(7x7)
+    if (i < 7 && j < 7) return true // 左上角
+    if (i > width - 8 && j < 7) return true // 右上角
+    if (i < 7 && j > width - 8) return true // 左下角
+    return false
+  }
+
+  /**
+   * 判断坐标点是否在Logo区域内(包含缓冲区)
+   * @param i 横坐标
+   * @param j 纵坐标
+   * * @param width 二维码宽度
+   * @param logoSize logo尺寸(像素)
+   * @param px 单个数据点像素大小
+   * @returns 是否在logo区域内
+   */
+  function isInLogoArea(i: number, j: number, width: number, logoSize: number, px: number): boolean {
+    if (logoSize <= 0) return false
+
+    // 计算logo在矩阵中占用的点数，限制最大不超过二维码总宽度的25%
+    // 根据二维码标准，中心区域最多可以遮挡约30%的数据，但为了确保识别率，我们限制在20%
+    const maxLogoRatio = 0.2 // 20%的区域用于logo
+    const maxLogoPoints = Math.floor(width * maxLogoRatio)
+    const logoPoints = Math.min(Math.ceil(logoSize / px), maxLogoPoints)
+
+    // 减少缓冲区，只保留必要的边距，避免过度遮挡数据
+    // 当logo较小时不需要缓冲区，当logo较大时才添加最小缓冲区
+    const buffer = logoPoints > width * 0.1 ? 1 : 0
+    const totalLogoPoints = logoPoints + buffer * 2
+
+    // 计算logo区域在矩阵中的中心位置
+    const centerI = Math.floor(width / 2)
+    const centerJ = Math.floor(width / 2)
+
+    // 计算logo区域的边界
+    const halfSize = Math.floor(totalLogoPoints / 2)
+    const minI = centerI - halfSize
+    const maxI = centerI + halfSize
+    const minJ = centerJ - halfSize
+    const maxJ = centerJ + halfSize
+
+    // 判断当前点是否在logo区域内
+    return i >= minI && i <= maxI && j >= minJ && j <= maxJ
+  }
+
+  // 先绘制定位图案
+  const pdColor = options.pdColor ?? options.foreground
+  const radius = options.pdRadius
+
+  // 绘制三个定位图案
+  // 左上角 (0, 0)
+  drawPositionPattern(ctx, offsetX, offsetY, px, pdColor, options.background, radius)
+  // 右上角 (width-7, 0)
+  drawPositionPattern(ctx, offsetX + (width - 7) * px, offsetY, px, pdColor, options.background, radius)
+  // 左下角 (0, width-7)
+  drawPositionPattern(ctx, offsetX, offsetY + (width - 7) * px, px, pdColor, options.background, radius)
+
+  // 点的间距,用于圆形和小方块模式
+  const dot = px * 0.1
+
+  // 遍历绘制数据点(跳过定位图案区域和logo区域)
+  for (let i = 0; i < width; i++) {
+    for (let j = 0; j < width; j++) {
+      if (points[j * width + i] > 0) {
+        // 跳过定位图案区域
+        if (isPositionDetectionPattern(i, j, width)) {
+          continue
+        }
+
+        // 跳过logo区域(包含缓冲区)
+        if (options.logo != '' && isInLogoArea(i, j, width, options.logoSize, px)) {
+          continue
+        }
+
+        // 绘制数据点
+        ctx.fillStyle = options.foreground
+        const x = offsetX + px * i
+        const y = offsetY + px * j
+
+        // 根据不同模式绘制数据点
+        switch (options.mode) {
+          case 'line': // 线条模式 - 绘制水平线条
+            ctx.fillRect(x, y, px, px / 2)
+            break
+
+          case 'circular': // 圆形模式 - 绘制圆点
+            ctx.beginPath()
+            ctx.arc(x + px / 2 - dot, y + px / 2 - dot, px / 2 - dot, 0, 2 * Math.PI)
+            ctx.fill()
+            ctx.closePath()
+            break
+
+          case 'rectSmall': // 小方块模式 - 绘制小一号的方块
+            ctx.fillRect(x + dot, y + dot, px - dot * 2, px - dot * 2)
+            break
+
+          default: // 默认实心方块模式
+            ctx.fillRect(x, y, px, px)
+        }
+      }
+    }
+  }
+
+  // 绘制 Logo
+  if (options.logo != '') {
+    let img: Image
+
+    // 微信小程序和鸿蒙环境创建图片
+    // #ifdef MP-WEIXIN || APP-HARMONY
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    img = context.canvas.createImage()
+    // #endif
+
+    // 其他环境创建图片
+    // #ifndef MP-WEIXIN || APP-HARMONY
+    img = new Image(options.logoSize, options.logoSize)
+    // #endif
+
+    // 设置图片加载完成后的回调，然后设置图片源
+    img.onload = () => {
+      drawLogo(ctx, options, img)
+    }
+    img.src = options.logo
+  }
+}
+
+/**
+ * 在二维码中心绘制Logo
+ * 在二维码中心位置绘制Logo图片,优化背景处理以减少对二维码数据的影响
+ * @param ctx Canvas上下文
+ * @param options 二维码配置
+ * @param img Logo图片对象
+ */
+function drawLogo(ctx: CanvasContext, options: QrcodeOptions, img: Image) {
+  ctx.save() // 保存当前绘图状态
+
+  // 计算二维码内容区域的中心位置（考虑padding）
+  const contentSize = options.size - options.padding * 2
+  const contentCenterX = options.padding + contentSize / 2
+  const contentCenterY = options.padding + contentSize / 2
+
+  // 优化背景处理：减少背景边距，最小化对二维码数据的影响
+  // 背景边距从6px减少到3px，降低对数据点的遮挡
+  const backgroundPadding = 3 // 背景比logo大3px
+  const backgroundSize = options.logoSize + backgroundPadding * 2
+
+  // 绘制白色背景作为Logo的底色（适当大于logo以确保可读性）
+  ctx.fillStyle = options.background // 使用二维码背景色而不是固定白色，保持一致性
+  const backgroundX = contentCenterX - backgroundSize / 2
+  const backgroundY = contentCenterY - backgroundSize / 2
+
+  // 绘制圆角背景，让logo与二维码更好融合
+  const cornerRadius = Math.min(backgroundSize * 0.1, 6) // 背景圆角半径
+  drawRoundedRect(ctx, backgroundX, backgroundY, backgroundSize, backgroundSize, cornerRadius)
+
+  // 获取图片信息后绘制Logo
+  uni.getImageInfo({
+    src: options.logo,
+    success: (imgInfo) => {
+      // 计算logo的精确位置
+      const logoX = contentCenterX - options.logoSize / 2
+      const logoY = contentCenterY - options.logoSize / 2
+
+      // 绘制Logo图片，减少边距从3px到1.5px，让logo更大一些
+      const logoPadding = 1.5
+      const actualLogoSize = options.logoSize - logoPadding * 2
+
+      // #ifdef APP-HARMONY
+      ctx.drawImage(img as any, logoX + logoPadding, logoY + logoPadding, actualLogoSize, actualLogoSize, 0, 0, imgInfo.width, imgInfo.height)
+      // #endif
+
+      // #ifndef APP-HARMONY
+      ctx.drawImage(img as any, logoX + logoPadding, logoY + logoPadding, actualLogoSize, actualLogoSize)
+      // #endif
+
+      ctx.restore() // 恢复之前的绘图状态
+    },
+    fail(err) {
+      console.error(err)
+    }
+  })
+}
+
+/**
+ * 检查是否为鸿蒙环境
+ * @returns 是否为鸿蒙环境
+ */
+export const isHarmony = (): boolean => {
+  // #ifdef APP-HARMONY
+  return true
+  // #endif
+
+  return false
+}
+/**
+ * 检查是否为App-IOS环境
+ * @returns 是否为App-IOS环境
+ */
+export const isAppIOS = (): boolean => {
+  // #ifdef APP-IOS
+  return true
+  // #endif
+  return false
+}
+/**
+ * 将base64转换为blob
+ * @param data base64数据
+ * @returns blob数据
+ */
+export function base64ToBlob(data: string, type: string = 'image/jpeg'): Blob {
+  // #ifdef H5
+  const bytes = window.atob(data.split(',')[1])
+  const ab = new ArrayBuffer(bytes.length)
+  const ia = new Uint8Array(ab)
+  for (let i = 0; i < bytes.length; i++) {
+    ia[i] = bytes.charCodeAt(i)
+  }
+  return new Blob([ab], { type })
+  // #endif
+}
+/**
+ * 将canvas转换为png图片
+ * @param canvas canvas元素
+ * @returns 图片路径
+ */
+export function canvasToPng(canvas: HTMLCanvasElement): Promise<string> {
+  return new Promise((resolve) => {
+    // #ifdef APP
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    canvas.parentElement!.takeSnapshot({
+      success(res: { tempFilePath: string; errMsg?: string }) {
+        resolve(res.tempFilePath)
+      },
+      fail(err: { errMsg: string }) {
+        console.error(err)
+        resolve('')
+      }
+    })
+    // #endif
+
+    // #ifdef H5
+    const url = URL.createObjectURL(base64ToBlob(canvas.toDataURL('image/png', 1) ?? ''))
+    resolve(url)
+    // #endif
+
+    // #ifdef MP
+    const data = canvas.toDataURL('image/png', 1)
+    const fileMg = uni.getFileSystemManager()
+    const filepath = `${wx.env.USER_DATA_PATH}/${uuid()}.png`
+    fileMg.writeFile({
+      filePath: filepath,
+      data: data.split(',')[1],
+      encoding: 'base64',
+      success() {
+        resolve(filepath)
+      },
+      fail(err) {
+        console.error(err)
+        resolve('')
+      }
+    })
+    // #endif
+  })
+}

package/components/oxy-qrcode/index.scss

@@ -0,0 +1,2 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";

package/components/oxy-qrcode/oxy-qrcode.vue

@@ -0,0 +1,124 @@
+<template>
+  <view :class="['qrcode', customClass]" :style="customStyle">
+    <canvas :canvas-id="qrcodeId" type="2d" :id="qrcodeId" :style="{ width: getUnit(width), height: getUnit(height) }"></canvas>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'oxy-qrcode',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { ref, watch, onMounted, getCurrentInstance, nextTick, computed, onUnmounted, shallowRef } from 'vue'
+import { qrcodeProps } from './types'
+import { canvasToPng, drawQrcode, isAppIOS, isHarmony, type QrcodeOptions } from './draw'
+import { unitConvert, unitConvertWithDefault, withDefaultUnit, uuid } from '../common/util'
+import { canvas2dAdapter } from '../common/canvasHelper'
+const props = defineProps(qrcodeProps)
+
+// 二维码组件id
+const qrcodeId = ref<string>('oxy-qrcode-' + uuid())
+
+/**
+ * 主绘制方法，根据当前 props 生成二维码并绘制到 canvas。
+ * 支持多平台（APP、H5、微信小程序），自动适配高分屏。
+ * 内部调用 drawQrcode 进行二维码点阵绘制。
+ */
+function getUnitNumber(value: number | string) {
+  return unitConvertWithDefault(value, { defaultUnit: 'rpx' })
+}
+
+function drawer() {
+  const data = {
+    text: props.text,
+    size: getUnitNumber(props.width),
+    foreground: props.foreground,
+    background: props.background,
+    padding: getUnitNumber(props.padding),
+    logo: props.logo,
+    logoSize: getUnitNumber(props.logoSize),
+    ecc: props.ecc,
+    mode: props.mode,
+    pdColor: props.pdColor,
+    pdRadius: getUnitNumber(props.pdRadius)
+  } as QrcodeOptions
+
+  nextTick(() => {
+    uni
+      .createSelectorQuery()
+      .select('#' + qrcodeId.value)
+      .fields({ node: true, size: true }, () => {})
+      .exec((res) => {
+        if (res[0]) {
+          const canvas = res[0].node
+          const ctx = canvas2dAdapter(canvas.getContext('2d') as CanvasRenderingContext2D)
+
+          // 获取设备像素比，用于高清屏适配
+          const dpr = uni.getSystemInfoSync().pixelRatio || 1
+          // 设置canvas的物理尺寸为CSS尺寸乘以像素比
+          canvas.width = res[0].width * dpr
+          canvas.height = res[0].height * dpr
+          // 缩放绘图上下文，使绘制逻辑使用CSS尺寸
+          ctx.scale(1, 1)
+          drawQrcode(ctx, data)
+        }
+      })
+  })
+}
+/**
+ * 获取当前二维码图片的临时文件地址
+ * @returns Promise返回图片路径，失败返回空字符串
+ */
+function toPng(): Promise<string> {
+  return new Promise((resolve) => {
+    uni
+      .createSelectorQuery()
+      .select('#' + qrcodeId.value)
+      .fields({ node: true }, () => {})
+      .exec((res) => {
+        if (res[0] && res[0].node) {
+          canvasToPng(res[0].node).then(resolve)
+        } else {
+          resolve('')
+        }
+      })
+  })
+}
+
+// 自动重绘
+const stopWatch = watch(
+  computed(() => [props.foreground, props.background, props.text, props.logo, props.logoSize, props.mode, props.padding, props.pdRadius]),
+  () => {
+    drawer()
+  }
+)
+
+function getUnit(value: number | string) {
+  return unitConvert(withDefaultUnit(value, 'rpx'), 0, { output: 'px' })
+}
+
+onMounted(() => {
+  setTimeout(
+    () => {
+      drawer()
+    },
+    isHarmony() || isAppIOS() ? 50 : 0
+  )
+})
+
+onUnmounted(() => {
+  stopWatch()
+})
+
+defineExpose({
+  toPng
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>