ストロークの太さと色変更に対応
Browse files- index.html +50 -18
index.html
CHANGED
@@ -129,7 +129,7 @@
|
|
129 |
}
|
130 |
|
131 |
#result {
|
132 |
-
background:
|
133 |
text-align: center;
|
134 |
}
|
135 |
|
@@ -154,7 +154,7 @@
|
|
154 |
}
|
155 |
|
156 |
.watermark {
|
157 |
-
-webkit-text-stroke: 1px
|
158 |
paint-order: stroke fill;
|
159 |
color: rgba(255, 255, 255, 0.8);
|
160 |
}
|
@@ -164,12 +164,13 @@
|
|
164 |
font-family: "Noto Sans JP";
|
165 |
}
|
166 |
</style>
|
167 |
-
<style id="text-
|
168 |
-
#mainMassage input
|
169 |
-
|
170 |
-
text-shadow: 1px -0px 0 rgba(0, 0, 0, 0.8), 1px 0px 0 rgba(0, 0, 0, 0.8), 1px 1px 0 rgba(0, 0, 0, 0.8), 0px 1px 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8), -1px 0px 0 rgba(0, 0, 0, 0.8), -1px -1px 0 rgba(0, 0, 0, 0.8);
|
171 |
}
|
172 |
</style>
|
|
|
|
|
173 |
<link href="https://getbootstrap.jp/docs/5.0/examples/sticky-footer-navbar/sticky-footer-navbar.css"
|
174 |
rel="stylesheet">
|
175 |
</head>
|
@@ -183,7 +184,8 @@
|
|
183 |
<div class="row">
|
184 |
<div class="col-lg-7 p-0 m-0 relative" id="edit">
|
185 |
<div id="emptySpace" class="row p-0 m-0">
|
186 |
-
<p class="watermark text-end">Gal-Game UI Editor<br>https://huggingface.co/spaces/SenY/GalGameUI
|
|
|
187 |
</div>
|
188 |
<div id="messageWindow" class="row">
|
189 |
<div class="col-12 p-0 m-0 h-100">
|
@@ -259,7 +261,7 @@
|
|
259 |
</div>
|
260 |
</div>
|
261 |
<div class="col-lg-5 text-light bg-dark bg-gradient" id="controller">
|
262 |
-
<
|
263 |
<div class="input-group">
|
264 |
<button id="render" type="button" class="btn btn-success">Render</button>
|
265 |
</div>
|
@@ -309,9 +311,9 @@
|
|
309 |
</div>
|
310 |
<div class="input-group">
|
311 |
<button id="textShadowToggleA" type="button" class="btn btn-primary">Text-Stroke
|
312 |
-
(For preview)</button>
|
313 |
-
<button id="textShadowToggleB" type="button" class="btn btn-primary opacity-50">Text-Stroke
|
314 |
(Recommended)</button>
|
|
|
|
|
315 |
<div class="vr"></div>
|
316 |
<button id="userInterfaceToggle" type="button"
|
317 |
class="btn btn-primary opacity-50">Fake-UI</button>
|
@@ -325,6 +327,14 @@
|
|
325 |
<input name="mainMessagePaddingSize" type="range" class="form-control form-range"
|
326 |
id="mainMessagePaddingSize" value="0" step="0.1" min="0" max="2">
|
327 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
328 |
<div class="input-group">
|
329 |
<button id="waterMarkToggle" type="button" class="btn btn-warning">WaterMark</button>
|
330 |
</div>
|
@@ -389,17 +399,17 @@
|
|
389 |
<li>Text-Stroke</li>
|
390 |
<li>
|
391 |
<ul>
|
392 |
-
<li>
|
393 |
<li>
|
394 |
<ul>
|
395 |
-
<li
|
|
|
396 |
</ul>
|
397 |
</li>
|
398 |
-
<li>
|
399 |
<li>
|
400 |
<ul>
|
401 |
-
<li
|
402 |
-
</li>
|
403 |
</ul>
|
404 |
</li>
|
405 |
</ul>
|
@@ -635,25 +645,47 @@
|
|
635 |
document.documentElement.style.setProperty('--messageWindowSize', this.value + "%");
|
636 |
createEditor();
|
637 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
638 |
document.getElementById("textShadowToggleA").addEventListener("click", function () {
|
639 |
document.getElementById("textShadowToggleB").classList.add("opacity-50");
|
640 |
this.classList.toggle("opacity-50");
|
641 |
if (this.classList.contains("opacity-50")) {
|
642 |
document.getElementById("text-shadow").textContent = "";
|
|
|
643 |
} else {
|
644 |
-
|
645 |
}
|
646 |
});
|
647 |
document.getElementById("textShadowToggleB").addEventListener("click", function () {
|
648 |
document.getElementById("textShadowToggleA").classList.add("opacity-50");
|
649 |
this.classList.toggle("opacity-50");
|
650 |
-
let strokeSize = Math.ceil(document.querySelector("#left input").style.fontSize.replace("px", "") / 20);
|
651 |
if (this.classList.contains("opacity-50")) {
|
652 |
document.getElementById("text-shadow").textContent = "";
|
|
|
653 |
} else {
|
654 |
-
|
655 |
}
|
656 |
});
|
|
|
657 |
document.getElementById("userInterfaceToggle").addEventListener("click", function () {
|
658 |
this.classList.toggle("opacity-50");
|
659 |
if (!this.classList.contains("opacity-50")) {
|
|
|
129 |
}
|
130 |
|
131 |
#result {
|
132 |
+
background: rgb(0, 0, 0);
|
133 |
text-align: center;
|
134 |
}
|
135 |
|
|
|
154 |
}
|
155 |
|
156 |
.watermark {
|
157 |
+
-webkit-text-stroke: 1px rgb(0, 0, 0);
|
158 |
paint-order: stroke fill;
|
159 |
color: rgba(255, 255, 255, 0.8);
|
160 |
}
|
|
|
164 |
font-family: "Noto Sans JP";
|
165 |
}
|
166 |
</style>
|
167 |
+
<style id="text-shadowPreview">
|
168 |
+
#mainMassage input {
|
169 |
+
text-shadow: 1px -0px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 0px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0);
|
|
|
170 |
}
|
171 |
</style>
|
172 |
+
<style id="text-shadow">
|
173 |
+
</style>
|
174 |
<link href="https://getbootstrap.jp/docs/5.0/examples/sticky-footer-navbar/sticky-footer-navbar.css"
|
175 |
rel="stylesheet">
|
176 |
</head>
|
|
|
184 |
<div class="row">
|
185 |
<div class="col-lg-7 p-0 m-0 relative" id="edit">
|
186 |
<div id="emptySpace" class="row p-0 m-0">
|
187 |
+
<p class="watermark text-end">Gal-Game UI Editor<br>https://huggingface.co/spaces/SenY/GalGameUI
|
188 |
+
</p>
|
189 |
</div>
|
190 |
<div id="messageWindow" class="row">
|
191 |
<div class="col-12 p-0 m-0 h-100">
|
|
|
261 |
</div>
|
262 |
</div>
|
263 |
<div class="col-lg-5 text-light bg-dark bg-gradient" id="controller">
|
264 |
+
<h6><u>All images are processed on your browser. No data are sent to any servers.</u></h6>
|
265 |
<div class="input-group">
|
266 |
<button id="render" type="button" class="btn btn-success">Render</button>
|
267 |
</div>
|
|
|
311 |
</div>
|
312 |
<div class="input-group">
|
313 |
<button id="textShadowToggleA" type="button" class="btn btn-primary">Text-Stroke
|
|
|
|
|
314 |
(Recommended)</button>
|
315 |
+
<button id="textShadowToggleB" type="button" class="btn btn-primary opacity-50">Text-Stroke
|
316 |
+
(Shadow)</button>
|
317 |
<div class="vr"></div>
|
318 |
<button id="userInterfaceToggle" type="button"
|
319 |
class="btn btn-primary opacity-50">Fake-UI</button>
|
|
|
327 |
<input name="mainMessagePaddingSize" type="range" class="form-control form-range"
|
328 |
id="mainMessagePaddingSize" value="0" step="0.1" min="0" max="2">
|
329 |
</div>
|
330 |
+
<div class="input-group">
|
331 |
+
<span class="input-group-text bg-secondary text-light">StrokeColor</span>
|
332 |
+
<input name="strokeColor" type="color" class="form-control form-control-color" id="strokeColor"
|
333 |
+
value="#000000">
|
334 |
+
<span class="input-group-text bg-secondary text-light">StrokeWeight</span>
|
335 |
+
<input name="strokeWeight" type="range" class="form-control form-range" id="strokeWeight"
|
336 |
+
value="0.05" step="0.01" min="0.01" max="0.2">
|
337 |
+
</div>
|
338 |
<div class="input-group">
|
339 |
<button id="waterMarkToggle" type="button" class="btn btn-warning">WaterMark</button>
|
340 |
</div>
|
|
|
399 |
<li>Text-Stroke</li>
|
400 |
<li>
|
401 |
<ul>
|
402 |
+
<li>Recommended</li>
|
403 |
<li>
|
404 |
<ul>
|
405 |
+
<li>-webkit-text-strokeをフォントサイズの5%で設定したもの。大抵の場合実際のレンダリングではこちらのほうが綺麗に出るがプレビューでは表示がおかしくなる。
|
406 |
+
</li>
|
407 |
</ul>
|
408 |
</li>
|
409 |
+
<li>Shadow</li>
|
410 |
<li>
|
411 |
<ul>
|
412 |
+
<li>text-shadowで8方向に1pxずつ置いてレンダリングしたもの。webkit意外の場合など</li>
|
|
|
413 |
</ul>
|
414 |
</li>
|
415 |
</ul>
|
|
|
645 |
document.documentElement.style.setProperty('--messageWindowSize', this.value + "%");
|
646 |
createEditor();
|
647 |
});
|
648 |
+
const setStroke = function (mode) {
|
649 |
+
let strokeSize = Math.ceil(document.querySelector("#left input").style.fontSize.replace("px", "") * document.getElementById("strokeWeight").value);
|
650 |
+
let strokeColor = hex2rgb(document.getElementById("strokeColor").value);
|
651 |
+
let css = '.shadow-text {-webkit-text-stroke: ' + strokeSize + 'px rgb(0, 0, 0) ;paint-order: stroke fill;}'.replaceAll('rgb(0, 0, 0)', 'rgb('+strokeColor+')');
|
652 |
+
let css2 = '#mainMassage input {text-shadow: 1px -0px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 0px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0);}'.replaceAll('rgb(0, 0, 0)', 'rgb('+strokeColor+')');
|
653 |
+
document.getElementById("text-shadow").textContent = css;
|
654 |
+
document.getElementById("text-shadowPreview").textContent = css2;
|
655 |
+
if(mode == "b"){
|
656 |
+
document.getElementById("text-shadow").textContent = '.shadow-text {text-shadow: 1px -0px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 0px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0);}'.replaceAll('rgb(0, 0, 0)', 'rgb('+strokeColor+')');
|
657 |
+
document.getElementById("text-shadowPreview").textContent = '#mainMassage input {text-shadow: 1px -0px 0 rgb(0, 0, 0), 1px 0px 0 rgb(0, 0, 0), 1px 1px 0 rgb(0, 0, 0), 0px 1px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0), -1px 0px 0 rgb(0, 0, 0), -1px -1px 0 rgb(0, 0, 0);}'.replaceAll('rgb(0, 0, 0)', 'rgb('+strokeColor+')');
|
658 |
+
}
|
659 |
+
}
|
660 |
+
setStroke();
|
661 |
+
document.getElementById("strokeWeight").addEventListener("change", function () {
|
662 |
+
setStroke();
|
663 |
+
});
|
664 |
+
document.getElementById("strokeColor").addEventListener("change", function () {
|
665 |
+
setStroke();
|
666 |
+
});
|
667 |
+
|
668 |
document.getElementById("textShadowToggleA").addEventListener("click", function () {
|
669 |
document.getElementById("textShadowToggleB").classList.add("opacity-50");
|
670 |
this.classList.toggle("opacity-50");
|
671 |
if (this.classList.contains("opacity-50")) {
|
672 |
document.getElementById("text-shadow").textContent = "";
|
673 |
+
document.getElementById("text-shadowPreview").textContent = "";
|
674 |
} else {
|
675 |
+
setStroke();
|
676 |
}
|
677 |
});
|
678 |
document.getElementById("textShadowToggleB").addEventListener("click", function () {
|
679 |
document.getElementById("textShadowToggleA").classList.add("opacity-50");
|
680 |
this.classList.toggle("opacity-50");
|
|
|
681 |
if (this.classList.contains("opacity-50")) {
|
682 |
document.getElementById("text-shadow").textContent = "";
|
683 |
+
document.getElementById("text-shadowPreview").textContent = "";
|
684 |
} else {
|
685 |
+
setStroke("b");
|
686 |
}
|
687 |
});
|
688 |
+
|
689 |
document.getElementById("userInterfaceToggle").addEventListener("click", function () {
|
690 |
this.classList.toggle("opacity-50");
|
691 |
if (!this.classList.contains("opacity-50")) {
|