From 2953c1fa38a8e340563d6588bae9c5825f91ea46 Mon Sep 17 00:00:00 2001 From: may Date: Fri, 8 Mar 2024 08:45:11 +0900 Subject: [PATCH] =?UTF-8?q?"js"=20=E3=81=AB=E3=83=95=E3=82=A1=E3=82=A4?= =?UTF-8?q?=E3=83=AB=E3=82=92=E3=82=A2=E3=83=83=E3=83=97=E3=83=AD=E3=83=BC?= =?UTF-8?q?=E3=83=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/.htaccess | 3 + js/draw_new.js | 165 +++++++++++++++++++++++++++++++++++++++++++++++ js/text_color.js | 21 ++++++ 3 files changed, 189 insertions(+) create mode 100644 js/.htaccess create mode 100644 js/draw_new.js create mode 100644 js/text_color.js diff --git a/js/.htaccess b/js/.htaccess new file mode 100644 index 0000000..280a076 --- /dev/null +++ b/js/.htaccess @@ -0,0 +1,3 @@ +ErrorDocument 403 /404.php +order deny,allow +deny from all diff --git a/js/draw_new.js b/js/draw_new.js new file mode 100644 index 0000000..3c8b009 --- /dev/null +++ b/js/draw_new.js @@ -0,0 +1,165 @@ + +//ほとんど理解できない +document.addEventListener('DOMContentLoaded', function(){ + const canvas = document.getElementById('canvas'); + const context = canvas.getContext('2d'); + const colorPicker = document.getElementById('colorPicker'); + const currentColorDisplay = document.getElementById('currentColorDisplay'); + const R = document.getElementById('R'); + const G = document.getElementById('G'); + const B = document.getElementById('B'); + const thicknessSlider = document.getElementById('thicknessSlider'); + const undo_btn = document.getElementById('undo_btn'); + const redo_btn = document.getElementById('redo_btn'); + const clear_btn = document.getElementById('clear_btn'); + const download_btn = document.getElementById('download_btn'); + const eraser_btn = document.getElementById('eraser_btn'); + + let isDrawing = false; + let isErasing = false; + let undoStack = []; + let redoStack = []; + +function initColorPicker(){ + updateColorDisplay(); + R.addEventListener('input', updateColorDisplay); + G.addEventListener('input', updateColorDisplay); + B.addEventListener('input', updateColorDisplay); +} + +function updateColorDisplay(){ + const red = R.value; + const green = G.value; + const blue = B.value; + const color = `rgb(${red},${green},${blue})`; + currentColorDisplay.style.backgroundColor = color; + context.strokeStyle = color; + cv.setAttribute('style', 'color:rgb('+R.value+','+G.value+','+B.value+');'); +} + +function getColorFromPicker(){ + const red = R.value; + const green = G.value; + const blue = B.value; + return `rgb(${red},${green},${blue})`; +} + +function startDrawing(event){ + if (isErasing) { + context.globalCompositeOperation = 'destination-out'; + } else { + context.globalCompositeOperation = 'source-over'; + updateColorDisplay(); + } + isDrawing = true; + context.beginPath(); + context.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop); + +} + +function stopDrawing(){ + isDrawing = false; + context.closePath(); + saveState(); +} + +function draw(event){ + if (!isDrawing) return; + context.lineWidth = thicknessSlider.value; + context.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop); + context.stroke(); + context.beginPath(); + context.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop); +} + +function clearCanvas(){ + context.clearRect(0, 0, canvas.width, canvas.height); + saveState(); +} + +function downloadImage(){ + const dataUrl = canvas.toDataURL('image/png'); + const link = document.createElement('a'); + link.href = dataUrl; + link.download = 'draw.png'; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); +} + +function saveState(){ + undoStack.push(canvas.toDataURL()); + redoStack = []; + updateUndoRedoButtons(); +} + +function updateUndoRedoButtons(){ + undo_btn.disabled = undoStack.length === 0; + redo_btn.disabled = redoStack.length === 0; +} + +function undo(){ + if (undoStack.length > 1){ + redoStack.push(undoStack.pop()); + const img = new Image(); + img.src = undoStack[undoStack.length - 1]; + img.onload = function(){ + context.clearRect(0, 0, canvas.width, canvas.height); + context.drawImage(img, 0, 0); + updateUndoRedoButtons(); + }; + } +} + +function redo(){ + if (redoStack.length > 0){ + undoStack.push(redoStack.pop()); + const img = new Image(); + img.src = undoStack[undoStack.length - 1]; + img.onload = function(){ + context.clearRect(0, 0, canvas.width, canvas.height); + context.drawImage(img, 0, 0); + updateUndoRedoButtons(); + }; + } +} + +function toggleEraser() { + isErasing = !isErasing; + eraser_btn.textContent = isErasing ? 'ペン' : '消しゴム'; +} + +canvas.addEventListener('mousedown', startDrawing); +canvas.addEventListener('mouseup', stopDrawing); +canvas.addEventListener('mouseout', stopDrawing); +canvas.addEventListener('mousemove', draw); +thicknessSlider.addEventListener('input', saveState); +undo_btn.addEventListener('click', undo); +redo_btn.addEventListener('click', redo); +clear_btn.addEventListener('click', clearCanvas); +download_btn.addEventListener('click', downloadImage); +eraser_btn.addEventListener('click', toggleEraser); + +initColorPicker(); + +canvas.addEventListener('touchstart', function (event){ + event.preventDefault(); + startDrawing({ clientX: event.touches[0].clientX, clientY: event.touches[0].clientY }); +}); + +canvas.addEventListener('touchend', function (event){ + event.preventDefault(); + stopDrawing(); +}); + +canvas.addEventListener('touchmove', function (event){ + event.preventDefault(); + draw({clientX:event.touches[0].clientX, clientY: event.touches[0].clientY}); +}); + + context.lineJoin = 'round'; + context.lineCap = 'round'; + context.strokeStyle = getColorFromPicker(); + context.lineWidth = thicknessSlider.value; + saveState(); +}); diff --git a/js/text_color.js b/js/text_color.js new file mode 100644 index 0000000..16a3364 --- /dev/null +++ b/js/text_color.js @@ -0,0 +1,21 @@ + +//これはリアルタイムでメッセージ入力欄の文字色を変更する機能を持ちます +//これを無効にしても何ら問題ありません +function c(){ + var s = document.querySelector('input[name="color"]:checked').value; + document.getElementById('text').setAttribute('class',s); +} +document.getElementById('color_b').addEventListener('click',c); +document.getElementById('color_r').addEventListener('click',c); +document.getElementById('color_v').addEventListener('click',c); +document.getElementById('color_o').addEventListener('click',c); +document.getElementById('color_gr').addEventListener('click',c); +document.getElementById('color_dg').addEventListener('click',c); +document.getElementById('color_bl').addEventListener('click',c); +document.getElementById('color_lz').addEventListener('click',c); +document.getElementById('color_ja').addEventListener('click',c); +document.getElementById('color_p').addEventListener('click',c); +document.getElementById('color_pp').addEventListener('click',c); +document.getElementById('color_wd').addEventListener('click',c); +document.getElementById('color_pn').addEventListener('click',c); +document.getElementById('color_db').addEventListener('click',c);