☰

Drawaria Fast Color Flow+

Adds advanced controls for Drawaria, including Fast Color Flow, avatar boundary control, brushcursor restrictions, auto-drawing, and more.

질문, 리뷰하거나, 이 스크립트를 신고하세요. 
  1. // ==UserScript==
  2. // @name         Drawaria Fast Color Flow+
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Adds advanced controls for Drawaria, including Fast Color Flow, avatar boundary control, brushcursor restrictions, auto-drawing, and more.
  6. // @author       YouTube
  7. // @match        https://drawaria.online/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=drawaria.online
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. (function () {
  14.     'use strict';
  15.  
  16.     // 1. Ajustar el máximo de "Flujo de color" a 200
  17.     const colorFlowInput = document.querySelector('input[data-localprop="colorflow"]');
  18.     if (colorFlowInput) {
  19.         colorFlowInput.setAttribute('max', '200');
  20.     }
  21.  
  22.     // 2. Deshacer/Rehacer
  23.     const undoStack = [];
  24.     const redoStack = [];
  25.  
  26.     const canvas = document.getElementById('canvas');
  27.     const ctx = canvas.getContext('2d');
  28.  
  29.     // Crear botones y agregarlos al menú
  30.     const undoButton = document.createElement('button');
  31.     undoButton.innerText = 'Undo';
  32.     undoButton.id = 'undo-button';
  33.  
  34.     const redoButton = document.createElement('button');
  35.     redoButton.innerText = 'Redo';
  36.     redoButton.id = 'redo-button';
  37.  
  38.     const exportButton = document.createElement('button');
  39.     exportButton.innerText = 'Export Canvas';
  40.     exportButton.id = 'export-button';
  41.  
  42.     // Agregar botones al menú
  43.     const menu = document.querySelector('.drawcontrols-settingscontainer');
  44.     menu.appendChild(undoButton);
  45.     menu.appendChild(redoButton);
  46.     menu.appendChild(exportButton);
  47.  
  48.     // Funcionalidad de Deshacer/Rehacer
  49.     undoButton.addEventListener('click', () => {
  50.         if (undoStack.length > 0) {
  51.             const lastAction = undoStack.pop();
  52.             redoStack.push(lastAction);
  53.             ctx.putImageData(lastAction, 0, 0);
  54.         }
  55.     });
  56.  
  57.     redoButton.addEventListener('click', () => {
  58.         if (redoStack.length > 0) {
  59.             const lastAction = redoStack.pop();
  60.             undoStack.push(lastAction);
  61.             ctx.putImageData(lastAction, 0, 0);
  62.         }
  63.     });
  64.  
  65.     canvas.addEventListener('mouseup', () => {
  66.         undoStack.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
  67.         redoStack.length = 0; // Clear redo stack after new action
  68.     });
  69.  
  70.     // Funcionalidad de Exportar Lienzo
  71.     exportButton.addEventListener('click', () => {
  72.         const link = document.createElement('a');
  73.         link.download = 'canvas.png';
  74.         link.href = canvas.toDataURL('image/png');
  75.         link.click();
  76.     });
  77.  
  78.     // 3. Dibujo automático: cargar una imagen y dibujarla en el canvas
  79.     const autoDrawSection = document.createElement('div');
  80.     autoDrawSection.innerHTML = `
  81.         <div class="drawcontrols-settingstab">
  82.             <label for="auto-draw-image">Auto-draw from image:</label>
  83.             <input type="file" id="auto-draw-image" accept="image/*">
  84.             <button id="start-auto-draw">Start Auto-draw</button>
  85.         </div>
  86.     `;
  87.     menu.appendChild(autoDrawSection);
  88.  
  89.     document.getElementById('start-auto-draw').addEventListener('click', function () {
  90.         const fileInput = document.getElementById('auto-draw-image');
  91.         if (fileInput.files.length > 0) {
  92.             const file = fileInput.files[0];
  93.             const reader = new FileReader();
  94.             reader.onload = function (e) {
  95.                 const img = new Image();
  96.                 img.src = e.target.result;
  97.                 img.onload = function () {
  98.                     ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  99.                 };
  100.             };
  101.             reader.readAsDataURL(file);
  102.         }
  103.     });
  104.  
  105.     // 4. Agregar submenús, botones, rangos y selectores para personalización
  106.     const customizationSection = document.createElement('div');
  107.     customizationSection.innerHTML = `
  108.         <div class="drawcontrols-settingstab">
  109.             <label for="brush-size-selector">Brush Size:</label>
  110.             <select id="brush-size-selector" data-localprop="brushSize">
  111.                 <option value="1">Small</option>
  112.                 <option value="2">Medium</option>
  113.                 <option value="3">Large</option>
  114.             </select>
  115.         </div>
  116.         <div class="drawcontrols-settingstab">
  117.             <label for="opacity-range">Opacity:</label>
  118.             <input type="range" id="opacity-range" min="0" max="1" step="0.1" data-localprop="opacity">
  119.         </div>
  120.     `;
  121.     menu.appendChild(customizationSection);
  122.  
  123.     document.getElementById('brush-size-selector').addEventListener('change', function () {
  124.         const brushSize = this.value;
  125.         // Aquí puedes ajustar el tamaño del pincel en el canvas
  126.         console.log(`Brush size set to: ${brushSize}`);
  127.     });
  128.  
  129.     document.getElementById('opacity-range').addEventListener('input', function () {
  130.         const opacity = this.value;
  131.         // Aquí puedes ajustar la opacidad del pincel en el canvas
  132.         console.log(`Opacity set to: ${opacity}`);
  133.     });
  134.  
  135.     // Estilos adicionales para mejorar la apariencia
  136.     const style = document.createElement('style');
  137.     style.innerHTML = `
  138.         .drawcontrols-settingscontainer {
  139.             background: linear-gradient(135deg, #ffeb3b, #fbc02d);
  140.             border-radius: 10px;
  141.             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  142.             padding: 10px;
  143.             animation: fadeIn 0.5s ease-in-out;
  144.         }
  145.         .drawcontrols-settingstab {
  146.             margin-bottom: 10px;
  147.         }
  148.         .drawcontrols-settingstab label {
  149.             font-weight: bold;
  150.             margin-right: 10px;
  151.             color: #333;
  152.         }
  153.         .drawcontrols-settingstab input[type="range"] {
  154.             width: 100%;
  155.         }
  156.         .drawcontrols-settingstab select {
  157.             width: 100%;
  158.             padding: 5px;
  159.             border-radius: 5px;
  160.             border: 1px solid #ccc;
  161.         }
  162.         #undo-button, #redo-button, #export-button, #start-auto-draw {
  163.             background: linear-gradient(135deg, #ff80ab, #ff4081);
  164.             color: #fff;
  165.             border: none;
  166.             border-radius: 5px;
  167.             padding: 10px;
  168.             margin: 5px 0;
  169.             cursor: pointer;
  170.             transition: transform 0.2s ease, box-shadow 0.2s ease;
  171.         }
  172.         #undo-button:hover, #redo-button:hover, #export-button:hover, #start-auto-draw:hover {
  173.             transform: scale(1.05);
  174.             box-shadow: 0 0 10px rgba(255, 64, 129, 0.5);
  175.         }
  176.         @keyframes fadeIn {
  177.             from { opacity: 0; }
  178.             to { opacity: 1; }
  179.         }
  180.     `;
  181.     document.head.appendChild(style);
  182. })();