diff --git a/index.html b/index.html index b170d96..17ebf71 100644 --- a/index.html +++ b/index.html @@ -56,7 +56,7 @@ Save Copy - + diff --git a/src/canvas.ts b/src/canvas.ts index cfe8d32..5397495 100644 --- a/src/canvas.ts +++ b/src/canvas.ts @@ -31,6 +31,7 @@ export default class LogoCanvas { this.ctx = this.canvas.getContext('2d')!; this.canvas.height = canvasHeight; this.canvas.width = canvasWidth; + this.bindEvent(); } async draw() { const loading = document.querySelector('#loading')!; @@ -55,15 +56,15 @@ export default class LogoCanvas { c.strokeStyle = '#00cccc'; c.lineWidth = 1; c.beginPath(); - c.moveTo(this.canvas.width / 2, 0); - c.lineTo(this.canvas.width / 2, this.canvas.height); + c.moveTo(this.canvasWidthL, 0); + c.lineTo(this.canvasWidthL, this.canvas.height); c.stroke(); console.log(this.textMetricsL.width, this.textMetricsR.width); console.log(this.textWidthL, this.textWidthR); - c.moveTo(this.canvas.width / 2 - this.textWidthL, 0); - c.lineTo(this.canvas.width / 2 - this.textWidthL, this.canvas.height); - c.moveTo(this.canvas.width / 2 + this.textWidthR, 0); - c.lineTo(this.canvas.width / 2 + this.textWidthR, this.canvas.height); + c.moveTo(this.canvasWidthL - this.textWidthL, 0); + c.lineTo(this.canvasWidthL - this.textWidthL, this.canvas.height); + c.moveTo(this.canvasWidthL + this.textWidthR, 0); + c.lineTo(this.canvasWidthL + this.textWidthR, this.canvas.height); c.stroke(); } //blue text -> halo -> black text -> cross @@ -178,15 +179,15 @@ export default class LogoCanvas { this.canvas.width = this.canvasWidthL + this.canvasWidthR; } generateImg() { + let outputCanvas: HTMLCanvasElement; if ( this.textWidthL + paddingX < canvasWidth / 2 || this.textWidthR + paddingX < canvasWidth / 2 ) { - const imgCanvas = new OffscreenCanvas( - this.textWidthL + this.textWidthR + paddingX * 2, - this.canvas.height - ); - const ctx = imgCanvas.getContext('2d')!; + outputCanvas = document.createElement('canvas'); + outputCanvas.width = this.textWidthL + this.textWidthR + paddingX * 2; + outputCanvas.height = this.canvas.height; + const ctx = outputCanvas.getContext('2d')!; ctx.drawImage( this.canvas, canvasWidth / 2 - this.textWidthL - paddingX, @@ -198,25 +199,25 @@ export default class LogoCanvas { this.textWidthL + this.textWidthR + paddingX * 2, this.canvas.height ); - return imgCanvas.convertToBlob(); } else { - return new Promise((resolve, reject) => { - this.canvas.toBlob((blob) => { - if (blob) { - resolve(blob); - } else { - reject(); - } - }); - }); + outputCanvas = this.canvas; } + return new Promise((resolve, reject) => { + outputCanvas.toBlob((blob) => { + if (blob) { + resolve(blob); + } else { + reject(); + } + }); + }); } saveImg() { this.generateImg().then((blob) => { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; - a.download = `ba-style-logo@nulla.top_${Math.round(new Date().getTime() / 1000)}.png`; + a.download = `${this.textL}${this.textR}_ba-style@nulla.top.png`; a.click(); URL.revokeObjectURL(url); }); diff --git a/src/i18n.ts b/src/i18n.ts index e9c2854..fa5d8bd 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -1,9 +1,9 @@ -import i18next from 'i18next'; +import { init, t } from 'i18next'; import en from './locales/en.json'; import zh from './locales/zh.json'; -const lang = ['zh', 'zh-CN', 'zh-TW'].includes(navigator.language) ? 'zh' : 'en'; -i18next.init({ +const lang = ['zh', 'zh-CN', 'zh-cn'].includes(navigator.language) ? 'zh' : 'en'; +init({ lng: lang, resources: { en: { @@ -17,5 +17,5 @@ i18next.init({ document.querySelectorAll('.i18n').forEach((el) => { const key = el.getAttribute('data-i18n')!; - el.textContent = i18next.t(key); + el.textContent = t(key); }); diff --git a/src/main.ts b/src/main.ts index 98f50ae..8ed45d4 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,9 +4,7 @@ import loadImages from './utils/loadImages'; import './i18n'; (async function () { - // await loadFont(); await loadImages(); const logo = new LogoCanvas(); - logo.bindEvent(); logo.draw(); })(); diff --git a/src/settings.ts b/src/settings.ts index 3da4aeb..c7ff2b6 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -5,11 +5,11 @@ export default { textBaseLine: 0.68, horizontalTilt: -0.4, paddingX: 10, - graphOffset: { X: -18, Y: 0 }, + graphOffset: { X: -15, Y: 0 }, hollowPath: [ - [280, 134], - [327, 155], - [161, 412], - [146, 401], + [284, 136], + [321, 153], + [159, 410], + [148, 403], ], }; diff --git a/vite.config.ts b/vite.config.ts index c7243ac..fbec33f 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -12,9 +12,4 @@ export default defineConfig({ }, }, }, - // resolve: { - // alias: { - // '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'), - // }, - // }, });