404

D7net
:/ var / www / html / novonote /
Filename : testeimagemJS - Ultimo_com_Tampo_Duplo.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: 100px;
    }
    .preview {
      display: inline-block;
      background: #f4f4f4;
      padding: 4px;
      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" name="cor" id="cor" value="#4169e1" required>
      </div>
      <div class="campo-inline">
        <label for="largura">Largura:</label>
        <input type="number" name="largura" id="largura" value="200" min="5" required>
      </div>
      <div class="campo-inline">
        <label for="altura">Altura:</label>
        <input type="number" name="altura" 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 name="saiaEsq" 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 name="saiaDir" 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 name="fronEsq" 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 name="fronDir" 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 name="meiaesquad" id="meiaesquad">
          <option value="NAO">Não</option>
          <option value="SIM">Sim</option>
        </select>
      </div>
	   <div class="campo-inline">
        <label for="tpo_duplo">Tampo Duplo:</label>
        <select name="tpo_duplo" id="tpo_duplo">
          <option value="NAO">Não</option>
          <option value="SIM">Sim</option>
        </select>
      </div>
    </div>

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

  <!-- Preview -->
  <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(){
    const n = (id, min, def) => {
      const v = Number(document.getElementById(id).value);
      return Number.isFinite(v) ? Math.max(min, v) : def;
    };

    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 tpoDuplo   = document.getElementById('tpo_duplo').value.trim().toUpperCase();

    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];
      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 das saias/frontõ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 extras
    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);

    // altura de um tampo completo
    const alturaTampo = extraTopo + altura + extraBaixo + 2*esp;
    // espaço entre tampos
    const espacoEntre = Math.floor(largura/3) + altura;
    // altura total do canvas
    const alturaTotal = alturaTampo
      + (tpoDuplo === 'SIM' ? espacoEntre + alturaTampo : 0);

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

    // fundo branco
    ctx.fillStyle   = '#fff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // estilo de traço
    ctx.lineWidth   = esp;
    ctx.strokeStyle = cor;
    ctx.lineJoin    = 'miter';
    ctx.lineCap     = 'butt';

    const origX = esp + extraEsq;

    // desenha um tampo, offsetY = deslocamento vertical, includeExtras controla saias/frontões
    function desenharTampo(offsetY, includeExtras = true) {
      const origY = esp + extraTopo + offsetY;
      const rightX = origX + largura;
      const baseY  = origY + altura;

      // saia esquerda
      if (includeExtras && saiaEsq==='SIM') {
        const xL = origX - wSaiaEsq + altura;
        const xR = origX + altura;
        const y1 = origY + altura;
        const y2 = y1 + hSaiaEsq;
        if (meiaEsquad==='SIM') {
          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();
          ctx.beginPath(); ctx.moveTo(origX,origY); ctx.lineTo(origX+altura,origY+altura); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(origX,origY); ctx.lineTo(origX+altura,origY); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(origX,origY); ctx.lineTo(origX,origY+altura); ctx.stroke();
        } else {
          ctx.strokeRect(xL, y1, xR-xL, hSaiaEsq);
        }
      }

      // corpo do tampo
      ctx.beginPath();
      ctx.moveTo((saiaEsq==='SIM'&&meiaEsquad==='SIM') ? origX+altura : origX, origY);
      ctx.lineTo(rightX, origY); ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(rightX, origY);
      ctx.lineTo(rightX, baseY); ctx.stroke();
      ctx.beginPath();
      ctx.moveTo((saiaEsq==='SIM'&&meiaEsquad==='SIM') ? origX+altura : origX, baseY);
      ctx.lineTo(rightX, baseY); ctx.stroke();
      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 (includeExtras && saiaDir==='SIM') {
        const xL = rightX - altura;
        const xR = rightX + wSaiaDir - altura;
        const y1 = origY + altura;
        const y2 = y1 + hSaiaDir;
        if (meiaEsquad==='SIM') {
          ctx.beginPath(); ctx.moveTo(xR,y1); ctx.lineTo(xR,y2); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(xR,y2); ctx.lineTo(xL,y2); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(xL,y1); ctx.lineTo(xL,y2); ctx.stroke();
          ctx.beginPath(); ctx.moveTo(rightX,origY); ctx.lineTo(rightX-altura,origY+altura); ctx.stroke();
        } else {
          ctx.strokeRect(xL, y1, wSaiaDir, hSaiaDir);
        }
      }

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

    // tampo principal (com extras)
    desenharTampo(0, true);

    // tampo duplo
    if (tpoDuplo === 'SIM') {
      // subtrai extraBaixo para não deslocar demais quando há saia
	  const offsetSegundo = alturaTampo + espacoEntre - extraBaixo - altura - extraTopo - 3;
	  
      desenharTampo(offsetSegundo, false);
    }
  }

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