es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo limitar la sección interactiva del sitio web con JS?

26 Jul, 2023 Programación

Tome por ejemplo un lienzo de HTML que está centrado en medio de la página con un ancho y alto más pequeño que la página en sí misma, por lo que hay un lienzo rectangular en el centro (seccionado por un contorno).

¿Cómo puedo hacer que esta sección de la página, el área contenida en este rectángulo, sea la parte interactiva de la página en sí misma?

Tengo el siguiente código:

canvas.html

<html>
    <head>
        <meta charset="utf-8">
        <title>Gráficos</title>
        <link rel="stylesheet" href="index.css">
        <script type="module" src="application.js"></script>
    </head>

<body>
    <canvas id="appCanvas" style="border:1px solid #000000;">
    </canvas>
</body>
</html>

index.css

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 60%;
    height: 80%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

application.js

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

window.onresize = resize;
resize();

application.js también incluye una verificación de mouseup, que dibuja un círculo en el punto donde se hizo clic con el mouse.

Con el código proporcionado, tengo como se mencionó, un cuadro en el centro, sin embargo, hacer clic fuera de este cuadro sigue creando un círculo. El círculo todavía se hace dentro del cuadro, simplemente se proyecta dentro de él. Entonces, hacer clic en la parte superior izquierda de la página agrega un círculo en la parte superior izquierda del cuadro, y así sucesivamente.

¿Cómo podría hacerlo para que solo hacer clic dentro del cuadro haga que aparezcan los círculos, es decir, que no ocurra ninguna proyección (es decir, hacer clic en la parte superior izquierda del cuadro crea un círculo en la parte superior izquierda del cuadro)?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que solo el área contenida en el rectángulo sea interactivo, puedes agregar un event listener al elemento de lienzo (canvas) que verifique si el clic del mouse ocurrió dentro de sus límites.

    Para hacer esto, agrega el siguiente código a tu archivo application.js después de la función resize():

    canvas.addEventListener('mouseup', function(event) {
    const rect = canvas.getBoundingClientRect();
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;

    if(mouseX > 0 && mouseX < canvas.width && mouseY > 0 && mouseY < canvas.height) {
        // Agrega aquí tu código para dibujar el círculo
    }
});

    Este código obtiene la posición del clic del mouse en relación al elemento de lienzo utilizando el método getBoundingClientRect(). Luego verifica si el clic del mouse ocurrió dentro de los límites del lienzo utilizando instrucciones if. Si el clic del mouse está dentro de los límites del lienzo, se ejecuta el código para dibujar el círculo.

    Con este código, solo al hacer clic dentro del rectángulo aparecerán los círculos y no ocurrirá ninguna proyección.

Comments are closed.