404

D7net
:/ var / www / html / novonote /
Filename : testeimagemJSversao3.php
back
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Gerador de Imagem</title>
  <style>
    #canvasWrapper { position: relative; display: inline-block; }
    body { font-family: Arial, sans-serif; padding: 20px; }
    .linha-campos { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
    .campo-inline { display: flex; align-items: center; gap: 6px; }
    input[type="text"], input[type="number"], select { padding: 4px 6px; width: 110px; }
    .preview { display: inline-block; background: #f4f4f4; padding: 6px 10px; border: 1px solid #ccc; }
    canvas { display: block; }
  </style>
</head>
<body>
  <h1>Gerador de Imagem com Meia-Esquadria nos 4 Cantos</h1>

  <form id="formImagem">
    <div class="linha-campos">
      <div class="campo-inline">
        <label for="cor">Cor (hex):</label>
        <input type="text" id="cor" value="#4169e1" required>
      </div>
      <div class="campo-inline">
        <label for="largura">Largura:</label>
        <input type="number" id="largura" value="440" min="50" required>
      </div>
      <div class="campo-inline">
        <label for="altura">Espessura:</label>
        <input type="number" id="altura" value="22" min="6" required>
      </div>
    </div>

    <div class="linha-campos">
      <div class="campo-inline">
        <label for="saiaEsq">Saia à esquerda</label>
        <input type="checkbox" id="saiaEsq">
      </div>
      <div class="campo-inline">
        <label for="saiaDir">Saia à direita</label>
        <input type="checkbox" id="saiaDir">
      </div>
      <div class="campo-inline">
        <label for="meiaesquad">Meia-esquadria (4 cantos)</label>
        <input type="checkbox" id="meiaesquad" checked>
      </div>
    </div>

    <div class="linha-campos">
      <div class="campo-inline">
        <label for="tpo_duplo">Tampo duplo</label>
        <input type="checkbox" id="tpo_duplo">
      </div>
    </div>
  </form>

  <div class="preview">
    <h4>Pré-visualização</h4>
    <div id="canvasWrapper">
      <canvas id="canvasPreview"></canvas>
    </div>
  </div>

  <script>
    const num = (id, min, def) => {
      const v = Number(document.getElementById(id).value);
      return Number.isFinite(v) ? Math.max(min, v) : def;
    };

    function hexToRgb(hex){
      let h = hex.trim().replace(/^#/, '').toLowerCase();
      if (/^[0-9a-f]{3}$/.test(h)) h = h.split('').map(c => c+c).join('');
      if (!/^[0-9a-f]{6}$/.test(h)) return [65,105,225]; // fallback royalblue
      return [parseInt(h.slice(0,2),16), parseInt(h.slice(2,4),16), parseInt(h.slice(4,6),16)];
    }

    function gerar(){
      const largura  = num('largura', 50, 440);   // comprimento do retângulo
      const t        = num('altura',  6, 22);     // espessura (offset da meia-esquadria)
      const meia     = document.getElementById('meiaesquad').checked;
      const saiaEsq  = document.getElementById('saiaEsq').checked;
      const saiaDir  = document.getElementById('saiaDir').checked;
      const tpo2     = document.getElementById('tpo_duplo').checked;
      const [r,g,b]  = hexToRgb(document.getElementById('cor').value);
      const cor      = `rgb(${r},${g},${b})`;
      const esp      = 3;                         // linewidth

      // geometria
      const margem   = 60;                        // margem visual
      const alturaExterna = 210;                  // altura externa da moldura
      const larguraExterna = largura;
      const leftX = margem, rightX = margem + larguraExterna;
      const topY  = margem,  bottomY = margem + alturaExterna;

      // canvas
      const canvas = document.getElementById('canvasPreview');
      canvas.width  = rightX + margem;
      canvas.height = bottomY + margem + (tpo2 ? alturaExterna + 40 : 0);
      const ctx = canvas.getContext('2d');

      // estilo
      ctx.fillStyle = '#fff'; ctx.fillRect(0,0,canvas.width,canvas.height);
      ctx.strokeStyle = cor; ctx.lineWidth = esp; ctx.lineJoin = 'miter'; ctx.lineCap = 'butt';

      // função que desenha UMA moldura com 4 cantos em meia-esquadria
      function moldura(offsetY = 0){
        const yTop = topY + offsetY;
        const yBot = bottomY + offsetY;

        if (meia){
          // TOP (entre cantos)
          ctx.beginPath();
          ctx.moveTo(leftX + t, yTop);
          ctx.lineTo(rightX - t, yTop);
          ctx.stroke();
          // TOP inner
          ctx.beginPath();
          ctx.moveTo(rightX - t, yTop + t);
          ctx.lineTo(leftX + t, yTop + t);
          ctx.stroke();

          // BOTTOM (entre cantos)
          ctx.beginPath();
          ctx.moveTo(leftX + t, yBot);
          ctx.lineTo(rightX - t, yBot);
          ctx.stroke();
          // BOTTOM inner
          ctx.beginPath();
          ctx.moveTo(rightX - t, yBot - t);
          ctx.lineTo(leftX + t, yBot - t);
          ctx.stroke();

          // LEFT (entre cantos)
          ctx.beginPath();
          ctx.moveTo(leftX, yTop + t);
          ctx.lineTo(leftX, yBot - t);
          ctx.stroke();
          // LEFT inner
          ctx.beginPath();
          ctx.moveTo(leftX + t, yBot - t);
          ctx.lineTo(leftX + t, yTop + t);
          ctx.stroke();

          // RIGHT (entre cantos)
          ctx.beginPath();
          ctx.moveTo(rightX, yTop + t);
          ctx.lineTo(rightX, yBot - t);
          ctx.stroke();
          // RIGHT inner
          ctx.beginPath();
          ctx.moveTo(rightX - t, yBot - t);
          ctx.lineTo(rightX - t, yTop + t);
          ctx.stroke();

          // --- Diagonais (1 por canto) ---
          // TL
          ctx.beginPath(); ctx.moveTo(leftX, yTop); ctx.lineTo(leftX + t, yTop + t); ctx.stroke();
          // TR
          ctx.beginPath(); ctx.moveTo(rightX, yTop); ctx.lineTo(rightX - t, yTop + t); ctx.stroke();
          // BL
          ctx.beginPath(); ctx.moveTo(leftX, yBot); ctx.lineTo(leftX + t, yBot - t); ctx.stroke();
          // BR
          ctx.beginPath(); ctx.moveTo(rightX, yBot); ctx.lineTo(rightX - t, yBot - t); ctx.stroke();

          // --- Risquinhos de fechamento (2 por canto) ---
          // TL
          ctx.beginPath(); ctx.moveTo(leftX, yTop); ctx.lineTo(leftX + t, yTop); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(leftX, yTop); ctx.lineTo(leftX, yTop + t); ctx.stroke();
          // TR
          ctx.beginPath(); ctx.moveTo(rightX - t, yTop); ctx.lineTo(rightX, yTop); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(rightX, yTop); ctx.lineTo(rightX, yTop + t); ctx.stroke();
          // BL
          ctx.beginPath(); ctx.moveTo(leftX, yBot - t); ctx.lineTo(leftX, yBot); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(leftX, yBot); ctx.lineTo(leftX + t, yBot); ctx.stroke();
          // BR
          ctx.beginPath(); ctx.moveTo(rightX, yBot - t); ctx.lineTo(rightX, yBot); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(rightX - t, yBot); ctx.lineTo(rightX, yBot); ctx.stroke();
        } else {
          // sem meia-esquadria: retângulo externo simples + interno simples
          ctx.strokeRect(leftX, yTop,  larguraExterna, alturaExterna);
          ctx.strokeRect(leftX + t, yTop + t, larguraExterna - 2*t, alturaExterna - 2*t);
        }

        // --- Saia esquerda/direita (opcional), começam na linha interna do topo ---
        const ySaiaTop = yTop + t;
        const ySaiaBot = yBot - t;

        if (saiaEsq){
          // linha interna já existe (leftX + t); só as externas + base
          ctx.beginPath(); ctx.moveTo(leftX, ySaiaTop); ctx.lineTo(leftX, ySaiaBot); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(leftX, ySaiaBot); ctx.lineTo(leftX + t, ySaiaBot); ctx.stroke();
        }
        if (saiaDir){
          ctx.beginPath(); ctx.moveTo(rightX, ySaiaTop); ctx.lineTo(rightX, ySaiaBot); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(rightX - t, ySaiaBot); ctx.lineTo(rightX, ySaiaBot); ctx.stroke();
        }
      }

      // moldura de cima
      moldura(0);

      // tampo duplo: repete mais abaixo
      if (tpo2){
        const gap = Math.max(40, t + Math.floor(largura/10)); // espaçamento ilustrativo
        moldura(alturaExterna + gap);
      }
    }

    // render ao carregar e a cada mudança
    ['cor','largura','altura','saiaEsq','saiaDir','meiaesquad','tpo_duplo']
      .forEach(id => document.getElementById(id).addEventListener('input', gerar));
    window.addEventListener('load', gerar);
  </script>
</body>
</html>