HTML5 Canvas Dibujar una línea cuya dirección y dimensiones cambian

En primer lugar, no soy un profesional en HTML5. Empecé a hacer algunas cosas con HTML5 hace unos días.

En segundo lugar, lo siento por mi inglés, no soy muy bueno y puedo cometer algunos errores.

Este es mi problema ...

Puedo dibujar una línea con dos clics del mouse, la línea comienza desde el primer punto de clic y termina en el segundo punto de clic.

Pero quiero crear una línea que comience desde el primer punto de clic, cambie su dirección y dimensiones de acuerdo con la posición del mouse, luego termine en el segundo punto de clic. (Al igual que el sistema de contraseña gráfica en Android).

¿Es esto posible?

Encontré un código que puede dibujar una línea con dos clics del mouse solo una vez, lo cambié un poco y agregué algo de código yo mismo. Aquí está mi código final:

<!DOCTYPE HTML>
<html>

  <head>

    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
            #myCanvas {
            border: 1px solid #9C9898;
        }
    </style>

    <script src="jquery.js"></script>
    <script type="text/javascript">

        $(function(){

            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");

            var point1 = new Array();
            point1['x'] = false;
            point1['y'] = false;
            var point2 = new Array();
            point2['x'] = false;
            point2['y'] = false;

            $(document).click(function(event){

                if ( false === point1['x'] || false === point1['y']) {

                    var posX1 = event.pageX;
                    var posY1 = event.pageY;

                    point1['x'] = posX1;
                    point1['y'] = posY1;

                }

                else if ( false === point2['x'] || false === point2['y'] ) {

                    var posX2 = event.pageX;            
                    var posY2 = event.pageY;

                    point2['x'] = posX2;
                    point2['y'] = posY2;
                    console.log("second");

                    context.moveTo(point1['x'], point1['y']);
                    context.lineTo(point2['x'], point2['y']);
                    context.stroke();

                    point1['x'] = point2['x'];
                    point1['y'] = point2['y'];  
                    point2['x'] = false;
                    point2['y'] = false;

                }

            });

        });

    </script>

  </head>

  <body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
  </body>

</html>

preguntado el 12 de junio de 12 a las 09:06

¿Cómo sabrá la línea que debe cambiar de dirección? ¿Quieres decir curva hacia el segundo punto? -

Perdón por el doble comentario, solo lea la descripción de la pantalla de bloqueo de Android. De todos modos, ¿podría publicar un video o una captura de pantalla de ese ejemplo en acción? Hay muchas pantallas de bloqueo de Android personalizadas, así que no estoy seguro de a cuál te refieres. -

No pude encontrar un video al respecto, lo siento. Traté de explicar esto: zapp5.staticworld.net/howto/graphics/184659-android29_180.jpg El usuario comienza desde un punto, luego mueve su mano a un punto diferente, aparece una línea entre estos dos puntos. Cuando el usuario mueve su mano a un punto diferente, el punto de inicio permanece igual y la dirección de la línea cambia. -

1 Respuestas

Necesitaría algún tipo de bucle de animación para dibujar la línea desde su primer clic hasta las coordenadas del mouse a medida que mueve el mouse (cada pocos milisegundos, borre el lienzo y actualice la línea en el lienzo con la nueva posición del mouse), luego, una vez que se produce el segundo clic, detenga el ciclo de animación después del dibujo final, dejando la línea en el lienzo.

También puede valer la pena colocar dos lienzos uno encima del otro (uno para dibujar la línea animada 'to-be' y otro para almacenar la imagen). De esta manera, cuando termine de dibujar la primera línea y comience la segunda, la limpieza posterior no afectará la línea almacenada en el lienzo debajo.

Espero que esto ayude.

Saludos, Gary

Respondido el 12 de junio de 12 a las 18:06

Probaré estos métodos. Espero que uno de ellos funcione. Gracias Gary. - microbiano

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.