Skip to content

Commit

Permalink
feat: 增加公司名称字体鼠标的识别
Browse files Browse the repository at this point in the history
  • Loading branch information
xxss0903 committed Feb 7, 2025
1 parent a40ae3d commit e0514d6
Show file tree
Hide file tree
Showing 3 changed files with 115 additions and 3 deletions.
4 changes: 2 additions & 2 deletions src/DrawStampUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export class DrawStampUtils {
// 离屏的canvas
private offscreenCanvas: HTMLCanvasElement
// 主canvas
private canvas: HTMLCanvasElement
public canvas: HTMLCanvasElement
// 印章偏移量
private stampOffsetX: number = 0
private stampOffsetY: number = 0
Expand All @@ -49,7 +49,7 @@ export class DrawStampUtils {
// 绘制svg的工具类
private drawSvgUtils: DrawSvgUtils
// 绘制公司的工具类
private drawCompanyUtils: DrawCompanyUtils
public drawCompanyUtils: DrawCompanyUtils
// 绘制标尺的工具类
private drawRulerUtils: DrawRulerUtils
// 绘制防伪纹路的工具类
Expand Down
61 changes: 60 additions & 1 deletion src/EditorControls.vue
Original file line number Diff line number Diff line change
Expand Up @@ -595,9 +595,12 @@
</div>
</div>
</div>
<div class="tooltip" v-if="showTooltip" :style="tooltipStyle">
{{ tooltipText }}
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { ref, onMounted, watch, computed, onUnmounted } from 'vue'
import {DrawStampUtils} from './DrawStampUtils'
import { getSystemFonts } from './utils/fontUtils'
import { ICode, ICompany, IDrawImage, IDrawStampConfig, IDrawStar, IInnerCircle, IRoughEdge, ISecurityPattern, IStampType, ITaxNumber } from './DrawStampTypes'
Expand Down Expand Up @@ -1208,6 +1211,7 @@
updateFontPreview({ target: element } as unknown as Event);
}
});
window.addEventListener('mousemove', handleMouseMove)
})
// 监听所有响应式数据的变化
Expand Down Expand Up @@ -1417,7 +1421,62 @@
watch(showSecurityWarning, (newValue) => {
localStorage.setItem('showSecurityWarning', String(newValue))
})
// 添加提示相关的响应式数据
const showTooltip = ref(false)
const tooltipText = ref('')
const tooltipStyle = ref({
left: '0px',
top: '0px'
})
// 添加鼠标移动检测
const handleMouseMove = (event: MouseEvent) => {
const canvas = props.drawStampUtils.canvas
if (!canvas) return
const rect = canvas.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
// 获取文字路径
const textPaths = props.drawStampUtils.drawCompanyUtils.getTextPaths()
// 检查是否悬停在文字上
for (const textPath of textPaths) {
if (x >= textPath.bounds.x &&
x <= textPath.bounds.x + textPath.bounds.width &&
y >= textPath.bounds.y &&
y <= textPath.bounds.y + textPath.bounds.height) {
showTooltip.value = true
tooltipText.value = textPath.text
tooltipStyle.value = {
left: `${event.clientX + 10}px`,
top: `${event.clientY + 10}px`
}
return
}
}
showTooltip.value = false
}
// 在组件卸载时移除事件监听
onUnmounted(() => {
window.removeEventListener('mousemove', handleMouseMove)
})
</script>
<style scoped>
.tooltip {
position: fixed;
background-color: rgba(0, 0, 0, 0.8);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 14px;
pointer-events: none;
z-index: 1000;
}
</style>

53 changes: 53 additions & 0 deletions src/utils/DrawCompanyUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,31 @@ import { ICompany } from "../DrawStampTypes"

export class DrawCompanyUtils {
private mmToPixel = 10
// 添加存储文字路径的数组
private textPaths: Array<{
text: string,
path: Path2D,
bounds: {
x: number,
y: number,
width: number,
height: number
}
}> = []

constructor(mmToPixel: number) {
this.mmToPixel = mmToPixel
this.textPaths = []
}

// 添加获取文字路径的方法
getTextPaths() {
return this.textPaths
}

// 清除文字路径
clearTextPaths() {
this.textPaths = []
}

// 添加绘制公司列表的方法
Expand Down Expand Up @@ -40,6 +62,7 @@ export class DrawCompanyUtils {
radiusY: number,
color: string
) {
this.clearTextPaths()
const fontSize = company.fontHeight * this.mmToPixel
const fontWeight = company.fontWeight || 'normal'
ctx.save()
Expand Down Expand Up @@ -91,6 +114,21 @@ export class DrawCompanyUtils {
// 根据旋转方向调整文字旋转角度
ctx.rotate(angle + (company.rotateDirection === 'clockwise' ? -Math.PI/2 : Math.PI/2))
ctx.scale(company.compression, 1)

// 创建文字路径
const path = new Path2D()
path.rect(-fontSize/2, -fontSize, fontSize, fontSize)
this.textPaths.push({
text: char,
path: path,
bounds: {
x: x - fontSize/2,
y: y - fontSize,
width: fontSize,
height: fontSize
}
})

ctx.fillText(char, 0, 0)
ctx.restore()
})
Expand All @@ -106,6 +144,21 @@ export class DrawCompanyUtils {
ctx.translate(x, y)
ctx.rotate(angle + (company.rotateDirection === 'clockwise' ? -Math.PI/2 : Math.PI/2))
ctx.scale(company.compression, 1)

// 创建文字路径
const path = new Path2D()
path.rect(-fontSize/2, -fontSize, fontSize, fontSize)
this.textPaths.push({
text: char,
path: path,
bounds: {
x: x - fontSize/2,
y: y - fontSize,
width: fontSize,
height: fontSize
}
})

ctx.fillText(char, 0, 0)
ctx.restore()
})
Expand Down

0 comments on commit e0514d6

Please sign in to comment.