Skip to content

Commit e92ac71

Browse files
xxss0903xxss0903
committed
fix: 修改恢复印章数据
1 parent 0fabc3b commit e92ac71

File tree

2 files changed

+41
-38
lines changed

2 files changed

+41
-38
lines changed

‎src/DrawStampUtils.ts‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -155,6 +155,7 @@ export class DrawStampUtils {
155155
// 设置绘制印章的配置，比如可以保存某些印章的配置，然后保存之后直接设置绘制，更加方便
156156
setDrawConfigs(drawConfigs: IDrawStampConfig) {
157157
this.drawStampConfigs = drawConfigs
158+
158159
}
159160

160161
private addCanvasListener() {
@@ -242,7 +243,7 @@ export class DrawStampUtils {
242243
if (this.drawStampConfigs.openManualAging) {
243244
return
244245
}
245-
246+
246247
if (this.isDragging) {
247248
const newOffsetX = (event.clientX - this.dragStartPos.x) / this.mmToPixel
248249
const newOffsetY = (event.clientY - this.dragStartPos.y) / this.mmToPixel
@@ -278,30 +279,30 @@ export class DrawStampUtils {
278279
if (image.imageUrl) {
279280
// 检查缓存中是否已有该图片
280281
let img = this.imageCache.get(image.imageUrl);
281-
282+
282283
if (img) {
283284
this.drawSingleImage(ctx, img, image, centerX, centerY);
284285
} else {
285286
try {
286287
// 创建一个新的图片对象
287288
const tempImg = new Image();
288289
tempImg.src = image.imageUrl;
289-
290+
290291
// 等待图片加载完成
291292
await new Promise((resolve, reject) => {
292293
tempImg.onload = resolve;
293294
tempImg.onerror = reject;
294295
});
295-
296+
296297
// 将图片转换为 ImageBitmap
297298
const bitmap = await createImageBitmap(tempImg);
298-
299+
299300
// 存入缓存
300301
this.imageCache.set(image.imageUrl, bitmap);
301-
302+
302303
// 绘制图片
303304
this.drawSingleImage(ctx, bitmap, image, centerX, centerY);
304-
305+
305306
requestAnimationFrame(() => {
306307
this.refreshStamp();
307308
});
@@ -324,18 +325,18 @@ export class DrawStampUtils {
324325
// 计算绘制尺寸
325326
let width = imageConfig.imageWidth * this.mmToPixel;
326327
let height = imageConfig.imageHeight * this.mmToPixel;
327-
328+
328329
if (imageConfig.keepAspectRatio) {
329330
// 如果需要保持宽高比，计算缩放比例
330331
const scale = Math.min(width / img.width, height / img.height);
331332
width = img.width * scale;
332333
height = img.height * scale;
333334
}
334-
335+
335336
// 计算绘制位置（考虑偏移）
336337
const x = centerX - width / 2 + imageConfig.positionX * this.mmToPixel;
337338
const y = centerY - height / 2 + imageConfig.positionY * this.mmToPixel;
338-
339+
339340
ctx.save();
340341
ctx.drawImage(img, x, y, width, height);
341342
ctx.restore();
@@ -730,7 +731,7 @@ export class DrawStampUtils {
730731
this.canvasCtx.translate(this.offsetX, this.offsetY);
731732
this.canvasCtx.scale(this.scale, this.scale);
732733

733-
734+
734735
// 设置起始点为距离左边和上边 5mm 的位置
735736
const startX = (this.drawStampConfigs.width / 2) * 10 + RULER_WIDTH * this.mmToPixel;
736737
const startY = (this.drawStampConfigs.height / 2) * 10 + RULER_HEIGHT * this.mmToPixel;

‎src/DrawStampUtilsDemo.vue‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818

1919
<div class="container" :class="{ 'has-warning': showSecurityWarning }">
2020
<!-- 修改法律免责说明 -->
21-
<div class="legal-disclaimer"
21+
<div class="legal-disclaimer"
2222
v-if="showSecurityWarning"
2323
:class="{ 'hidden': !showSecurityWarning }">
2424
<div class="disclaimer-content">
@@ -35,7 +35,7 @@
3535
</div>
3636
<EditorControls
3737
v-if="isDrawStampUtilsReady"
38-
ref="editorControls"
38+
ref="editorControlsRef"
3939
:drawStampUtils="drawStampUtils"
4040
@updateDrawStamp="updateDrawStamp"
4141
/>
@@ -59,7 +59,7 @@
5959
<span class="button-icon">🔍</span>
6060
{{ t('stamp.extract.tool') }}
6161
</button>
62-
62+
6363
<!-- 添加拖动开关 -->
6464
<div class="drag-switch-container">
6565
<span class="drag-label">{{ t('stamp.drag.label') }}</span>
@@ -72,7 +72,7 @@
7272
</div>
7373
<!-- 右侧工具栏 -->
7474
<div class="right-toolbar">
75-
75+
7676
</div>
7777
<!-- 使用模板弹窗组件 -->
7878
<TemplateDialog
@@ -101,7 +101,7 @@ const { t } = useI18n()
101101
// 添加一个标志来控制 EditorControls 的加载
102102
const isDrawStampUtilsReady = ref(false)
103103
104-
const editorControls = ref<InstanceType<typeof EditorControls> | null>(null)
104+
const editorControlsRef = ref<InstanceType<typeof EditorControls> | null>(null)
105105
const stampCanvas = ref<any | null>(null)
106106
const MM_PER_PIXEL = 10 // 毫米换算像素
107107
@@ -127,10 +127,10 @@ const initDrawStampUtils = () => {
127127
const drawStamp = (refreshSecurityPattern: boolean = false, refreshOld: boolean = false, refreshRoughEdge: boolean = false) => {
128128
// 使用drawstamputils进行绘制
129129
drawStampUtils.refreshStamp(refreshSecurityPattern, refreshOld, refreshRoughEdge)
130-
130+
131131
// 确保拖动设置与当前状态一致
132132
drawStampUtils.setDraggable(isDraggable.value)
133-
133+
134134
// 更新文字路径
135135
companyTextPaths = drawStampUtils.drawCompanyUtils.getTextPaths()
136136
codeTextPaths = drawStampUtils.drawCodeUtils.getTextPaths()
@@ -168,13 +168,13 @@ const loadSystemFonts = async () => {
168168
onMounted(async () => {
169169
initDrawStampUtils()
170170
await loadSystemFonts()
171-
171+
172172
// 设置初始拖动状态
173173
drawStampUtils.setDraggable(isDraggable.value)
174174
if (stampCanvas.value) {
175175
stampCanvas.value.style.cursor = isDraggable.value ? 'move' : 'default'
176176
}
177-
177+
178178
drawStamp()
179179
// 加载模板列表，这里是预览的模板列表
180180
loadTemplatesFromStorage()
@@ -327,11 +327,11 @@ const saveCurrentAsTemplate = async () => {
327327
localStorage.setItem('stampTemplates', JSON.stringify(templateList.value))
328328
}
329329
330-
// 加载模板
330+
// 加载模板，从模板弹窗选中模板，需要将模板的值设置到左边设置里面
331331
const loadSelectedTemplate = (template: Template) => {
332332
try {
333333
isDrawStampUtilsReady.value = false
334-
334+
// 绘制印章
335335
drawStampUtils = new DrawStampUtils(stampCanvas.value, MM_PER_PIXEL)
336336
drawStamp()
337337
// 初始化所有字体选择器的预览
@@ -344,7 +344,7 @@ const loadSelectedTemplate = (template: Template) => {
344344
window.addEventListener('mousemove', handleMouseMove)
345345
drawStampUtils?.canvas?.addEventListener('click', handleCanvasClick)
346346
347-
347+
// 将选中的config进行设置
348348
const newConfig = JSON.parse(JSON.stringify(template.config)) as IDrawStampConfig
349349
newConfig.ruler.showRuler = true
350350
newConfig.ruler.showFullRuler = true
@@ -360,8 +360,10 @@ const loadSelectedTemplate = (template: Template) => {
360360
// drawStampUtils.refreshStamp()
361361
setTimeout(() => {
362362
isDrawStampUtilsReady.value = true
363+
console.log("refresh editor controls")
364+
editorControlsRef.value.restoreDrawConfigs()
363365
}, 100)
364-
366+
365367
// 更新当前选中的模板索引（使用负数表示默认模板）
366368
currentTemplateIndex.value = -1 - defaultTemplates.findIndex(t => t === template)
367369
} catch (error) {
@@ -413,7 +415,7 @@ const loadTemplatesFromStorage = () => {
413415
// 设置模板配置
414416
tempDrawStampUtils.setDrawConfigs(template.config)
415417
tempDrawStampUtils.refreshStamp()
416-
418+
417419
// 生成预览图
418420
template.preview = tempCanvas.toDataURL('image/png')
419421
})
@@ -437,11 +439,11 @@ const handleMouseMove = (event: MouseEvent) => {
437439
// 检查是否悬停在文字上
438440
let isOverText = false
439441
for (const textPath of allTextPaths) {
440-
if (x >= textPath.bounds.x &&
442+
if (x >= textPath.bounds.x &&
441443
x <= textPath.bounds.x + textPath.bounds.width &&
442-
y >= textPath.bounds.y &&
444+
y >= textPath.bounds.y &&
443445
y <= textPath.bounds.y + textPath.bounds.height) {
444-
446+
445447
isOverText = true
446448
showTooltip.value = true
447449
tooltipStyle.value = {
@@ -454,7 +456,7 @@ const handleMouseMove = (event: MouseEvent) => {
454456
return
455457
}
456458
}
457-
459+
458460
if (!isOverText) {
459461
showTooltip.value = false
460462
drawStampUtils.canvas.style.cursor = 'default'
@@ -468,14 +470,14 @@ const handleCanvasClick = (event: MouseEvent) => {
468470
const rect = drawStampUtils.canvas.getBoundingClientRect()
469471
const x = event.clientX - rect.left
470472
const y = event.clientY - rect.top
471-
473+
472474
// 检查点击的文字
473475
for (const textPath of allTextPaths) {
474-
if (x >= textPath.bounds.x &&
476+
if (x >= textPath.bounds.x &&
475477
x <= textPath.bounds.x + textPath.bounds.width &&
476-
y >= textPath.bounds.y &&
478+
y >= textPath.bounds.y &&
477479
y <= textPath.bounds.y + textPath.bounds.height) {
478-
480+
479481
// 打印文字信息
480482
console.log('点击的文字:', textPath.text)
481483
console.log('文字路径:', textPath.path)
@@ -486,29 +488,29 @@ const handleCanvasClick = (event: MouseEvent) => {
486488
if (textPath.type === 'company') {
487489
const companyIndex = findCompanyIndexByText(textPath.text)
488490
if (companyIndex !== -1) {
489-
const editorControlsRef = editorControls.value
491+
const editorControlsRef = editorControlsRef.value
490492
if (editorControlsRef) {
491493
editorControlsRef.scrollToCompanyText(companyIndex)
492494
}
493495
}
494496
} else if (textPath.type === 'code') {
495497
// 点击编码文字时，展开编码设置组
496-
const editorControlsRef = editorControls.value
498+
const editorControlsRef = editorControlsRef.value
497499
if (editorControlsRef) {
498500
editorControlsRef.scrollToCode()
499501
}
500502
} else if (textPath.type === 'stampType') {
501503
// 点击印章类型文字时，展开印章类型设置组
502504
const stampTypeIndex = findStampTypeIndexByText(textPath.text)
503505
if (stampTypeIndex !== -1) {
504-
const editorControlsRef = editorControls.value
506+
const editorControlsRef = editorControlsRef.value
505507
if (editorControlsRef) {
506508
editorControlsRef.scrollToStampType(stampTypeIndex)
507509
}
508510
}
509511
} else if (textPath.type === 'taxNumber') {
510512
// 点击税号文字时，展开税号设置组
511-
const editorControlsRef = editorControls.value
513+
const editorControlsRef = editorControlsRef.value
512514
if (editorControlsRef) {
513515
editorControlsRef.scrollToTaxNumber()
514516
}
@@ -537,7 +539,7 @@ watch(isDraggable, (newValue) => {
537539
if (drawStampUtils) {
538540
// 更新 drawStampUtils 中的拖动状态
539541
drawStampUtils.setDraggable(newValue)
540-
542+
541543
// 更新鼠标样式
542544
if (stampCanvas.value) {
543545
stampCanvas.value.style.cursor = newValue ? 'move' : 'default'

0 commit comments

Comments
 (0)
⚡