add pain tool

2022-10-27 16:24:28 +09:00 · 2022-10-27 16:24:28 +09:00 · 656fef9996
commit 656fef9996
parent d801040974
6 changed files with 170 additions and 0 deletions
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -0,0 +1,15 @@
+{
+    // IntelliSense を使用して利用可能な属性を学べます。
+    // 既存の属性の説明をホバーして表示します。
+    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
--- a/index.html
+++ b/index.html
@ -4,11 +4,13 @@
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="main.css">
    <title>Qrhlhplhp's Works</title>
 </head>
 <body>
    <h1>Qrhlhplhp's Works</h1>
    <h2>APPLE PER MAN CALCULATOR</h2><a href="APMC/">Link</a>
    <h2>BACH=DEMO MACHINE</h2><a href="bahdem/">Link</a>
+    <h2>PAIN TOOL</h2><a href="pain/">Link</a>
 </body>
 </html>
--- a/main.css
+++ b/main.css
@ -0,0 +1,7 @@
+h1{
+    color:white;
+    background-color:black;
+}
+h2{
+    color:red;
+}
--- a/pain/index.html
+++ b/pain/index.html
@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title id="title">Pain</title>
+</head>
+<body>
+    <h1 id ="head">This is a PAIN TOOL</h1>
+    <button id="save">Save the picture</button>
+    <input type="color" id="colorele">
+    <input type="range" id ="rangele" min="1" max="500" value="50">
+    <div style="margin-bottom: 5vh; margin-top: 5vh;"><button id="button">T</button></div>
+    <canvas id="canvas" style="width:90vw ; border:5px solid black;"></canvas>
+</body>
+<script src="main.js"></script>
+</html>
--- a/pain/main.js
+++ b/pain/main.js
@ -0,0 +1,128 @@
+const button = document.getElementById("button");
+const canvas = document.getElementById("canvas");
+const title = document.getElementById("title");
+const head = document.getElementById("head");
+const colorele = document.getElementById("colorele");
+const rangele = document.getElementById("rangele");
+const save = document.getElementById("save");
+const ctx = canvas.getContext("2d");
+let power = 1920 / canvas.clientWidth;
+let isDrawing = false;
+let x = 0;
+let y = 0;
+let t =false;
+let color = "#000000";
+let bold = 50;
+let image = new Image();
+
+canvas.width = 1920;
+canvas.height = 1080;
+image.src = "the pain.jpg";
+image.onload = () => {
+    pain();
+}
+
+const start =e => {
+    if(e.type=="mousedown"){
+        x = e.offsetX * power;
+        y = e.offsetY * power;
+    }else{
+        x = fixPosX(e.touches[0].pageX);
+        y = fixPosY(e.touches[0].pageY);
+    }
+    isDrawing = true;
+  };
+const move =  e => {
+    if (isDrawing === true) {
+        if(e.type=="mousemove"){
+            drawLine(ctx, x, y, e.offsetX * power, e.offsetY * power);
+            x = e.offsetX * power;
+            y = e.offsetY * power;
+        }else{
+            e.preventDefault();
+            drawLine(ctx, x, y, fixPosX(e.touches[0].pageX), fixPosY(e.touches[0].pageY));
+            x = fixPosX(e.touches[0].pageX);
+            y = fixPosY(e.touches[0].pageY);
+        }    
+    }
+  };
+const end = e => {
+    if (isDrawing === true) {
+        if(e.type=="mouseup"){
+            drawLine(ctx, x, y, e.offsetX * power, e.offsetY * power);
+        }
+      x = 0;
+      y = 0;
+      isDrawing = false;
+    }
+  };
+
+colorele.addEventListener('change', e => {
+    color = e.target.value;
+});
+
+rangele.addEventListener('change', e => {
+    bold = e.target.value;
+});
+
+save.addEventListener("click",()=>{
+    let element = document.createElement('a');
+    element.href = canvas.toDataURL('image/png');
+    element.download = title.innerText + '.png';
+    element.target = '_blank';
+    element.click();
+});
+
+button.addEventListener('click',()=>{
+    if(!t){
+        canvas.addEventListener('mousedown', start);
+        canvas.addEventListener('touchstart', start);
+        canvas.addEventListener('mousemove', move);
+        canvas.addEventListener('touchmove', move);
+        window.addEventListener('mouseup', end);
+        window.addEventListener('touchend', end);
+        window.addEventListener('touchcancel', end);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        title.innerText = "Paint";
+        head.innerText = "This is a PAINT TOOL";
+        t = true;
+    }else{
+        canvas.removeEventListener('mousedown', start);
+        canvas.removeEventListener('touchstart', start);
+        canvas.removeEventListener('mousemove', move);
+        canvas.removeEventListener('touchmove', move);
+        window.removeEventListener('mouseup', end);
+        window.removeEventListener('touchend', end);
+        window.removeEventListener('touchcancel', end);
+        pain();
+        title.innerText = "Pain"
+        head.innerText = "This is a PAIN TOOL"
+        t = false;
+    }
+} );
+
+  window.onresize = () =>{
+    power = 1920 / canvas.clientWidth;
+  };
+  
+function drawLine(context, x1, y1, x2, y2) {
+    context.beginPath();
+    context.strokeStyle = color;
+    context.lineWidth = bold;
+    context.moveTo(x1, y1);
+    context.lineTo(x2, y2);
+    context.stroke();
+    context.closePath();
+}
+  
+function fixPosX(posX){
+    const bcr = canvas.getBoundingClientRect();
+    return (posX - bcr.left - window.pageXOffset) * power;
+}
+function fixPosY(posY){
+    const bcr = canvas.getBoundingClientRect();
+    return (posY - bcr.top - window.pageYOffset) * power;
+}
+function pain(){
+    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+}
--- a/pain.jpg
+++ b/pain.jpg