add: subtitle

index.html

@@ -49,6 +49,11 @@ <h1 class="i18n mt-24 mb-20 text-center font-bold" data-i18n="heading">BlueArchi
             <span class="flex-1"><span class="mr-2">Y</span><input type="number" placeholder="Type here" value="0"
                 class="input input-bordered input-sm input-primary w-32" id="graphY" /></span>
           </div>
+          <div class="flex items-center gap-2">
+            <div class="i18n" data-i18n="subtitle">Sub Title</div>
+            <input id="subtitle" type="text" placeholder="Type here" value="ブルーアーカイブ"
+              class="input input-bordered input-sm input-primary w-50" />
+          </div>
         </div>
       </div>
     </div>

src/canvas.ts

@@ -5,25 +5,30 @@ const {
   canvasHeight,
   canvasWidth,
   fontSize,
+  subtitleFontSize,
   horizontalTilt,
   textBaseLine,
   graphOffset,
   paddingX,
   hollowPath,
 } = settings;
 const font = `${fontSize}px RoGSanSrfStd-Bd, GlowSansSC-Normal-Heavy_diff, apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif`;
+const subtitleFont = `${subtitleFontSize}px RoGSanSrfStd-Bd, GlowSansSC-Normal-Heavy_diff, apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif`;
 
 export default class LogoCanvas {
   public canvas: HTMLCanvasElement;
   private ctx: CanvasRenderingContext2D;
   public textL = 'Blue';
   public textR = 'Archive';
+  public subtitle = 'ブルーアーカイブ';
   private textMetricsL: TextMetrics | null = null;
   private textMetricsR: TextMetrics | null = null;
+  private textMetricsST: TextMetrics | null = null;
   private canvasWidthL = canvasWidth / 2;
   private canvasWidthR = canvasWidth / 2;
   private textWidthL = 0;
   private textWidthR = 0;
+  private textWidthST = 0;
   private graphOffset = graphOffset;
   private transparentBg = false;
   constructor() {
@@ -38,11 +43,12 @@ export default class LogoCanvas {
     loading.classList.remove('hidden');
     const c = this.ctx;
     //predict canvas width
-    await loadFont(this.textL + this.textR);
+    await loadFont(this.textL + this.textR + this.subtitle);
     loading.classList.add('hidden');
     c.font = font;
     this.textMetricsL = c.measureText(this.textL);
     this.textMetricsR = c.measureText(this.textR);
+    this.textMetricsST = c.measureText(this.subtitle);
     this.setWidth();
     //clear canvas
     c.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -59,8 +65,8 @@ export default class LogoCanvas {
       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);
+      console.log(this.textMetricsL.width, this.textMetricsR.width, this.textMetricsST.width);
+      console.log(this.textWidthL, this.textWidthR, this.textWidthST);
       c.moveTo(this.canvasWidthL - this.textWidthL, 0);
       c.lineTo(this.canvasWidthL - this.textWidthL, this.canvas.height);
       c.moveTo(this.canvasWidthL + this.textWidthR, 0);
@@ -93,6 +99,11 @@ export default class LogoCanvas {
     c.globalCompositeOperation = 'source-over';
     c.fillText(this.textR, this.canvasWidthL, this.canvas.height * textBaseLine);
     c.resetTransform();
+    c.font = subtitleFont;
+    c.setTransform(1, 0, horizontalTilt * 1, 1, 0, 0);
+    c.textAlign = 'end';
+    c.fillText(this.subtitle, this.canvasWidthL + this.textWidthR + subtitleFontSize, this.canvas.height * textBaseLine + subtitleFontSize + 5);
+    c.resetTransform();
     const graph = {
       X: this.canvasWidthL - this.canvas.height / 2 + graphOffset.X,
       Y: this.graphOffset.Y,
@@ -124,12 +135,12 @@ export default class LogoCanvas {
     );
   }
   bindEvent() {
-    const process = (id: 'textL' | 'textR', el: HTMLInputElement) => {
+    const process = (id: 'textL' | 'textR' | 'subtitle', el: HTMLInputElement) => {
       this[id] = el.value;
       this.draw();
     };
-    for (const t of ['textL', 'textR']) {
-      const id = t as 'textL' | 'textR';
+    for (const t of ['textL', 'textR', 'subtitle']) {
+      const id = t as 'textL' | 'textR' | 'subtitle';
       const el = document.getElementById(id)! as HTMLInputElement;
       el.addEventListener('compositionstart', () => el.setAttribute('composing', ''));
       el.addEventListener('compositionend', () => {

src/locales/en.json

@@ -11,5 +11,6 @@
   "main-font": "Main font: ",
   "fallback-font": "Fallback font: ",
   "glow": "Wêlai Glow Sans",
-  "github-repo": "GitHub repo"
+  "github-repo": "GitHub repo",
+  "subtitle": "Subtitle"
 }

src/locales/zh.json

@@ -11,5 +11,6 @@
   "main-font": "主要字体：",
   "fallback-font": "Fallback 字体：",
   "glow": "未来荧黑",
-  "github-repo": "GitHub 仓库"
+  "github-repo": "GitHub 仓库",
+  "subtitle": "副标题"
 }

src/settings.ts

@@ -2,6 +2,7 @@ export default {
   canvasHeight: 250,
   canvasWidth: 900,
   fontSize: 84,
+  subtitleFontSize: 36,
   textBaseLine: 0.68,
   horizontalTilt: -0.4,
   paddingX: 10,