feat: hollow

1 year ago · 82a9370ae7
parent 539e3070fb
commit 82a9370ae7
6 changed files with 47 additions and 14 deletions
--- a/.gitignore
+++ b/.gitignore
@ -23,4 +23,7 @@ dist-ssr
 *.sln
 *.sw?

-public
+/fonts
+public/fonts/*/*
+public/*.*
+!public/fonts/RoGSans/font.css
--- a/index.html
+++ b/index.html
@ -12,7 +12,7 @@

 <body>
  <header>
-    <h1 class="i18n mt-20 mb-16 text-center" data-i18n="title">BlueArchive-Style Logo Generater</h1>
+    <h1 class="i18n mt-24 mb-20 text-center font-bold" data-i18n="title">BlueArchive-Style Logo Generater</h1>
  </header>
  <section class="canvas-wrapper flex place-content-center">
    <div class="relative">
@ -38,12 +38,12 @@
          Background</span>
      </label>
    </div>
-    <div class="mx-6 my-2">
+    <div class="mx-6 my-4">
      <div class="collapse collapse-arrow bg-base-100">
        <input type="checkbox" />
        <div class="i18n collapse-title font-medium" data-i18n="advance">Advance settings</div>
        <div class="collapse-content">
-          <div class="i18n" data-i18n="halo-cross">Halo & Cross adjust</div>
+          <div class="i18n" data-i18n="halo-cross">Halo & Cross position</div>
          <div class="flex justify-evenly my-4">
            <span class="flex-1"><span class="mr-2">X</span><input type="number" placeholder="Type here" value="-18"
                class="input input-bordered input-sm input-primary w-32 mr-2" id="graphX" /></span>
--- a/src/canvas.ts
+++ b/src/canvas.ts
@ -1,8 +1,16 @@
 import debounce from 'lodash-es/debounce';
 import settings from './settings';
 import loadFont from './utils/loadFont';
-const { canvasHeight, canvasWidth, fontSize, horizontalTilt, textBaseLine, graphOffset, paddingX } =
-  settings;
+const {
+  canvasHeight,
+  canvasWidth,
+  fontSize,
+  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`;

 export default class LogoCanvas {
@ -67,7 +75,7 @@ export default class LogoCanvas {
    c.resetTransform(); //restore don't work
    c.drawImage(
      window.halo,
-      this.canvasWidthL - canvasHeight / 2 + this.graphOffset.X,
+      this.canvasWidthL - this.canvas.height / 2 + this.graphOffset.X,
      this.graphOffset.Y,
      canvasHeight,
      canvasHeight
@ -75,18 +83,34 @@ export default class LogoCanvas {
    c.fillStyle = '#2B2B2B';
    c.textAlign = 'start';
    if (this.transparentBg) {
-      c.strokeStyle = '#0000';
-    } else {
-      c.strokeStyle = 'white';
+      c.globalCompositeOperation = 'destination-out';
    }
+    c.strokeStyle = 'white';
    c.lineWidth = 12;
    c.setTransform(1, 0, horizontalTilt, 1, 0, 0);
    c.strokeText(this.textR, this.canvasWidthL, this.canvas.height * textBaseLine);
+    c.globalCompositeOperation = 'source-over';
    c.fillText(this.textR, this.canvasWidthL, this.canvas.height * textBaseLine);
    c.resetTransform();
+    const graph = {
+      X: this.canvasWidthL - this.canvas.height / 2 + graphOffset.X,
+      Y: this.graphOffset.Y,
+    };
+    c.beginPath();
+    c.moveTo(graph.X + hollowPath[0][0] / 2, graph.Y + hollowPath[0][1] / 2);
+    c.lineTo(graph.X + hollowPath[1][0] / 2, graph.Y + hollowPath[1][1] / 2);
+    c.lineTo(graph.X + hollowPath[2][0] / 2, graph.Y + hollowPath[2][1] / 2);
+    c.lineTo(graph.X + hollowPath[3][0] / 2, graph.Y + hollowPath[3][1] / 2);
+    c.closePath();
+    if (this.transparentBg) {
+      c.globalCompositeOperation = 'destination-out';
+    }
+    c.fillStyle = 'white';
+    c.fill();
+    c.globalCompositeOperation = 'source-over';
    c.drawImage(
      window.cross,
-      this.canvasWidthL - canvasHeight / 2 + graphOffset.X,
+      this.canvasWidthL - this.canvas.height / 2 + graphOffset.X,
      this.graphOffset.Y,
      canvasHeight,
      canvasHeight
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -5,7 +5,7 @@
  "copy-success": "Image copied",
  "transparent-background": "Transparent Background",
  "advance": "Advance settings",
-  "halo-cross": "Halo & Cross adjust",
+  "halo-cross": "Halo & Cross position",
  "font-title": "Used Fonts",
  "main-font": "Main font: ",
  "fallback-font": "Fallback font: ",
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@ -1,5 +1,5 @@
 {
-  "title": "碧蓝档案风 logo 生成器",
+  "title": "碧蓝档案标题生成器",
  "save": "保存",
  "copy": "复制",
  "copy-success": "图片已成功复制",
--- a/src/settings.ts
+++ b/src/settings.ts
@ -1,9 +1,15 @@
 export default {
  canvasHeight: 250,
  canvasWidth: 900,
-  fontSize: 85,
+  fontSize: 84,
  textBaseLine: 0.68,
  horizontalTilt: -0.4,
  paddingX: 10,
  graphOffset: { X: -18, Y: 0 },
+  hollowPath: [
+    [280, 134],
+    [327, 155],
+    [161, 412],
+    [146, 401],
+  ],
 };