404

D7net
:/ var / www / html / crsys /
Filename : testefrontao.php
back
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Teste fronEsq com canvasPlanta</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 20px;
  }
  #canvasPrincipal {
    border: 1px solid black;
    width: 60%;
    height: 150px;
    display: block;
    margin-bottom: 10px;
  }
  .sub-container-planta {
    min-height: 150px;
    border: 1px solid #ccc;
    width: 30%;
    position: relative;
    margin-bottom: 10px;
  }
  #canvasPlanta {
    width: 100%;
    height: 150px;
    display: block;
  }
  button {
    margin-bottom: 20px;
  }
</style>
</head>
<body>

<button id="toggleFronEsq">Toggle fronEsq</button>

<canvas id="canvasPrincipal"></canvas>

<div class="sub-container-planta">
  <canvas id="canvasPlanta"></canvas>
</div>

<script>
  const canvasPrincipal = document.getElementById('canvasPrincipal');
  const ctxPrincipal = canvasPrincipal.getContext('2d');

  let fronEsq = false;

  // Ajusta tamanho dos canvas conforme o CSS real
  function ajustarCanvasTamanho(canvas) {
    const rect = canvas.getBoundingClientRect();
    canvas.width = rect.width;
    canvas.height = rect.height;
  }

  function ajustarCanvasPlanta() {
    const canvasPlanta = document.getElementById('canvasPlanta');
    if (canvasPlanta) {
      ajustarCanvasTamanho(canvasPlanta);
      const ctx = canvasPlanta.getContext('2d');
      ctx.clearRect(0, 0, canvasPlanta.width, canvasPlanta.height);
    }
  }

  function ajustarCanvasPrincipal() {
    if (canvasPrincipal) {
      ajustarCanvasTamanho(canvasPrincipal);
      ctxPrincipal.clearRect(0, 0, canvasPrincipal.width, canvasPrincipal.height);
    }
  }

  // Função que desenha no canvas principal e no canvas planta
  function desenhar() {
    ajustarCanvasPrincipal();
    ajustarCanvasPlanta();

    // Desenha no canvas principal (exemplo simples)
    ctxPrincipal.fillStyle = '#d0e0f0';
    ctxPrincipal.fillRect(10, 20, canvasPrincipal.width - 20, canvasPrincipal.height - 40);

    if (fronEsq) {
      // Desenho representativo do fronEsq no canvas principal
      ctxPrincipal.strokeStyle = 'red';
      ctxPrincipal.lineWidth = 3;
      ctxPrincipal.strokeRect(10, 20, 100, 100);

      // Agora desenha no canvasPlanta uma linha fina vertical na esquerda
      const canvasPlanta = document.getElementById('canvasPlanta');
      if (canvasPlanta) {
        const ctxPlanta = canvasPlanta.getContext('2d');

        ctxPlanta.strokeStyle = '#000';
        ctxPlanta.lineWidth = 1;
        ctxPlanta.setLineDash([]);

        const xPlanta = 1;
        const yPlanta = 0;
        const hPlanta = canvasPlanta.height;

        ctxPlanta.beginPath();
        ctxPlanta.moveTo(xPlanta, yPlanta);
        ctxPlanta.lineTo(xPlanta, yPlanta + hPlanta);
        ctxPlanta.stroke();
      }
    }
  }

  // Evento do botão para ativar/desativar fronEsq
  document.getElementById('toggleFronEsq').addEventListener('click', () => {
    fronEsq = !fronEsq;
    desenhar();
  });

  // Inicializa na carga da página
  window.addEventListener('load', () => {
    ajustarCanvasPrincipal();
    ajustarCanvasPlanta();
    desenhar();
  });
</script>

</body>
</html>