404

D7net
:/ var / www / html / novonote /
Filename : testeimagemJS - Copia (4).php
back
<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Gerador de Imagem</title>
  <style>
    /* Container flex para alinhar canvas e input lado a lado */
    #canvasWrapper {
      position: relative;
      display: inline-block;
    }

    #HsaiaDir {
      position: absolute;
      top: 50%;
      left: 100%;
      transform: translate(10px, -50%);
      width: 20px;
    }
#inputSaiaDirWrapper {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(10px, -50%);
  display: none; /* inicial escondido */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px; /* espaçamento entre label e input */
}

    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>
        <input type="checkbox" id="saiaEsq">
      </div>
      <div class="campo-inline">
        <label for="saiaDir">Saia à direita:</label>
        <input type="checkbox" id="saiaDir">
      </div>
    </div>

    <!-- Linha 3: frontões -->
    <div class="linha-campos">
      <div class="campo-inline">
        <label for="fronEsq">Frontão à esquerda:</label>
        <input type="checkbox" id="fronEsq">
      </div>
      <div class="campo-inline">
        <label for="fronDir">Frontão à direita:</label>
        <input type="checkbox" id="fronDir">
      </div>
    </div>

    <!-- Linha 4: meia esquadria -->
    <div class="linha-campos">
      <div class="campo-inline">
        <label for="meiaesquad">Meia esquadria:</label>
        <input type="checkbox" id="meiaesquad">
      </div>
      <div class="campo-inline">
        <label for="tpo_duplo">Tampo Duplo:</label>
        <input type="checkbox" id="tpo_duplo">
      </div>
    </div>
  </form>

  <!-- Preview -->
  <div class="preview">
    <h4>Corte AA</h4>

<div id="canvasWrapper">
  <canvas id="canvasPreview"></canvas>
<div id="inputSaiaDirWrapper">
  <label for="HsaiaDir">H</label>
  <input id="HsaiaDir" type="text" style="width: 20px;">
</div>


</div>
  </div>

  <script>
    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').checked;
      const saiaDir    = document.getElementById('saiaDir').checked;
      const fronEsq    = document.getElementById('fronEsq').checked;
      const fronDir    = document.getElementById('fronDir').checked;
      const meiaEsquad = document.getElementById('meiaesquad').checked;
      const tpoDuplo   = document.getElementById('tpo_duplo').checked;
      const corHexRaw  = document.getElementById('cor').value.trim();

      // ✅ Exibir/ocultar o input HsaiaDir
      const inputSaiaDir = document.getElementById('HsaiaDir');
document.getElementById('inputSaiaDirWrapper').style.display = saiaDir ? 'flex' : 'none';

      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;

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

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

      const alturaTampo = extraTopo + altura + extraBaixo + 2*esp;
      const espacoEntre = Math.floor(largura/3) + altura;
      const alturaTotal = alturaTampo + (tpoDuplo ? espacoEntre + alturaTampo : 0);

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

      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;

      function desenharTampo(offsetY, includeExtras = true) {
        const origY = esp + extraTopo + offsetY;
        const rightX = origX + largura;
        const baseY  = origY + altura;

        if (includeExtras && saiaEsq) {
          const xL = origX - wSaiaEsq + altura;
          const xR = origX + altura;
          const y1 = origY + altura;
          const y2 = y1 + hSaiaEsq;
          if (meiaEsquad) {
            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);
          }
        }

        ctx.beginPath();
        ctx.moveTo((saiaEsq && meiaEsquad) ? 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 && meiaEsquad) ? origX+altura : origX, baseY);
        ctx.lineTo(rightX, baseY); ctx.stroke();
        ctx.beginPath();
        ctx.moveTo((saiaEsq && meiaEsquad) ? origX : origX,
                   (saiaEsq && meiaEsquad) ? origY+altura : origY);
        ctx.lineTo(origX, baseY); ctx.stroke();

        if (includeExtras && saiaDir) {
          const xL = rightX - altura;
          const xR = rightX + wSaiaDir - altura;
          const y1 = origY + altura;
          const y2 = y1 + hSaiaDir;
          if (meiaEsquad) {
            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);
          }
        }

        if (includeExtras && fronEsq)
          ctx.strokeRect(origX, origY - hFronEsq, wFronEsq, hFronEsq);
        if (includeExtras && fronDir)
          ctx.strokeRect(rightX - wFronDir, origY - hFronDir, wFronDir, hFronDir);

        if (!includeExtras && saiaDir && tpoDuplo && meiaEsquad) {
          const rightX_lower = origX + largura;
          ctx.beginPath();
          ctx.moveTo(rightX_lower, origY);
          ctx.lineTo(rightX_lower - altura, origY + altura);
          ctx.stroke();
        }

        if (!includeExtras && saiaEsq && tpoDuplo && meiaEsquad) {
          ctx.beginPath();
          ctx.moveTo(origX, origY);
          ctx.lineTo(origX + altura, origY + altura);
          ctx.stroke();
        }
      }

      desenharTampo(0, true);

      if (tpoDuplo) {
        const offsetSegundo = alturaTampo + espacoEntre - extraBaixo - altura - extraTopo - 3;
        desenharTampo(offsetSegundo, false);
      }
    }

    // ✅ Gera imagem automaticamente ao clicar nos checkboxes
    ['saiaEsq', 'saiaDir', 'fronEsq', 'fronDir', 'meiaesquad', 'tpo_duplo'].forEach(id => {
      document.getElementById(id).addEventListener('change', gerarImagem);
    });

    // Gera imagem ao carregar a página
    window.addEventListener('load', gerarImagem);
  </script>
</body>
</html>