|
@@ -67,8 +67,8 @@ const drawCanvas = () => {
|
|
thirdImg.onload = () => {
|
|
thirdImg.onload = () => {
|
|
// 企业头像
|
|
// 企业头像
|
|
ctx.save()
|
|
ctx.save()
|
|
- const secondImgWidth = 80
|
|
|
|
- const secondImgHeight = 80
|
|
|
|
|
|
+ const secondImgWidth = 120
|
|
|
|
+ const secondImgHeight = 120
|
|
const x = (canvas.width - secondImgWidth) / 2
|
|
const x = (canvas.width - secondImgWidth) / 2
|
|
const y = canvas.height - secondImgHeight - 460
|
|
const y = canvas.height - secondImgHeight - 460
|
|
|
|
|
|
@@ -81,7 +81,7 @@ const drawCanvas = () => {
|
|
// 企业名称
|
|
// 企业名称
|
|
const maxTextWidth = 400
|
|
const maxTextWidth = 400
|
|
const text = props.enterpriseName
|
|
const text = props.enterpriseName
|
|
- const fontStyle = 'bold 18px Arial'
|
|
|
|
|
|
+ const fontStyle = 'bold 24px Arial'
|
|
ctx.font = fontStyle
|
|
ctx.font = fontStyle
|
|
let truncatedText = text
|
|
let truncatedText = text
|
|
while (ctx.measureText(truncatedText + '...').width > maxTextWidth && truncatedText.length > 0) {
|
|
while (ctx.measureText(truncatedText + '...').width > maxTextWidth && truncatedText.length > 0) {
|
|
@@ -97,16 +97,17 @@ const drawCanvas = () => {
|
|
const tagPaddingLeftRight = 20
|
|
const tagPaddingLeftRight = 20
|
|
const tagPaddingTopBottom = 10
|
|
const tagPaddingTopBottom = 10
|
|
const tagRadius = 8
|
|
const tagRadius = 8
|
|
- const tagSpacing = 30
|
|
|
|
- let tagY = textY + tagSpacing
|
|
|
|
- props.positionList.forEach((tag) => {
|
|
|
|
|
|
+ const tagSpacing = 22
|
|
|
|
+ let tagY = textY + tagSpacing + 10
|
|
|
|
+ props.positionList.forEach((tag, index) => {
|
|
let truncatedTag = tag
|
|
let truncatedTag = tag
|
|
while (ctx.measureText(truncatedTag + '...').width > maxTextWidth - 2 * tagPaddingLeftRight && truncatedTag.length > 0) {
|
|
while (ctx.measureText(truncatedTag + '...').width > maxTextWidth - 2 * tagPaddingLeftRight && truncatedTag.length > 0) {
|
|
truncatedTag = truncatedTag.slice(0, -1)
|
|
truncatedTag = truncatedTag.slice(0, -1)
|
|
}
|
|
}
|
|
if (truncatedTag !== tag) truncatedTag += '...'
|
|
if (truncatedTag !== tag) truncatedTag += '...'
|
|
|
|
|
|
- const tagWidth = ctx.measureText(truncatedTag).width + 2 * tagPaddingLeftRight
|
|
|
|
|
|
+ // bug:第一个职位标签多出长度,需-64
|
|
|
|
+ const tagWidth = ctx.measureText(truncatedTag).width + 2 * tagPaddingLeftRight - (index ? 0 : 64)
|
|
const tagX = x + (secondImgWidth - tagWidth) / 2
|
|
const tagX = x + (secondImgWidth - tagWidth) / 2
|
|
|
|
|
|
ctx.fillStyle = '#00B760'
|
|
ctx.fillStyle = '#00B760'
|
|
@@ -123,7 +124,7 @@ const drawCanvas = () => {
|
|
ctx.closePath()
|
|
ctx.closePath()
|
|
ctx.fill()
|
|
ctx.fill()
|
|
|
|
|
|
- ctx.font = '16px Arial'
|
|
|
|
|
|
+ ctx.font = '18px Arial'
|
|
ctx.fillStyle = '#fff'
|
|
ctx.fillStyle = '#fff'
|
|
ctx.fillText(truncatedTag, tagX + tagPaddingLeftRight, tagY + tagPaddingTopBottom + 10)
|
|
ctx.fillText(truncatedTag, tagX + tagPaddingLeftRight, tagY + tagPaddingTopBottom + 10)
|
|
|
|
|