Crea un grabado digital un boceto

Sep 12, 2025
Cómo
[dieciséis]

En este tutorial, tomamos el grabado mecánico Etch Etch un boceto como inspiración e intento de implementar estas características para dispositivos modernos, con tecnologías web. Utilizando el lienzo (con nombre aptamente), primero nos centramos en las tabletas, que son similares en forma del juguete auténtico. Podemos aprovechar los eventos táctiles para controlar los diales y los eventos de movimiento de dispositivos para borrar el contenido. Sin dejar los teléfonos, también exploraremos cómo usar WebSockets para mejorar las posibilidades dividiendo los controles y el área de dibujo.

01. Obtener los activos

Este tutorial usará nodo.js. Antes de empezar, vamos a Filesilo , seleccione cosas gratis y contenido gratuito junto al tutorial, aquí puede descargar los activos que necesita para el tutorial. Luego ejecute los comandos a continuación, lo que instalará las dependencias y se iniciará el servidor. Estamos usando un nodo para crear un localhost , y también nos servirá más tarde para websockets. 

 INSTALACIÓN DE NPM
servidor de nodos / index.js

02. Use la función DRABRE ()

En main.js , la dibujar() La función será el punto central de nuestra aplicación. Usamos lienzo para dibujar una línea entre dos puntos; El origen (X1, Y1), que es donde dejamos el último dibujo, y el destino (X2, Y2), el nuevo punto que queremos alcanzar. Ahora necesitamos desencadenar esta función para observar cualquier forma de dibujo. 

 DIBUJO DE FUNCIONES (X1, Y1, X2, Y2) {
  // el contexto se establece globalmente en init ()
  contexto.beginpath ();
  contexto.moveto (x1, y1);
  contexto.lineto (x2, y2);
  contexto.stroce ();
}

03. Implementar eventos de teclado.

Antes de implementar diales, agreguemos rápidamente un oyente de teclado que pueda activar nuestra función de sorteo. Ya has sido proporcionado con los diferentes códigos clave en el ejemplo, pero necesitará enmendar ligeramente al oyente para activar el dibujar() Función definimos anteriormente. Ahora refresque su navegador y vea lo que puede dibujar con las teclas de flecha. 

 Document.AddeventListener ('KeyDown', Function (E) {
  / * El interruptor de código de teclado va aquí * /
  Dibujar (matemáticas.floor (Prev_horizontal), matemáticas. Floor (Prev_vertical), Matemáticas. Flor (Horizontal), Matemáticas. Plaor (vertical));
  previewvertical = vertical;
  Prev_horizontal = horizontal;
});

04. Cambiar el tamaño del lienzo.

Es posible que haya notado que nuestro elemento de lienzo aún no tiene un tamaño asignado. Para nuestro tablero de dibujo, querremos un espacio más grande, tal vez incluso toda la ventana. El código a continuación se encarga del evento de cambio de tamaño, pero no olvides llamar ajustado () en en eso() también. 

 Función AjusteFrame () {
  // el lienzo se define globalmente en init ()
  lienzo.width = ventana.innerwidth;
  lienzo.height = ventana.innerheight;
}
ventana.addeventlistener ('tamaño de tamaño', ajustado);

05. Añadir un marco

Queremos que la aplicación se vea como el juguete original tanto como sea posible, por lo que queremos agregar un marco alrededor del área de dibujo. Para hacerlo, podemos definir un valor de margen y enmendar el CSS para #bosquejo al margen: 20px Auto; Para centrar el lienzo horizontalmente y mantener un espacio más grande en la parte inferior para los diales. 

 var framemergingerical = 122;
var framemarginhorizontal = 62;
Función AjustFrame () {
  lienzo.width = window.innerwidth - FrameMarginhorizontal;
  Canvas.Height = Window.Innerheight - FrameMarginTertical;
}

06. Crea los diales.

Ya te hemos dado el CSS para los diales en Public / CSS / Styles.css , así que siéntete libre de echar un vistazo. A continuación, agregue dos & lt; div & gt; Etiquetas bajo el & lt; lienzo & gt; en el archivo HTML, como se describe a continuación. Como convención, usaremos la esfera izquierda para el dibujo horizontal, y la derecha para vertical. También estamos agregando nuevas variables a la en eso() Función para prepararse para eventos táctiles. 

 & lt; div id = "dialhorizontal" class = "dial" & gt; & lt; / div & gt;
& lt; div id = "dialvertical" class = "dial" & gt; & lt; / div & gt; 
 var targetleft = document.getelementbyid ('dialhorizontal');
var regionleft = nuevo zingtouch.region (Targetleft);
var tardiTright = document.getelementbyid ('dialvertical');
var regionright = nuevo zingtouch.region (Diario);

07. Usa ZingTouch

The canvas with added dials, tied to the draw() function

[dieciséis] El lienzo con diales añadidos, atado a la función DRABRE ()

ZingTouch es una biblioteca de JavaScript capaz de detectar varios gestos táctiles, y también manejará los eventos del mouse. Se proporciona para ti en el / Público / lib / Carpeta, como lo usamos para controlar nuestros diales. A continuación se muestra la implementación para el control izquierdo; Tendrá que replicarlo y modificarlo por el otro lado. 

 regionleft.bind (Targetleft, 'rotate', función (e) {
  if (e.detail.distancefromlast & lt; 0) {
  --horizontal;
  } demás {
  ++ horizontal;
  }
  anglehorizontal + = e.detail.distancefromlast;
  targetleft.style.transform = 'rotate (' + anglehorizontal + 'deg)';
  Dibujar (matemáticas.floor (Prev_horizontal), matemáticas.floor (Prev_vertical), matemáticas. Floor (horizontal), matemath.floor (Prev_vertical));
  Prev_horizontal = horizontal;
});

08. Implementar límites de dial

Para bloquear las líneas saliendo fuera de la pantalla, usamos el poder dibujar() Función, que devuelve un booleano. Lo pasamos por la dirección, ya sea 'horizontal' o 'vertical', y el valor de la variable horizontal o vertical. Llamamos a esta función en el oyente 'Rotate' de ambos diales, y solo si 'verdadero', incrementamos el ángulo y llamamos al dibujar() función. 

 Función Candraw (dirección, valor) {
  var max = (dirección === 'horizontal')? (Canvas.width) :( Canvas.height);
  if (valor & lt; 2 || valor & gt; max - 2) {
  falso retorno;
  }
  devuelve verdadero;
}

09. Evitar problemas de marcación.

Con los límites que acabamos de implementar, existe la posibilidad de que el dial pueda quedarse atascado en un extremo si el valor pasa por encima del límite, incluso por un punto decimal. Para evitar esta situación, deberíamos manejar el caso donde poder dibujar() es falso y restablece el valor a uno previamente válido, como se muestra aquí para el controlador horizontal: 

 if (Candraw ('horizontal', horizontal)) {
  anglehorizontal + = e.detail.distancefromlast;
  targetleft.style.transform = 'rotate (' + anglehorizontal + 'deg)';
  Dibujar (matemáticas.floor (Prev_horizontal), matemáticas.floor (Prev_vertical), matemáticas. Floor (horizontal), matemath.floor (Prev_vertical));
  Prev_horizontal = horizontal;
} demás {
  horizontal = prevance_horizontal;
}

10. Obtenga el tablero de dibujo en su tableta.

Siempre se recomienda probar sus dispositivos específicos lo antes posible. Nuestra aplicación está ahora en buena forma, y ​​puede responder a los eventos táctiles. Siga los pasos para acceder a LocalHost de forma remota para obtener el tablero de dibujo en su tableta.

A continuación, utilizaremos Safari y el menú Desarrollar para inspeccionar la aplicación en un iPad. Para dispositivos Android, use Chrome: // inspeccionar .

11. Prueba el acelerómetro.

Testing the accelerometer in Safari [click the icon to enlarge]

[dieciséis] Probando el acelerómetro en Safari [Haga clic en el icono para ampliar]

Conecte su tableta a su computadora a través de USB e inspeccione la aplicación utilizando las herramientas del desarrollador.

Con el código a continuación en su lugar, debe poder ver los diversos valores de aceleración, a medida que mueve su dispositivo alrededor. Para restablecer el lienzo, hemos decidido considerar una aceleración en el eje X más de 5, y disminuirá lentamente la opacidad ( borrarse ). 

 var borrado = 1; / * Definir como una variable global * /
ventana.addeventlistener ('devicemotion', función (evento) {
  console.log ('aceleración ::', evento.aceleración);
  if (event.acceleration.x & gt; 5) {
  borrado - = math.abs (event.acceleration.x / 100);
  console.log ('borrar ::', borrado);
  }
});

12. Agitar para eliminar

Hemos visto en el paso anterior cómo verificar el movimiento y la aceleración. Ahora necesitamos llamar Fadedrawing () cuando se cumple nuestra condición. En este caso, redibujamos una copia exacta del lienzo en una opacidad diferente.

Restablecer el globalalpha a 1 en dibujar() y establecer el globalcompositeopeo De vuelta a la fuente. 

 Función Fadedrawing () {
  Si (ERASERADO & LT; 0) {
  contexto.clearrect (0, 0, lienzo.width, lienzo.height);
  borrado = 1;
  regreso;
  }
  contexto.globalalpha = borrado;
  contexto.globalCompositeOoperation = 'Copy';
  context.drawimage (lienzo, 0, 0);
}

13. Haz que se vea como el verdadero negocio.

Our application with shake-to-delete functionality

[dieciséis] Nuestra aplicación con funcionalidad de Shake-to-Eliminar.

Hasta ahora, nuestra aplicación se ve bastante insípida y plana. Para darle algo de profundidad, agregaremos un color de marco, una sombra dentro del marco y un poco de volumen en los diales. La CSS para las sombras de marcación ya está proporcionada, pero deberá agregar esos dos elementos al final del cuerpo.

Complete el CSS para los elementos sugeridos aquí: 

 & lt; div id = "dialshadowhorizontal" class = "shadow" & gt; & lt; / div & gt;
& lt; div id = "dialshadowvertical" class = "shadow" & gt; / div & gt; 
 Cuerpo {
  Fondo: # 09cbf7;
}
#sketch {
  Box-Shadow: 2px 2px 10px RGBA (0, 0, 0, .25) INSET;
}

14. Usa WebSockets

Al comienzo de este tutorial, mencionamos brevemente utilizando WebSockets a través de nuestro servidor de nodos. Ahora que tiene un almohadilla de dibujo independiente para la tableta, lo veremos, lo que también está disponible para su teléfono. Sin embargo, los teléfonos pueden ser demasiado pequeños para mostrar tanto la pantalla como las controles. Por lo tanto, estamos usando sockets para comunicarse entre el teléfono y la pantalla de la computadora.

15. Detectar el tamaño del dispositivo.

En el archivo HTML principal, reemplace main.js con extra.js . Este último contiene todo lo que hemos hecho hasta ahora, con modificaciones para manejar dispositivos y enchufes, que inspeccionaremos en los siguientes pasos. Mira esto Detectdevice () - Este método ahora se llama carga en lugar de en eso() y decidirá qué 'modo' manejar para la aplicación.

A continuación se muestra el caso particular de un teléfono detectado: 

 if (window.innerwidth & lt; 768) {
  Socket = io.connect ();
  document.queryselector ('# sketch'). Retirar ();
  var dials = document.queryselectorall ('. dial, .shadow');
  [] .poreach.call (diales, función (artículo) {
  item.classlist.add ('Big');
  });
  isControls = verdadero;
  Framargingerical = 62;
  socket.emit ('listo', {'listo': 'controles'});
}

16. Desde el teléfono a la computadora.

From phone to computer, remotely drawing through sockets

[dieciséis] Desde el teléfono a la computadora, dibujando de forma remota a través de sockets.

A lo largo de extra.js Notará bits de código como socket.emit () o socket.on () . Estos son los emisores y oyentes para nuestras instancias de controles (teléfono) y pantalla (computadora). Cada evento emitido debe pasar por el servidor a re-distribuirse a todos los sockets conectados. En servidor \ index.js Agregue unos cuantos oyentes más en la función 'Conexión' y reinicie el servidor de nodos. 

 Socket.on ('DIBUJO', FUNCION (DATOS) {
  io.sockets.mit ('dibujo', datos);
});
socket.on ('borrar', función (datos) {
  io.sockets.mit ('borrar', datos);
});
socket.on ('ajustframe', función (datos) {
  Screenwidth = Data.Screenwidth;
  SANEYHEIGHT = DATA.SCREENHEIGHT;
  io.sockets.mit ('ajustframe', datos);
});

17. Fijar la orientación del teléfono.

Visite el LocalHost en su computadora, mientras accede a él de forma remota con su teléfono (como lo hizo anteriormente desde su tableta). Ahora debería ver que se dibuja una línea en su pantalla mientras gira los diales en su teléfono. Sin embargo, notará que los diales no se ajusten correctamente si el teléfono está en modo vertical.

Podemos arreglar esto con algunos CSS: 

 Pantalla @Media y (Orientación: retrato) {
  .dial.big # dialvertical, .shadow.big # dialshadowvertical {
  derecha: calc (50% - 75px);
  fondo: 20px;
  TOP: AUTO;
  }
  .dial.big # dialhorizontal, .shadow.big # dialshadowhorizontal {
  izquierda: calc (50% - 75px);
  TOP: 20px;
  }
}

18. Haz que el juguete sea más realista.

Touching your tablet leaves some temporary fingerprints

[dieciséis] Tocar su tableta deja algunas huellas dactilares temporales

Volvamos a nuestra versión de tablet. Lamentablemente, la API de vibración no está disponible en iOS, por lo que no podemos implementar comentarios hápticos cuando se giran los diales. Sin embargo, en el juguete original, podría dejar marcas temporales de huellas dactilares en la pantalla si lo empujas. Podemos agregar un evento táctil en el dispositivo para replicar esta función.

Establecer estos oyentes en en eso() y explore las funciones que llaman: 

 if (Type === 'all') {
  lienzo.addeventlistener ('touchstart', función (e) {
  e.preventdefault ();
  Drawfingerprint (E.Layerx, E.Layery, VERDADERO);
  });
  lienzo.addeventlistener ('touchend', función (e) {
  hidefingerprint (e.layerx, e.layery);
  });
}

19. Guarda una copia del lienzo.

En el Drawfingerprint () MÉTODO, ANTES DE QUE HACEMOS CUALQUIER MÁS DE CUALQUIER COPIA DEL ESTADO ACTUAL DEL CANO DE LONES A UN ELEMENTO OCULTADO QUE UTILIZAMOS PARA RESTRAR NUESTRO DIBUJO CON LAS PROPORCIONES DE LA IMPRESIÓN. Eso solo sucede al primer toque, y no en las llamadas posteriores que aumentan el tamaño de la impresión cada 100 ms. 

 Función Drawfingerprint (XPOS, YPOS, SAVECANVAS) {
  / * Función parcial, consulte Extra.js * /
  if (savecanvas) {
  hiddencanvas = document.createelement ('lienzo');
  var hiddencontext = hiddencanvas.getcontext ('2D');
  hiddencanvas.width = lienzo.width;
  hiddencanvas.height = lienzo.height;
  hiddencontext.drawimage (lienzo, 0, 0);
  }
}

20. Ejecutar la aplicación fuera de línea

Ahora podría hacer que la aplicación esté realmente independiente al guardarla en su tableta como una aplicación de pantalla de inicio. No podremos hacer lo mismo por el teléfono, ya que requiere conexión al servidor. En /público , localiza el archivo nombrado Sketch.appcache y reemplace todas las instancias de 'localhost' por su dirección IP.

Ahora, enmendar el HTML para leer de la siguiente manera: 

 & lt; html lang = "en" manifiest = "Sketch.appcache" & gt;

21. Guarda la aplicación

Ahora visite la solicitud nuevamente en su tableta y seleccione la opción Añadir a la pantalla de inicio. Un nuevo icono debe aparecer en su escritorio. Abríelo una vez mientras aún está conectado a su localhost de forma remota. El manifiesto de caché que establecimos anteriormente descargará todos los archivos necesarios para uso fuera de línea en el fondo. Apague el wi-Fi y abra la aplicación de nuevo. ¡Voilà!

Este artículo apareció originalmente en Revista Web Designer Número 263. Comprarlo aquí .

Leer más:

  • 15 APIES WEB HAS ANUYO
  • Una guía para principiantes para diseñar animaciones de interfaz.
  • Una guía para escribir mejor CSS.

Cómo - Artículos más populares

Animar SVG con JavaScript

Cómo Sep 12, 2025

[dieciséis] Hay tanto que se pueden lograr de forma nativa en el navegador utilizando CSS3 o API de animaciones web, en JavaScript. La..

Añadir soporte de varios idiomas a angular

Cómo Sep 12, 2025

[dieciséis] En este tutorial, lo llevaremos a través del proceso de hacer que su aplicación sea accesible y fácil de usar para las ..

Cómo mezclar una paleta de gouache

Cómo Sep 12, 2025

[dieciséis] Gouache es más indulgente que la pintura de acuarela, pero las decisiones que hagas temprano todavía pueden afectar el r..

Una introducción a las pruebas de frontend

Cómo Sep 12, 2025

[dieciséis] Página 1 de 2: Diferentes tipos de pruebas frontend (y cuándo usarlas) Dife..

Comienza con el lienzo HTML

Cómo Sep 12, 2025

[dieciséis] El html & lt; lienzo & gt; Elemento es una solución poderosa para crear gráficos basados ​​en píxeles en la..

Crea un efecto de portal en maya

Cómo Sep 12, 2025

[dieciséis] Ese efecto del portal en Dr Strange fue muy especial. Fue prácticamente el único efecto en la película que no se inclin..

Cómo construir mundos para el cine

Cómo Sep 12, 2025

[dieciséis] Cuando se le pidió que hiciera un taller sobre la creación de un entorno de fantasía, pensé que sería divertido pagar..

Crea texturas listas para el juego utilizando el pintor de sustancias

Cómo Sep 12, 2025

[dieciséis] Este año pasado ha sido un cambiador de juegos para la industria de los videojuegos y para los artistas de los EE. UU. Lo..

Categorías