404

D7net
:/ var / www / html / novonote /
Filename : testeimagemJSro.php
back
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8" />
  <title>Gerador de Imagem</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    .linha-campos { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin-bottom: 15px; }
    .campo-inline { display: flex; align-items: center; gap: 5px; }
    .campo-inline label { white-space: nowrap; }
    input[type="text"], input[type="number"], select { padding: 4px 6px; width: 110px; }
    .preview { display: inline-block; background: #f4f4f4; padding: 4px 8px; border: 1px solid #ccc; }
    canvas { display: block; }
  </style>
</head>
<body>
  <h1>Gerador de Imagem com Saia e Frontões - JS</h1>

  <form id="formImagem">
    <!-- Linha 1: cor, largura, altura -->
    <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="200" min="5" required />
      </div>
      <div class="campo-inline">
        <label for="altura">Altura:</label>
        <input type="number" id="altura" value="13" min="5" required />
      </div>
    </div>

    <!-- Linha 2: saias -->
    <div class="linha-campos">
      <div class="campo-inline">
        <label for="saiaEsq">Saia à esquerda:</label>
        <select id="saiaEsq">
          <option value="NAO">Não</option>
          <option value="SIM">Sim</option>
        </select>
      </div>
      <div class="campo-inline">
        <label for="saiaDir">Saia à direita:</label>
        <select id="saiaDir">
          <option value="NAO">Não</option>
          <option value="SIM">Sim</option>
        </select>
      </div>
    </div>

    <!-- Linha 3: frontões -->
    <div class="linha-campos">
      <div class="campo-inline">
        <label for="fronEsq">Frontão à esquerda:</label>
        <select id="fronEsq">
          <option value="NAO">Não</option>
          <option value="SIM">Sim</option>
        </select>
      </div>
      <div class="campo-inline">
        <label for="fronDir">Frontão à direita:</label>
        <select id="fronDir">
          <option value="NAO">Não</option>
          <option value="SIM">Sim</option>
        </select>
      </div>
    </div>

    <!-- Linha 4: meia esquadria -->
    <div class="linha-campos">
      <div class="campo-inline">
        <label for="meiaesquad">Meia esquadria:</label>
        <select id="meiaesquad">
          <option value="NAO">Não</option>
          <option value="SIM">Sim</option>
        </select>
      </div>
    </div>

    <div style="margin-bottom:10px;">
      <button type="submit">Gerar Imagem</button>
    </div>
  </form>

  <div class="preview">
    <h4>Corte AA</h4>
    <canvas id="canvasPreview"></canvas>
  </div>

  <script>
    document.getElementById('formImagem').addEventListener('submit', function(e){
      e.preventDefault();
      gerarImagem();
    });

    function gerarImagem(){
      // parse seguro
      const n = (id, min, def) => {
        const v = Number(document.getElementById(id).value);
        return Number.isFinite(v) ? Math.max(min, v) : def;
      };

      // valores
      const largura    = n('largura', 5, 200);
      const altura     = n('altura',  5, 13);
      const saiaEsq    = document.getElementById('saiaEsq').value.toUpperCase();
      const saiaDir    = document.getElementById('saiaDir').value.toUpperCase();
      const fronEsq    = document.getElementById('fronEsq').value.toUpperCase();
      const fronDir    = document.getElementById('fronDir').value.toUpperCase();
      const meiaEsquad = document.getElementById('meiaesquad').value.toUpperCase();
      const corHexRaw  = document.getElementById('cor').value.trim();

      // cor hex -> rgb (#RGB e #RRGGBB)
      function hexToRgb(hex){
        let h = hex.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)];
      }
      const [r,g,b] = hexToRgb(corHexRaw);
      const cor = `rgb(${r},${g},${b})`;

      const esp = 2;

      // dimensões
      const wSaiaEsq = (saiaEsq==='SIM') ? altura : 0;
      const hSaiaEsq = (saiaEsq==='SIM') ? Math.floor(largura/3) : 0;
      const wSaiaDir = (saiaDir==='SIM') ? altura : 0;
      const hSaiaDir = (saiaDir==='SIM') ? Math.floor(largura/3) : 0;
      const wFronEsq = (fronEsq==='SIM') ? Math.floor(altura*0.9) : 0;
      const hFronEsq = (fronEsq==='SIM') ? Math.floor(largura/3) : 0;
      const wFronDir = (fronDir==='SIM') ? Math.floor(altura*0.9) : 0;
      const hFronDir = (fronDir==='SIM') ? Math.floor(largura/3) : 0;

      // margens (extraDir corrigido)
      const extraTopo  = Math.max(hFronEsq, hFronDir);
      const extraBaixo = Math.max(hSaiaEsq, hSaiaDir);
      const extraEsq   = wSaiaEsq + (fronEsq==='SIM' ? altura : 0);
      const extraDir   = wSaiaDir + (fronDir==='SIM' ? altura : 0);

      // canvas
      const canvas = document.getElementById('canvasPreview');
      canvas.width  = largura + extraEsq + extraDir + 2*esp;
      canvas.height = extraTopo + altura + extraBaixo + 2*esp;
      const ctx = canvas.getContext('2d');

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

      const origX = esp + extraEsq;
      const origY = esp + extraTopo;

      // --- Saia esquerda (com meia-esquadria sem risco interno) ---
      if (saiaEsq === 'SIM') {
        const xL = origX - wSaiaEsq + altura; // lado externo da saia
        const xR = origX + altura;            // lado interno da saia (encosta no corpo)
        const yTopBody = origY + altura;      // base da barra horizontal
        const yBottom  = yTopBody + hSaiaEsq;

        if (meiaEsquad === 'SIM') {
          // borda esquerda
          ctx.beginPath();
          ctx.moveTo(xL, yTopBody);
          ctx.lineTo(xL, yBottom);
          ctx.stroke();

          // borda inferior
          ctx.beginPath();
          ctx.moveTo(xL, yBottom);
          ctx.lineTo(xR, yBottom);
          ctx.stroke();

          // borda direita (apenas abaixo da barra)
          ctx.beginPath();
          ctx.moveTo(xR, yTopBody);
          ctx.lineTo(xR, yBottom);
          ctx.stroke();

          // diagonal da meia-esquadria
          ctx.beginPath();
          ctx.moveTo(origX, origY);
          ctx.lineTo(origX + altura, origY + altura);
          ctx.stroke();

          // >>> FECHAMENTO COMPLETO DO CANTO <<<
          // (A) segmento horizontal curto (topo externo) até a barra
          ctx.beginPath();
          ctx.moveTo(origX, origY);
          ctx.lineTo(origX + altura, origY);
          ctx.stroke();

          // (B) segmento vertical curto (lateral externa) até a saia
          ctx.beginPath();
          ctx.moveTo(origX, origY);
          ctx.lineTo(origX, origY + altura);
          ctx.stroke();
        } else {
          // caso sem meia-esquadria
          ctx.strokeRect(xL, yTopBody, xR - xL, hSaiaEsq);
        }
      }

      // --- Retângulo principal (barra) ---
      const rightX = origX + largura;
      const baseY  = origY + altura;

      // topo (começa depois da meia-esquadria)
      ctx.beginPath();
      ctx.moveTo((saiaEsq==='SIM' && meiaEsquad==='SIM') ? (origX + altura) : origX, origY);
      ctx.lineTo(rightX, origY);
      ctx.stroke();

      // direita
      ctx.beginPath();
      ctx.moveTo(rightX, origY);
      ctx.lineTo(rightX, baseY);
      ctx.stroke();

      // base (começa depois da meia-esquadria)
      ctx.beginPath();
      ctx.moveTo((saiaEsq==='SIM' && meiaEsquad==='SIM') ? (origX + altura) : origX, baseY);
      ctx.lineTo(rightX, baseY);
      ctx.stroke();

      // esquerda (parte visível do corpo)
      ctx.beginPath();
      ctx.moveTo((saiaEsq==='SIM' && meiaEsquad==='SIM') ? origX : origX, 
                 (saiaEsq==='SIM' && meiaEsquad==='SIM') ? (origY + altura) : origY);
      ctx.lineTo(origX, baseY);
      ctx.stroke();

      // Saia direita
      if (saiaDir==='SIM') {
        const yA = origY + altura;
        const xR = rightX;
        const xL = xR - wSaiaDir;
        ctx.strokeRect(xL, yA, wSaiaDir, hSaiaDir);
      }

      // Frontões
      if (fronEsq==='SIM') ctx.strokeRect(origX, origY - hFronEsq, wFronEsq, hFronEsq);
      if (fronDir==='SIM') ctx.strokeRect(rightX - wFronDir, origY - hFronDir, wFronDir, hFronDir);
    }

    // desenha ao carregar
    window.addEventListener('load', gerarImagem);
  </script>
</body>
</html>