标签

src/pages/integratedQuery/electronicTag/index.vue

@@ -22,26 +22,115 @@
         </uni-card>
 
         <uni-card is-shadow is-full spacing="0px" style="margin-top: 10px">
+            <div>
+                
+            </div>
             <div class="img-cont">
-                <image style="width: 100%" :src="codeImg"></image>
+                <div>
+                    <canvas
+                        canvasId="canvas"
+                        class="my-canvas"
+                    ></canvas>
+                </div>
             </div>
         </uni-card>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { nextTick, ref } from 'vue'
 
 // 编号
 const code = ref<string>('')
 // 编号图片
 const codeImg = ref<string>('https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg')
 
+onLoad(() => {
+    nextTick(() => {
+        // 画章
+        chapter('XXX专用章', 'XXX科技股份有限公司')
+    })
+})
+
 // 识别
 const handleRecognition = () => {
     console.log('识别')
     uni.navigateTo({ url: '/pages/integratedQuery/electronicTag/codeRecognition' })
 }
+
+// 绘制章
+const chapter = (text, companyName) => {
+    const ctx = uni.createCanvasContext('canvas')
+
+    // 绘制印章边框
+    let width = 82
+    let height = 82
+    ctx.lineWidth = 3
+    ctx.strokeStyle = '#cf4c36'
+    ctx.beginPath()
+    ctx.arc(width, height, 80, 0, Math.PI * 2) // 宽、高、半径
+    ctx.stroke()
+
+    // 画五角星
+    create5star(ctx, width, height, 20, '#cf4c36', 0)
+
+    // 绘制印章名称
+    ctx.font = '100 13px 宋体'
+    ctx.textBaseline = 'middle' // 设置文本的垂直对齐方式
+    ctx.textAlign = 'center' // 设置文本的水平对对齐方式
+    ctx.lineWidth = 3 // 设置线条的宽度
+    ctx.strokeStyle = '#cf4c36'
+    ctx.strokeText(text, width, height + 50)
+
+    // 绘制印章单位
+    ctx.translate(width, height) // 平移到此位置
+    ctx.font = '100 13px 宋体'
+    let count = companyName.length // 字数
+    let angle = (4 * Math.PI) / (3 * (count - 1)) // 字间角度
+    let chars = companyName.split('')
+    let c
+    for (let i = 0; i < count; i++) {
+        c = chars[i] // 需要绘制的字符
+        if (i == 0) {
+            ctx.rotate((5 * Math.PI) / 6)
+        } else {
+            ctx.rotate(angle)
+        }
+
+        ctx.save()
+        ctx.translate(65, 0) // 平移到此位置,此时字和x轴垂直，公司名称和最外圈的距离
+        ctx.rotate(Math.PI / 2) // 旋转90度,让字平行于x轴
+        ctx.strokeStyle = '#cf4c36' // 设置印章单位字体颜色为较浅的红色
+        ctx.strokeText(c, 0, 0) // 此点为字的中心点
+        ctx.restore()
+    }
+
+    // 执行绘制
+    ctx.draw()
+}
+
+//绘制五角星
+const create5star = (context, sx, sy, radius, color, rotato) => {
+    context.save()
+    context.fillStyle = color
+    context.translate(sx, sy) //移动坐标原点
+    context.rotate(Math.PI + rotato) //旋转
+    context.beginPath() //创建路径
+    // let x = Math.sin(0);
+    // let y = Math.cos(0);
+    let dig = (Math.PI / 5) * 4
+    for (let i = 0; i < 5; i++) {
+        //画五角星的五条边
+        let x = Math.sin(i * dig)
+        let y = Math.cos(i * dig)
+        context.lineTo(x * radius, y * radius)
+    }
+    context.closePath()
+    context.stroke()
+    context.fill()
+    context.restore()
+}
 </script>
 
 <style lang="scss" scoped>
@@ -52,6 +141,16 @@ page {
     padding: 10px;
     .img-cont {
         min-height: 100px;
+        margin-top: 20px;
+        /* display: flex;
+        align-items: center;
+        justify-content: right;
+        position: relative; */
+        .my-canvas {
+            width: 165px;
+            height: 165px;
+            z-index: 9999;
+        }
     }
 }
 </style>