diff --git a/src/DrawStampUtilsDemo.vue b/src/DrawStampUtilsDemo.vue index b5d395e..dcefacc 100644 --- a/src/DrawStampUtilsDemo.vue +++ b/src/DrawStampUtilsDemo.vue @@ -120,183 +120,14 @@ const editorControls = ref(null) const stampCanvas = ref(null) const MM_PER_PIXEL = 10 // 毫米换算像素 -const isCircleDetect = ref(true) -// 添加响应式数据 -const companyName = ref('绘制印章有限责任公司') -// 印章编码 -const stampCode = ref('1234567890123') -// 税号 -const taxNumberValue = ref('000000000000000000') -// 公司名称字体大(毫米) -const companyFontFamily = ref('Songti SC') -const companyFontSizeMM = ref(4.2) -const codeFontFamily = ref('SimSun') -// 编码字体大小(毫米) -const codeFontSizeMM = ref(1.2) -// 编码字体宽度(毫米) -const codeFontWidthMM = ref(1.2) -// 圆形印章半径(毫米) -const circleRadius = ref(20) -// 圆形边框宽度(毫米) -const circleBorderWidth = ref(1) -// 主题颜色 -const primaryColor = ref('blue') -// 五角星直径(毫米) -const starDiameter = ref(14) // 做旧效果 const applyAging = ref(false) // 手动做旧 const manualAging = ref(false) // 添加新的响应式数据 const agingIntensity = ref(50) -// 文字分布因子,控制公司名称文字在椭圆上的分布范围 -const textDistributionFactor = ref(3) -// 调整椭圆文字 -const adjustEllipseText = ref(false) -// 调整椭圆文字因子 -const adjustEllipseTextFactor = ref(0.5) -// 文字边距,控制公���名称文字距离椭圆边缘的距离(单位:毫米) -const textMarginMM = ref(1) // 默认值为1mm -// 编码边距,控制印章编码距离椭圆边缘的距离(单位毫米) -const codeMarginMM = ref(1) // 默认值为1mm -// 编码分布因子,控制印章编码在椭圆下方的分布范围 -const codeDistributionFactor = ref(20) // 默认值可以根据需要调整 -// 印章印章类型 -const bottomText = ref('合同专用章') -// 印章类型大小,默认 4mm -const bottomTextFontFamily = ref('SimSun') -const bottomTextFontSizeMM = ref(4.6) -const bottomTextFontWidthMM = ref(3) -// 印章类型字符间距,默认 0 -const bottomTextLetterSpacing = ref(0) -// 五角星垂直位置调整,认 0 -const starPositionY = ref(0) -// 印章类型垂直位置调整,默认 0 -const bottomTextPositionY = ref(-5) -const companyNameCompression = ref(1) -const companyNameFontWeight = ref(400) -const bottomTextFontWeight = ref(400) -const codeFontWeight = ref(400) -const taxNumberFontFamily = ref('Songti SC') -const taxNumberFontWeight = ref(400) -const bottomTextCompression = ref(1) -const codeCompression = ref(1) -// 防伪纹路 -const securityPatternEnabled = ref(true) -const securityPatternDensity = ref(0.5) -const securityPatternWidth = ref(0.2) // 纹路宽度,单位为毫米 -const securityPatternColor = ref('#FF0000') -const securityPatternCount = ref(5) // 防伪纹路数量 -const securityPatternLength = ref(2) // 纹路长度,单为毫米 -const showFullRuler = ref(false) -const shouldDrawStar = ref(false) // 默认绘制五角星 -const taxNumberCompression = ref(1) // 税号文字宽度缩放比例 -const taxNumberLetterSpacing = ref(0.3) // 税号文字间距(单位:毫米) -const taxNumberPositionY = ref(0) // 税号垂直位置调,默认为0 -const drawInnerCircle = ref(true) // 是否绘制内圈圆 -const innerCircleLineWidth = ref(0.5) // 内圈圆线宽,单位为毫米 -const innerCircleWidth = ref(15) // 内圈圆宽度,单位为毫米 -const innerCircleHeight = ref(12) // 内圈圆高度,单位为毫米 -const drawOutThinCircle = ref(true) // 是否绘制内圈圆 -const outThinCircleLineWidth = ref(0.5) // 内圈圆线宽,单位为毫米 -const outThinCircleWidth = ref(25) // 内圈圆宽度,单位为毫米 -const outThinCircleHeight = ref(22) // 内圈圆高度,单位为毫米 -const stampImageRef = ref(null) -const shouldDrawRoughEdge = ref(false) // 是否绘制毛边 -const roughEdgeWidth = ref(0.2) // 毛边宽度,单位为毫米 -const roughEdgeHeight = ref(5) // 毛边高度,单位为毫米 -const roughEdgeProbability = ref(0.5) // 毛边概率 -const roughEdgeShift = ref(8) // 毛边偏移 -const roughEdgePoints = ref(360) // 毛边点数 const showLegalDialog = ref(false) // 是否显示法律提示弹窗 -// 添加印章类型列表的响式数据 -const stampTypeList = ref([ - { - stampType: '印章类型', - fontHeight: 4.6, - fontFamily: 'SimSun', - compression: 0.75, - letterSpacing: 0, - positionY: -3, - fontWeight: 'normal', - lineSpacing: 2, - fontWidth: 3 - } -]) -// 添加公司列表的响应式数据 -const companyList = ref([ - { - companyName: '绘制印章有限责任公司', - compression: 1, - borderOffset: 1, - textDistributionFactor: 3, - fontFamily: 'SimSun', - fontHeight: 4.2, - fontWeight: 'normal', - shape: 'ellipse', - adjustEllipseText: false, - adjustEllipseTextFactor: 0.5, - startAngle: 0, - rotateDirection: "counterclockwise" - } -]) -// 添加新的响应式变量 -const useStarImage = ref(false) -const starImageWidth = ref(10) // 图片宽度,单位mm -const starImageHeight = ref(10) // 图片高度,单位mm -const keepAspectRatio = ref(true) // 是否保持宽高比 -// 添加内圈列表的响应式数据 -const innerCircleList = ref([ - { - drawInnerCircle: true, - innerCircleLineWidth: 0.5, - innerCircleLineRadiusX: 36, - innerCircleLineRadiusY: 27 - }, - { - drawInnerCircle: true, - innerCircleLineWidth: 0.5, - innerCircleLineRadiusX: 16, - innerCircleLineRadiusY: 12 - } -]) -const templateFileInput = ref(null) -// 添加图片列表的响应式数据 -const imageList = ref([{ - imageUrl: '', - imageWidth: 10, - imageHeight: 10, - positionX: 0, - positionY: 0, - keepAspectRatio: true -}]) - -// 添加外圈圆形边的响应式数据 -const drawOutBorder = ref(true) -const outBorderLineWidth = ref(1) - -// 添加新图片 -const addNewImage = () => { - console.log("add new image", imageList.value) - if(imageList.value === undefined || imageList.value === null) { - imageList.value = [] - } - if(imageList.value.length < 10) { - imageList.value.push({ - imageUrl: '', - imageWidth: 10, - imageHeight: 10, - positionX: 0, - positionY: 0, - keepAspectRatio: true - }) - } -} -// 删除图片 -const removeImage = (index: number) => { - imageList.value.splice(index, 1) -} // 保存模板 const saveAsTemplate = () => { @@ -319,124 +150,6 @@ const saveAsTemplate = () => { URL.revokeObjectURL(url) } -// 触发文件选择 -const triggerTemplateLoad = () => { - templateFileInput.value?.click() -} - -// 载模板 -const loadTemplate = (event: Event) => { - const target = event.target as HTMLInputElement - if (target.files && target.files[0]) { - const file = target.files[0] - const reader = new FileReader() - - reader.onload = (e) => { - try { - if (e.target?.result) { - const jsonStr = e.target.result as string - const configs = JSON.parse(jsonStr) - - // 设置新的配置 - drawStampUtils.setDrawConfigs(configs) - - // 恢复界面显示 - restoreDrawConfigs() - - // 刷新印章显示 - drawStamp() - } - } catch (error) { - console.error('加载模板失败:', error) - alert('加载模板失败,请确保文件格式正确') - } - } - - reader.readAsText(file) - } - - // 清除文件选择,确保同一文件可以重复选择 - target.value = '' -} - -// 修改图片上传处理函数 -const handleImageUpload = (event: Event, index: number) => { - const target = event.target as HTMLInputElement - if (target.files && target.files[0]) { - const file = target.files[0] - const reader = new FileReader() - reader.onload = (e) => { - if (e.target?.result) { - imageList.value[index].imageUrl = e.target.result as string - drawStamp() - } - } - reader.readAsDataURL(file) - } -} - -// 添加新的印章类型行 -const addNewStampType = () => { - let newPositionY = -3 - if(stampTypeList.value.length > 0){ - const lastStampType = stampTypeList.value[stampTypeList.value.length - 1] - newPositionY = lastStampType.positionY + lastStampType.fontHeight - } - stampTypeList.value.push({ - stampType: '新印章类型', - fontHeight: 4.0, - fontFamily: 'SimSun', - compression: 0.75, - letterSpacing: 0, - positionY: newPositionY, - fontWeight: 'normal', - lineSpacing: 2, - fontWidth: 3 - }) -} - -// 删除指定的印章型行 -const removeStampType = (index: number) => { - stampTypeList.value.splice(index, 1) -} - -// 添加新的公司行 -const addNewCompany = () => { - let newBorderOffset = 1 - if(companyList.value.length > 0) { - const lastCompany = companyList.value[companyList.value.length - 1] - newBorderOffset = lastCompany.borderOffset + lastCompany.fontHeight - } - companyList.value.push({ - companyName: '新公司名称', - compression: 1, - borderOffset: newBorderOffset, - textDistributionFactor: 3, - fontFamily: 'SimSun', - fontHeight: 4.2, - fontWeight: 'normal', - shape: 'ellipse', - adjustEllipseText: false, - adjustEllipseTextFactor: 0.5, - startAngle: 0, - rotateDirection: "counterclockwise" - }) -} - -// 删除指定的公司行 -const removeCompany = (index: number) => { - companyList.value.splice(index, 1) -} - -const saveStampAsPNG = () => { - showLegalDialog.value = true -} - -const drawStampWidth = ref(40) -const drawStampHeight = ref(30) - -// 添加新的响应式变量 -const bottomTextLineSpacing = ref(1.2) // 默认行间距为1.2mm // 绘制工具 let drawStampUtils: DrawStampUtils @@ -451,137 +164,6 @@ const drawStamp = (refreshSecurityPattern: boolean = false, refreshOld: boolean } -// 添加新内圈 -const addNewInnerCircle = () => { - innerCircleList.value.push({ - drawInnerCircle: true, - innerCircleLineWidth: 0.5, - innerCircleLineRadiusX: 16, - innerCircleLineRadiusY: 12 - }) -} - -// 删除内圈 -const removeInnerCircle = (index: number) => { - innerCircleList.value.splice(index, 1) -} - -// 更新绘制配置 -const updateDrawConfigs = () => { - const drawConfigs = drawStampUtils.getDrawConfigs() - // 做旧效果 - const agingEffect = drawConfigs.agingEffect - agingEffect.applyAging = applyAging.value - agingEffect.agingIntensity = agingIntensity.value - drawConfigs.openManualAging = manualAging.value - - // 防伪纹路 - const securityPattern: ISecurityPattern = drawConfigs.securityPattern - securityPattern.openSecurityPattern = securityPatternEnabled.value - securityPattern.securityPatternCount = securityPatternCount.value - securityPattern.securityPatternWidth = securityPatternWidth.value - securityPattern.securityPatternLength = securityPatternLength.value - - // 公司名称 - const company: ICompany = drawConfigs.company - company.companyName = companyName.value - company.textDistributionFactor = textDistributionFactor.value - company.borderOffset = textMarginMM.value - company.fontHeight = companyFontSizeMM.value - company.fontFamily = companyFontFamily.value - company.compression = companyNameCompression.value - company.fontWeight = companyNameFontWeight.value - company.adjustEllipseText = adjustEllipseText.value - company.adjustEllipseTextFactor = adjustEllipseTextFactor.value - - // 税号 - const taxNumber: ITaxNumber = drawConfigs.taxNumber - taxNumber.code = taxNumberValue.value - taxNumber.compression = taxNumberCompression.value - taxNumber.positionY = taxNumberPositionY.value - taxNumber.letterSpacing = taxNumberLetterSpacing.value - taxNumber.fontFamily = taxNumberFontFamily.value - taxNumber.fontWeight = taxNumberFontWeight.value - - // 印章类型 - const stampType: IStampType = drawConfigs.stampType - stampType.stampType = bottomText.value - stampType.fontFamily = bottomTextFontFamily.value - stampType.fontHeight = bottomTextFontSizeMM.value - stampType.fontWidth = bottomTextFontWidthMM.value - stampType.letterSpacing = bottomTextLetterSpacing.value - stampType.positionY = bottomTextPositionY.value - stampType.compression = bottomTextCompression.value - stampType.fontWeight = bottomTextFontWeight.value - stampType.lineSpacing = bottomTextLineSpacing.value // 新增:置行间距 - - // 印章编码 - const code: ICode = drawConfigs.stampCode - code.code = stampCode.value - code.compression = codeCompression.value - code.fontFamily = codeFontFamily.value - code.fontHeight = codeFontSizeMM.value - code.fontWidth = codeFontWidthMM.value - code.borderOffset = codeMarginMM.value - code.textDistributionFactor = codeDistributionFactor.value - code.fontWeight = codeFontWeight.value - // 印章配置 - drawConfigs.primaryColor = primaryColor.value - drawConfigs.borderWidth = circleBorderWidth.value - drawConfigs.width = drawStampWidth.value - drawConfigs.height = drawStampHeight.value - - // 五角星/图片配置 - const drawStar: IDrawStar = drawConfigs.drawStar - drawStar.drawStar = shouldDrawStar.value - drawStar.useImage = useStarImage.value - drawStar.imageWidth = starImageWidth.value - drawStar.imageHeight = starImageHeight.value - drawStar.keepAspectRatio = keepAspectRatio.value - drawStar.starDiameter = starDiameter.value - drawStar.starPositionY = starPositionY.value - - // 毛边 - const roughEdge: IRoughEdge = drawConfigs.roughEdge - roughEdge.drawRoughEdge = shouldDrawRoughEdge.value - roughEdge.roughEdgeWidth = roughEdgeWidth.value - roughEdge.roughEdgeHeight = roughEdgeHeight.value - roughEdge.roughEdgeProbability = roughEdgeProbability.value - roughEdge.roughEdgeShift = roughEdgeShift.value - roughEdge.roughEdgePoints = roughEdgePoints.value - - // 内圈圆 - const innerCircle: IInnerCircle = drawConfigs.innerCircle - innerCircle.drawInnerCircle = drawInnerCircle.value - innerCircle.innerCircleLineWidth = innerCircleLineWidth.value - innerCircle.innerCircleLineRadiusX = innerCircleWidth.value - innerCircle.innerCircleLineRadiusY = innerCircleHeight.value - - // 外部细圈 - const outThinCircle: IInnerCircle = drawConfigs.outThinCircle - outThinCircle.drawInnerCircle = drawOutThinCircle.value - outThinCircle.innerCircleLineWidth = outThinCircleLineWidth.value - outThinCircle.innerCircleLineRadiusX = outThinCircleWidth.value - outThinCircle.innerCircleLineRadiusY = outThinCircleHeight.value - - // 更新印章类型列表 - drawConfigs.stampTypeList = stampTypeList.value - - // 更新公司列表 - drawConfigs.companyList = companyList.value - // 更新内圈列表 - drawConfigs.innerCircleList = innerCircleList.value - // 更新图片列表 - drawConfigs.imageList = imageList.value - - // 外圈圆形边 - const outBorder: IInnerCircle = drawConfigs.outBorder - outBorder.drawInnerCircle = drawOutBorder.value - outBorder.innerCircleLineWidth = outBorderLineWidth.value - - drawStamp() -} - // 取消保存 const cancelSave = () => { showLegalDialog.value = false @@ -593,105 +175,6 @@ const confirmSave = () => { drawStampUtils.saveStampAsPNG() } -const restoreDrawConfigs = () => { - const drawConfigs = drawStampUtils.getDrawConfigs() - - // 做旧效果 - applyAging.value = drawConfigs.agingEffect.applyAging - agingIntensity.value = drawConfigs.agingEffect.agingIntensity - manualAging.value = drawConfigs.openManualAging - - // 防伪纹路 - securityPatternEnabled.value = drawConfigs.securityPattern.openSecurityPattern - securityPatternCount.value = drawConfigs.securityPattern.securityPatternCount - securityPatternWidth.value = drawConfigs.securityPattern.securityPatternWidth - securityPatternLength.value = drawConfigs.securityPattern.securityPatternLength - - // 毛边效果 - shouldDrawRoughEdge.value = drawConfigs.roughEdge.drawRoughEdge - roughEdgeWidth.value = drawConfigs.roughEdge.roughEdgeWidth - roughEdgeHeight.value = drawConfigs.roughEdge.roughEdgeHeight - roughEdgeProbability.value = drawConfigs.roughEdge.roughEdgeProbability - roughEdgeShift.value = drawConfigs.roughEdge.roughEdgeShift - roughEdgePoints.value = drawConfigs.roughEdge.roughEdgePoints - - // 印章基本设置 - drawStampWidth.value = drawConfigs.width - drawStampHeight.value = drawConfigs.height - circleBorderWidth.value = drawConfigs.borderWidth - primaryColor.value = drawConfigs.primaryColor - - // 公司名称 - companyName.value = drawConfigs.company.companyName - companyFontSizeMM.value = drawConfigs.company.fontHeight - companyNameCompression.value = drawConfigs.company.compression - textDistributionFactor.value = drawConfigs.company.textDistributionFactor - textMarginMM.value = drawConfigs.company.borderOffset - companyList.value = drawConfigs.companyList - - // 印章编码 - const stampCodeConfig: ICode = drawConfigs.stampCode - stampCode.value = stampCodeConfig.code - codeFontSizeMM.value = stampCodeConfig.fontHeight - codeFontWidthMM.value = stampCodeConfig.fontWidth - codeDistributionFactor.value = stampCodeConfig.textDistributionFactor - codeMarginMM.value = stampCodeConfig.borderOffset - codeFontFamily.value = stampCodeConfig.fontFamily - codeFontWeight.value = stampCodeConfig.fontWeight - codeCompression.value = stampCodeConfig.compression - - // 税号 - const taxNumber: ITaxNumber = drawConfigs.taxNumber - taxNumberValue.value = taxNumber.code - taxNumberCompression.value = taxNumber.compression - taxNumberLetterSpacing.value = taxNumber.letterSpacing - taxNumberPositionY.value = taxNumber.positionY - taxNumberFontFamily.value = taxNumber.fontFamily - taxNumberFontWeight.value = taxNumber.fontWeight - - // 印章类型 - const stampTypeConfig: IStampType = drawConfigs.stampType - bottomText.value = stampTypeConfig.stampType - bottomTextFontSizeMM.value = stampTypeConfig.fontHeight - bottomTextFontWidthMM.value = stampTypeConfig.fontWidth - bottomTextLetterSpacing.value = stampTypeConfig.letterSpacing - bottomTextPositionY.value = stampTypeConfig.positionY - bottomTextFontFamily.value = stampTypeConfig.fontFamily - bottomTextFontWeight.value = stampTypeConfig.fontWeight - bottomTextCompression.value = stampTypeConfig.compression - bottomTextLineSpacing.value = stampTypeConfig.lineSpacing - stampTypeList.value = drawConfigs.stampTypeList - - // 五角星/图片配置 - shouldDrawStar.value = drawConfigs.drawStar.drawStar - useStarImage.value = drawConfigs.drawStar.useImage - starImageWidth.value = drawConfigs.drawStar.imageWidth - starImageHeight.value = drawConfigs.drawStar.imageHeight - keepAspectRatio.value = drawConfigs.drawStar.keepAspectRatio - starDiameter.value = drawConfigs.drawStar.starDiameter - starPositionY.value = drawConfigs.drawStar.starPositionY - - // 内圈圆形 - drawInnerCircle.value = drawConfigs.innerCircle.drawInnerCircle - innerCircleLineWidth.value = drawConfigs.innerCircle.innerCircleLineWidth - innerCircleWidth.value = drawConfigs.innerCircle.innerCircleLineRadiusX - innerCircleHeight.value = drawConfigs.innerCircle.innerCircleLineRadiusY - innerCircleList.value = drawConfigs.innerCircleList - - // 外部细圈 - drawOutThinCircle.value = drawConfigs.outThinCircle.drawInnerCircle - outThinCircleLineWidth.value = drawConfigs.outThinCircle.innerCircleLineWidth - outThinCircleWidth.value = drawConfigs.outThinCircle.innerCircleLineRadiusX - outThinCircleHeight.value = drawConfigs.outThinCircle.innerCircleLineRadiusY - - // 图片列表 - imageList.value = drawConfigs.imageList || [] - - // 外圈圆形边 - drawOutBorder.value = drawConfigs.outBorder.drawInnerCircle - outBorderLineWidth.value = drawConfigs.outBorder.innerCircleLineWidth -} - // 添加系统字体列表 const systemFonts = ref([]) @@ -704,7 +187,6 @@ const loadSystemFonts = async () => { onMounted(async () => { initDrawStampUtils() await loadSystemFonts() - restoreDrawConfigs() drawStamp() // 初始化所有字体选择器的预览 @@ -716,91 +198,6 @@ onMounted(async () => { isDrawStampUtilsReady.value = true }) -// 监听所有响应式数据的变化 -watch( - [ - companyName, - companyFontFamily, - stampCode, - companyFontSizeMM, - codeFontSizeMM, - circleRadius, - circleBorderWidth, - primaryColor, - starDiameter, - codeDistributionFactor, - textDistributionFactor, - textMarginMM, - codeMarginMM, - agingIntensity, - bottomText, - bottomTextFontFamily, - bottomTextFontSizeMM, - bottomTextLetterSpacing, - bottomTextPositionY, - taxNumberValue, - applyAging, - agingIntensity, - companyNameCompression, - bottomTextCompression, - codeCompression, - bottomTextLetterSpacing, - securityPatternColor, - securityPatternDensity, - securityPatternColor, - securityPatternEnabled, - securityPatternCount, - securityPatternLength, - securityPatternWidth, - drawStampWidth, - drawStampHeight, - shouldDrawStar, - starPositionY, - taxNumberCompression, - taxNumberFontFamily, - taxNumberLetterSpacing, - taxNumberPositionY, - starDiameter, - drawInnerCircle, - innerCircleLineWidth, - innerCircleWidth, - innerCircleHeight, - outThinCircleLineWidth, - outThinCircleWidth, - outThinCircleHeight, - drawOutThinCircle, - manualAging, - shouldDrawRoughEdge, - roughEdgeWidth, - roughEdgeHeight, - roughEdgeProbability, - roughEdgeShift, - roughEdgePoints, - companyNameFontWeight, - bottomTextFontWeight, - codeFontWeight, - codeFontFamily, - taxNumberFontWeight, - adjustEllipseText, - adjustEllipseTextFactor, - bottomTextLineSpacing, - stampTypeList, - companyList, - useStarImage, - starImageWidth, - starImageHeight, - keepAspectRatio, - innerCircleList, - imageList, - drawOutBorder, - outBorderLineWidth, - ], - () => { - updateDrawConfigs() - }, - { deep: true } -) - // 添加新的类型定义 interface StampTypePreset { id: string; @@ -954,8 +351,6 @@ const loadDefaultTemplate = (template: Template) => { console.log("load template", template, newConfig) // 设置新的配置 drawStampUtils.setDrawConfigs(newConfig) - // 恢复界面显示 - restoreDrawConfigs() // 刷新印章显示 drawStamp() // 更新当前选中的模板索引(使用负数表示默认模板) diff --git a/src/EditorControls.vue b/src/EditorControls.vue index c571e80..a97ff99 100644 --- a/src/EditorControls.vue +++ b/src/EditorControls.vue @@ -607,13 +607,13 @@ const editorControls = ref(null) + // 将drawStampUtils作为props传递给EditorControls const props = defineProps<{ drawStampUtils: DrawStampUtils }>() - + // 更新drawStampUtils,更新绘制印章 const emit = defineEmits(['updateDrawStamp']) - const isCircleDetect = ref(true) // 添加响应式数据