更新记录

1.0.0（2024-12-18） 下载此版本

1.介绍 sevenq-canvas-seal 组件是一个用于绘制自定义图案的canvas印章状态元素，要想完美使用该组件，请仔细阅读文档哈！！！

平台兼容性

seven-canvas-seal 组件属性文档

seven-canvas-seal 组件是一个用于绘制自定义图案的canvas印章状态元素，以下是其支持的属性列表及其详细说明。

参数属性列表

参数属性详细

canvasId

• 类型: String
• 默认值: 'canvas-first'
• 说明: canvas元素的ID，用于在HTML中标识该canvas元素。

width

• 类型: Number
• 默认值: 120
• 单位: px
• 说明: canvas的宽度，定义了canvas画布的宽度。

height

• 类型: Number
• 默认值: 120
• 单位: px
• 说明: canvas的高度，定义了canvas画布的高度。

scaleRate

• 类型: Number
• 默认值: 2.1
• 说明: canvas的缩放比例，用于调整绘制内容的整体大小，不建议修改。

fillBg

• 类型: String
• 默认值: 'rgba(255, 255, 255, 0.8)'
• 说明: 外圆的填充背景颜色，使用CSS颜色值。

isShowOutCircle

• 类型: Boolean
• 默认值: true
• 说明: 是否显示外圆，如果设置为false，则不绘制外圆。

outRadiusMargin

• 类型: Number
• 默认值: 0
• 说明: 外圆距文本的距离，调整外圆与内部文本之间的间隔。

borderWidth

• 类型: Number
• 默认值: 3
• 单位: px
• 说明: 外圆边线的宽度，定义了外圆边框的粗细。

borderColor

• 类型: String
• 默认值: 'rgba(255, 0, 0, 1)'
• 说明: 外圆边线的颜色，使用CSS颜色值。

totalAngleRadius

• 类型: Number
• 默认值: 250
• 说明: 文本所展示的区域角度，可以是半圆或者360°全方位铺开。

isShowDate

• 类型: Boolean
• 默认值: true
• 说明: 是否在canvas上显示日期。

date

• 类型: String
• 默认值: '智慧园区佳兴管理平台 2024年12月24号'
• 说明: 显示的日期文本。

dateTextColor

• 类型: String
• 默认值: 'rgba(255, 0, 0, 1)'
• 说明: 日期文本的颜色，使用CSS颜色值。

dateTextFontSize

• 类型: Number
• 默认值: 12
• 单位: px
• 说明: 日期文本的字体大小。

dateShowLoaction

• 类型: Number
• 默认值: 160
• 说明: 日期文本开始显示的位置，相对于canvas的顶部偏移量。

innerCircleFillBg

• 类型: String
• 默认值: 'rgba(255, 255, 255, 0.8)'
• 说明: 内圆填充背景颜色，使用CSS颜色值。

innerCircleBorderWidth

• 类型: Number
• 默认值: 3
• 单位: px
• 说明: 内圆边线的宽度，定义了内圆边框的粗细。

innerCircleBorderColor

• 类型: String
• 默认值: 'rgba(255, 0, 0, 1)'
• 说明: 内圆边线的颜色，使用CSS颜色值。

innerCircleMargin

• 类型: Number
• 默认值: 0
• 说明: 内圆距外圆边距，调整内圆与外圆之间的间隔。

isShowInnerHx

• 类型: Boolean
• 默认值: false
• 说明: 是否显示内圆内侧弧线。

innerHxMargin

• 类型: Number
• 默认值: 4
• 说明: 内侧弧线距离内圆边距，调整内侧弧线与内圆边缘的距离。

innerHxOwnLength

• 类型: Number
• 默认值: 2
• 说明: 内圆内测弧线单个虚线长度，定义了虚线的长度。

innerHxOwnGraph

• 类型: Number
• 默认值: 10
• 说明: 内圆内测弧线单个虚线间隔，定义了虚线之间的间隔。

innerHxBorderColor

• 类型: String
• 默认值: 'rgba(255, 0, 0, 1)'
• 说明: 内圆内测弧线的边线颜色，使用CSS颜色值。

innerHxBorderWidth

• 类型: Number
• 默认值: 10
• 单位: px
• 说明: 内圆内测弧线的边线宽度。

isShowMostInnerCircle

• 类型: Boolean
• 默认值: true
• 说明: 是否显示最内侧圆。

mostInnerCircleLineColor

• 类型: String
• 默认值: 'rgba(255, 0, 0, 1)'
• 说明: 最内侧圆边线颜色，使用CSS颜色值。

mostInnerCircelLineWidth

• 类型: Number
• 默认值: 1
• 单位: px
• 说明: 最内侧圆边线宽度。

mostInnerCircleMargin

• 类型: Number
• 默认值: 6
• 单位: px
• 说明: 最内侧圆距内圆边距。

statusText

• 类型: String
• 默认值: '已审核'
• 说明: 中心点状态文本。

statusFontSize

• 类型: Number
• 默认值: 20
• 单位: px
• 说明: 中心点状态文本大小。

statusTextColor

• 类型: String
• 默认值: 'rgba(255, 0, 0, 1)'
• 说明: 中心点状态文本颜色，使用CSS颜色值。

statusTextDanger

• 类型: Number
• 默认值: -35
• 单位: °
• 说明: 中心点状态文本倾斜角度。

statusTextWeight

• 类型: String
• 默认值: 'bold'
• 说明: 中心点文本加粗，可选值'bold'或'normal'。

statusShadowVal

• 类型: Number
• 默认值: 1
• 说明: 中心点文本阴影。

isShowWaveLine

• 类型: Boolean
• 默认值: true
• 说明: 是否绘制波浪纹曲线。

curveWidth

• 类型: Number
• 默认值: 0.8
• 说明: 单条波浪纹曲线的宽度，区间在0到1之间。

curveColor

• 类型: String
• 默认值: 'rgba(255, 0, 0, 1)'
• 说明: 单条波浪纹曲线的颜色，使用CSS颜色值。

curveWaveHeight

• 类型: Number
• 默认值: 0.06
• 说明: 波浪曲线最大高度，区间在0到1之间。

curveWaveLength

• 类型: Number
• 默认值: 20
• 说明: 单截曲线周期长度，不建议修改（如没有在中心，尝试修改此属性）。

numberOfWaves

• 类型: Number
• 默认值: 8
• 说明: 显示曲线的数量，最多10条显示效果更佳。

lineSpacing

• 类型: Number
• 默认值: 5
• 说明: 每条曲线间的间距，区间在0到10之间。

curveSmoothness

• 类型: Number
• 默认值: 0.06
• 说明: 曲线间平滑效果，区间在0到1之间。

curveWaveAngle

• 类型: Number
• 默认值: -20
• 说明: 波浪线倾斜角度。

注意：

1、 本组件完全遵守按需导入规则哈，不需要页面单独引入，下载到项目中直接可以使用。

1、如果想要完美使用此组件，需要仔细阅读文档哈，有问题随时评论，看到第一时间回复。

2、后续版本将会根据用户信息反馈持续迭代更新哈！！！

单个使用实例

<template>
<sevenq-canvas-seal canvasId="canvas-eighth" :width="130" :height="130" :isShowWaveLine="false"
    :statusShadowVal="0" statusText="已通过" :borderColor="canvasThindColor"
    :dateTextColor="canvasThindColor" :innerHxBorderColor="canvasThindColor"
    :innerCircleBorderColor="canvasThindColor" :mostInnerCircleLineColor="canvasThindColor"
    :statusTextColor="canvasThindColor">
</sevenq-canvas-seal>
</template>
<script lang="ts" setup>
    import { ref } from 'vue'
    const canvasThindColor = ref("rgba(85, 170, 0, 1.0)")
</script>

完整多个使用示例：(单页面多个组件，canvasId需要唯一)

<template>
    <view class="container">
        <!-- 第一组样式 状态印章-->
        <view class="canvas-first">
            <view>
                <sevenq-canvas-seal canvasId="canvas-first" :width="100" :height="100" :isShowOutCircle="false"
                    :isShowDate="false" :isShowWaveLine="false" :statusShadowVal="0" statusText="待提交"
                    :innerHxBorderColor="canvasFistColor" :innerCircleBorderColor="canvasFistColor"
                    :mostInnerCircleLineColor="canvasFistColor" :statusTextColor="canvasFistColor"></sevenq-canvas-seal>
            </view>
            <view>
                <sevenq-canvas-seal canvasId="canvas-second" :width="100" :height="100" :isShowOutCircle="false"
                    :isShowDate="false" :isShowWaveLine="false" :statusShadowVal="0" statusText="待审批"
                    :innerHxBorderColor="canvasSecondColor" :innerCircleBorderColor="canvasSecondColor"
                    :mostInnerCircleLineColor="canvasSecondColor" :statusTextColor="canvasSecondColor"></sevenq-canvas-seal>
            </view>
            <view>
                <sevenq-canvas-seal canvasId="canvas-third" :width="100" :height="100" :isShowOutCircle="false"
                    :isShowDate="false" :isShowWaveLine="false" :statusShadowVal="10" statusText="已通过"
                    :innerHxBorderColor="canvasThindColor" :innerCircleBorderColor="canvasThindColor"
                    :mostInnerCircleLineColor="canvasThindColor" :statusTextColor="canvasThindColor"></sevenq-canvas-seal>
            </view>
            <view>
                <sevenq-canvas-seal canvasId="canvas-fourth" :width="100" :height="100" :isShowOutCircle="false"
                    :isShowDate="false" :isShowWaveLine="false" :statusShadowVal="10" statusText="已驳回"></sevenq-canvas-seal>
            </view>
            <view>
                <sevenq-canvas-seal canvasId="canvas-fiveth" :width="100" :height="100" :isShowOutCircle="false" isShowInnerHx
                    :isShowDate="false" :isShowWaveLine="false" :statusShadowVal="10" statusText="审批中"
                    :innerHxBorderColor="canvasfivethColor" :innerCircleBorderColor="canvasfivethColor"
                    :mostInnerCircleLineColor="canvasfivethColor" :statusTextColor="canvasfivethColor"></sevenq-canvas-seal>
            </view>
        </view>
        <!-- 第二组样式 状态印章-->
        <view class="canvas-second">
            <view>
                <sevenq-canvas-seal canvasId="canvas-sixth" :width="130" :height="130" :isShowWaveLine="false"
                    :statusShadowVal="0" statusText="待提交" :borderColor="canvasFistColor"
                    :dateTextColor="canvasFistColor" :innerHxBorderColor="canvasFistColor"
                    :innerCircleBorderColor="canvasFistColor" :mostInnerCircleLineColor="canvasFistColor"
                    :statusTextColor="canvasFistColor"></sevenq-canvas-seal>
            </view>
            <view>
                <sevenq-canvas-seal canvasId="canvas-seventh" :width="130" :height="130" :isShowWaveLine="false"
                    :statusShadowVal="0" statusText="待审批" :borderColor="canvasSecondColor"
                    :dateTextColor="canvasSecondColor" :innerHxBorderColor="canvasSecondColor"
                    :innerCircleBorderColor="canvasSecondColor" :mostInnerCircleLineColor="canvasSecondColor"
                    :statusTextColor="canvasSecondColor"></sevenq-canvas-seal>
            </view>
            <view>
                <sevenq-canvas-seal canvasId="canvas-eighth" :width="130" :height="130" :isShowWaveLine="false"
                    :statusShadowVal="0" statusText="已通过" :borderColor="canvasThindColor"
                    :dateTextColor="canvasThindColor" :innerHxBorderColor="canvasThindColor"
                    :innerCircleBorderColor="canvasThindColor" :mostInnerCircleLineColor="canvasThindColor"
                    :statusTextColor="canvasThindColor"></sevenq-canvas-seal>
            </view>
            <view>
                <sevenq-canvas-seal canvasId="canvas-ninth" :width="130" :height="130" :isShowWaveLine="false"
                    :statusShadowVal="0" statusText="已驳回"></sevenq-canvas-seal>
            </view>
        </view>
        <!--第三组样式 状态印章-->
        <view class="canvas-thind">
            <view>
                <sevenq-canvas-seal canvasId="canvas-tenth" :width="130" :height="130" :isShowWaveLine="false" isShowInnerHx
                    :innerHxOwnLength="2" :totalAngleRadius="160" date="2024年12月24日" :statusShadowVal="0"
                    statusText="待提交" :borderColor="canvasFistColor" :dateTextColor="canvasFistColor"
                    :innerHxBorderColor="canvasFistColor" :innerCircleBorderColor="canvasFistColor"
                    :mostInnerCircleLineColor="canvasFistColor" :statusTextColor="canvasFistColor"></sevenq-canvas-seal>
            </view>
            <view>
                <sevenq-canvas-seal canvasId="canvas-eleven" :width="130" :height="130" :isShowWaveLine="false" isShowInnerHx
                    :innerHxOwnLength="6" :totalAngleRadius="160" date="2024年12月24日" :statusShadowVal="0"
                    statusText="待审批" :borderColor="canvasSecondColor" :dateTextColor="canvasSecondColor"
                    :innerHxBorderColor="canvasSecondColor" :innerCircleBorderColor="canvasSecondColor"
                    :mostInnerCircleLineColor="canvasSecondColor" :statusTextColor="canvasSecondColor"></sevenq-canvas-seal>
            </view>
            <view>
                <sevenq-canvas-seal canvasId="canvas-twelve" :width="130" :height="130" :isShowWaveLine="false" isShowInnerHx
                    :innerHxOwnLength="16" :totalAngleRadius="160" date="2024年12月24日" :statusShadowVal="0"
                    statusText="已通过" :borderColor="canvasThindColor" :dateTextColor="canvasThindColor"
                    :innerHxBorderColor="canvasThindColor" :innerCircleBorderColor="canvasThindColor"
                    :mostInnerCircleLineColor="canvasThindColor" :statusTextColor="canvasThindColor"></sevenq-canvas-seal>
            </view>
            <view>
                <sevenq-canvas-seal canvasId="canvas-thirteen" :width="130" :height="130" :isShowWaveLine="false"
                    isShowInnerHx :innerHxOwnLength="26" :totalAngleRadius="250" :statusShadowVal="0"
                    statusText="已驳回"></sevenq-canvas-seal>
            </view>
        </view>
        <!--第四组样式 状态印章-->
        <view class="canvas-fourth">
            <view>
                <sevenq-canvas-seal canvasId="canvas-fourteen" :width="110" :height="110" :isShowWaveLine="true"
                    :innerHxOwnLength="2" :totalAngleRadius="160" date="2024年12月24日" :statusShadowVal="0"
                    statusText="待提交" :borderColor="canvasFistColor" :dateTextColor="canvasFistColor"
                    :innerHxBorderColor="canvasFistColor" :innerCircleBorderColor="canvasFistColor"
                    :mostInnerCircleLineColor="canvasFistColor" :statusTextColor="canvasFistColor" :curveWaveLength="22"
                    :curveColor="canvasFistColor"></sevenq-canvas-seal>
            </view>
            <view>
                <sevenq-canvas-seal canvasId="canvas-fifteen" :width="110" :height="110" :isShowWaveLine="true"
                    :innerHxOwnLength="6" :totalAngleRadius="160" date="2024年12月24日" :statusShadowVal="0"
                    statusText="待审批" :borderColor="canvasSecondColor" :dateTextColor="canvasSecondColor"
                    :innerHxBorderColor="canvasSecondColor" :innerCircleBorderColor="canvasSecondColor"
                    :mostInnerCircleLineColor="canvasSecondColor" :statusTextColor="canvasSecondColor"
                    :curveWaveLength="22" :curveColor="canvasSecondColor"></sevenq-canvas-seal>
            </view>
            <view>
                <sevenq-canvas-seal canvasId="canvas-sixteen" :width="110" :height="110" :totalAngleRadius="250"
                    :isShowWaveLine="true" statusText="已通过" :borderColor="canvasThindColor"
                    :dateTextColor="canvasThindColor" :innerHxBorderColor="canvasThindColor"
                    :innerCircleBorderColor="canvasThindColor" :mostInnerCircleLineColor="canvasThindColor"
                    :statusTextColor="canvasThindColor" :statusShadowVal="10" :curveWaveLength="22"
                    :curveColor="canvasThindColor"></sevenq-canvas-seal>
            </view>
            <view>
                <sevenq-canvas-seal canvasId="canvas-seventeen" :width="110" :height="110" :isShowWaveLine="true"
                    :innerHxOwnLength="26" :totalAngleRadius="250" :statusShadowVal="10" :curveWaveLength="22"
                    statusText="已驳回"></sevenq-canvas-seal>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import { ref, getCurrentInstance, computed, inject } from 'vue'
    const canvasFistColor = ref("rgba(85, 85, 255, 1.0)")
    const canvasSecondColor = ref("rgba(255, 85, 0, 1.0)")
    const canvasThindColor = ref("rgba(85, 170, 0, 1.0)")
    const canvasfivethColor = ref("rgba(0, 170, 255, 1.0)")
</script>

<style lang="scss" scoped>

    .canvas-first,
    .canvas-second,
    .canvas-thind,
    .canvas-fourth {
        width: 750rpx;
        margin: 100rpx 0rpx;
        display: flex;
        align-items: center;
        justify-content: left;
        margin-top: 160rpx;

        view:not(:first-child) {
            margin-left: 40rpx;
        }
    }
    .canvas-first{
        margin: 100rpx 0rpx;
    }
    .canvas-fourth {
        view:not(:first-child) {
            margin-left: 70rpx;
        }
    }
</style>