404

D7net
:/ var / www / html / novonote /
Filename : testeimagemVersao1.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">
    <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>

    <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>

    <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>

    <div class="linha-campos">
      <div class="campo-inline">
        <label for="meiaesquad">Meia esquadria (ambos os cantos):</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();
      const meia = (meiaEsquad === 'SIM');

      // 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;
      const rightX = origX + largura;
      const baseY  = origY + altura;

      // --- Saia ESQUERDA (sem risco interno; com fechamento completo) ---
      if (saiaEsq === 'SIM') {
        const xL = origX - wSaiaEsq + altura; // externo da saia
        const xR = origX + altura;            // interno (encosta no corpo)
        const y1 = origY + altura;            // começa abaixo da barra
        const y2 = y1 + hSaiaEsq;

        if (meia) {
          // bordas da saia, somente abaixo da barra
          ctx.beginPath(); ctx.moveTo(xL, y1); ctx.lineTo(xL, y2); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(xL, y2); ctx.lineTo(xR, y2); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(xR, y1); ctx.lineTo(xR, y2); ctx.stroke();

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

          // fechos do canto (risquinhos)
          ctx.beginPath(); ctx.moveTo(origX, origY); ctx.lineTo(origX + altura, origY); ctx.stroke(); // topo curto
          ctx.beginPath(); ctx.moveTo(origX, origY); ctx.lineTo(origX, origY + altura); ctx.stroke(); // esquerdo curto
        } else {
          ctx.strokeRect(xL, y1, xR - xL, hSaiaEsq);
        }
      }

      // --- Saia DIREITA (simétrica; sem risco interno; com fechamento completo) ---
      if (saiaDir === 'SIM') {
        const xL = rightX - altura;           // interno (encosta no corpo)
        const xR = rightX;                    // externo
        const y1 = origY + altura;            // começa abaixo da barra
        const y2 = y1 + hSaiaDir;

        if (meia) {
          // bordas da saia, somente abaixo da barra
          ctx.beginPath(); ctx.moveTo(xR, y1); ctx.lineTo(xR, y2); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(xL, y2); ctx.lineTo(xR, y2); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(xL, y1); ctx.lineTo(xL, y2); ctx.stroke();

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

          // fechos do canto direito (risquinhos)
          ctx.beginPath(); ctx.moveTo(rightX - altura, origY); ctx.lineTo(rightX, origY); ctx.stroke(); // topo curto
          ctx.beginPath(); ctx.moveTo(rightX, origY); ctx.lineTo(rightX, origY + altura); ctx.stroke(); // direito curto
        } else {
          ctx.strokeRect(xL, y1, altura, hSaiaDir);
        }
      }

      // --- Retângulo principal (barra superior), respeitando meia-esquadria nos dois cantos ---
      const topStart  = (saiaEsq==='SIM' && meia) ? (origX + altura) : origX;
      const topEnd    = (saiaDir==='SIM' && meia) ? (rightX - altura) : rightX;
      const baseStart = topStart;
      const baseEnd   = topEnd;

      // topo
      ctx.beginPath(); ctx.moveTo(topStart, origY); ctx.lineTo(topEnd, origY); ctx.stroke();

      // direita (só quando NÃO há meia-esquadria direita)
      if (!(saiaDir==='SIM' && meia)) {
        ctx.beginPath(); ctx.moveTo(rightX, origY); ctx.lineTo(rightX, baseY); ctx.stroke();
      }

      // base
      ctx.beginPath(); ctx.moveTo(baseStart, baseY); ctx.lineTo(baseEnd, baseY); ctx.stroke();

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

      // --- Frontões (opcional) ---
      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>