Merge pull request #30 from haruyan-hopemucci/feature/movable_ltgm_te…

…xt_position LGTMの描画位置を上段、中段、下段から選べるようにした
haruyan-hopemucci · Dec 6, 2023 · 4b2495f · 4b2495f
2 parents 3b9b1ce + f4bae7a
commit 4b2495f
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 5 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -19,7 +19,7 @@
 
 <body>
   <main class="container">
-    <h1>LGTN Generator <small>v0.4.0</small></h1>
+    <h1>LGTN Generator <small>v0.5.0</small></h1>
     <div id="paste-area">
       <div id="paste-area-message">
         クリップボードにコピーした画像をペーストしてください。
@@ -35,6 +35,21 @@ <h1>LGTN Generator <small>v0.4.0</small></h1>
         <label class="form-check-label" for="inlineRadio2">LGTN画像を生成</label>
       </div>
     </div>
+    <div>
+      <div class="form-check">
+        <input class="form-check-input" type="radio" name="textPosition" id="textPositionTop" value="top" />
+        <label class="form-check-label" for="textPositionTop">テキスト位置：上</label>
+      </div>
+      <div class="form-check">
+        <input class="form-check-input" type="radio" name="textPosition" id="textPositionMiddle" value="middle"
+          checked />
+        <label class="form-check-label" for="textPositionMiddle">テキスト位置：中</label>
+      </div>
+      <div class="form-check">
+        <input class="form-check-input" type="radio" name="textPosition" id="textPositionBottom" value="bottom" />
+        <label class="form-check-label" for="textPositionBottom">テキスト位置：下</label>
+      </div>
+    </div>
     <img id="pasted-image" hidden />
     <img id="img__LGTM" src="./img/lgtm.png" hidden />
     <img id="img__LGTN" src="./img/lgtn.png" hidden />

diff --git a/docs/js/app.js b/docs/js/app.js
@@ -1,18 +1,24 @@
 "use strict";
 
+const textPositionOffset = {
+  top: [0, -100],
+  middle: [0, 0],
+  bottom: [0, 120],
+}
+
 $(function () {
   var gCanvas = document.querySelector("canvas#output-image");
   var gPastedImage = document.querySelector("img#pasted-image");
   const selectedOverlayImageValue = () =>
     document.querySelector('input[name="chooseOverlay"]:checked').value;
   const getOverlayImage = () => document.querySelector(`img#img__${selectedOverlayImageValue()}`);
-
+  const getTextPosition = () => document.querySelector('input[name="textPosition"]:checked').value
   const setMessage = (message) => {
     const elem = document.querySelector("#paste-area-message");
     elem.textContent = message;
   };
 
-  $('input[name="chooseOverlay"]').on("change", (event) => {
+  $('input[name="chooseOverlay"], input[name="textPosition"]').on("change", (event) => {
     if (gPastedImage.src) {
       setMessage(`${selectedOverlayImageValue()}画像を再生成しています...`);
       redrawLgtnImage();
@@ -90,10 +96,12 @@ $(function () {
       drawWidth = (imgWidth * drawHeight) / imgHeight;
       drawX = (canvas.width - drawWidth) / 2;
     }
-
+
+    // テキスト描画位置の決定
+    const [drawTextX, drawTextY] = textPositionOffset[getTextPosition()]
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.drawImage(imgEl, drawX, drawY, drawWidth, drawHeight);
-    context.drawImage(lgtnEl, 0, 0, canvas.width, canvas.height);
+    context.drawImage(lgtnEl, drawTextX, drawTextY, canvas.width, canvas.height);
     copyImageToClipboard(canvas);
   };