Créer un croquis de gravure numérique

Sep 11, 2025
Comment
[dix] [dix] [dix]
[dix]

Dans ce tutoriel, nous prenons le jouet de dessin mécanique gravure un croquis comme source d'inspiration et tente de mettre en œuvre ces fonctionnalités pour les appareils modernes, avec des technologies Web. Utilisation de la toile (admirablement nommée), nous nous concentrons d'abord sur des comprimés, qui s'apparaissent de forme au jouet authentique. Nous pouvons tirer parti des événements tactiles pour contrôler les cadrans et les événements de mouvement de périphérique pour effacer le contenu. Ne quittez pas de téléphones, nous explorerons également comment utiliser WebSockets pour améliorer les possibilités en divisant les commandes et la zone de dessin.

[dix]

01. Obtenez les actifs

Ce tutoriel utilisera node.js. Avant de commencer, allez à Fichiers , Sélectionnez des trucs gratuits et un contenu gratuit à côté du tutoriel - Ici, vous pouvez télécharger les actifs dont vous avez besoin pour le didacticiel. Exécutez ensuite les commandes ci-dessous, ce qui installera les dépendances et lancera le serveur. Nous utilisons le nœud pour créer un localhost , et cela nous servira également plus tard pour les webockets. 

 INSTALLATION NPM
Server de nœud / Index.js

02. Utilisez la fonction Draw ()

Dans Main.js , le tirer() La fonction sera le point central de notre application. Nous utilisons la toile pour dessiner une ligne entre deux points; L'origine (X1, Y1), étant où nous avons quitté notre dessin, et la destination (x2, Y2), le nouveau point que nous voulons atteindre. Nous devons maintenant déclencher cette fonction pour observer toute forme de dessin. 

 Fonction Draw (X1, Y1, X2, Y2) {
  // le contexte est défini globalement dans init ()
  contexte.beginpath ();
  contexte.moveto (x1, y1);
  contexte.lineto (x2, y2);
  contexte.stroke ();
}

03. Implémentez des événements de clavier

Avant de mettre en œuvre des cadrans, ajoutons rapidement un auditeur de clavier capable de déclencher notre fonction de tirage. Vous avez déjà été fourni avec les différents codes clés Dans l'exemple, mais vous devrez légèrement modifier l'auditeur pour déclencher la tirer() fonction que nous avons définie précédemment. Maintenant, actualisez votre navigateur et voyez ce que vous pouvez dessiner avec les touches fléchées. 

 Document.addeventListener ('Keydow', fonction (e) {
  / * Le commutateur de code KeyCode va ici * /
  Dessiner (math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (horizontal), math.floor (vertical));
  prev_vertical = vertical;
  prev_horizontal = horizontal;
});

04. Redimensionnez la toile

Vous avez peut-être remarqué que notre élément de toile n'a pas encore de taille attribuée. Pour notre tableau de dessin, nous voudrons un plus grand espace, peut-être même toute la fenêtre. Le code ci-dessous prend soin de l'événement de redimensionnement, mais n'oubliez pas d'appeler ajustframe () dans init () ainsi que.

[dix] 
 Fonction Ajusteframe () {
  // La toile est définie dans le monde entier ()
  canvas.width = window.innerwidth;
  Canvas.Height = window.innerheight;
}
window.addeventlistener ('redimensionnement', réglable);

05. Ajouter un cadre

Nous voulons que l'application ressemble autant au jouet d'origine autant que possible, nous souhaitons donc ajouter un cadre autour de la zone de dessin. Pour ce faire, nous pouvons définir une valeur de marge et modifier le CSS pour #esquisser à la marge: 20px Auto; Pour centrer la toile horizontalement et garder un espace plus gros en bas pour les cadrans. 

 var framemarginvertical = 122;
var framemarginhorizontal = 62;
Fonction réglerframe () {
  canvas.width = fenêtre.innerWidth - Framemarginhorizontal;
  Canvas.Height = window.innerheight - Framemarginvertical;
}

06. Créer les cadrans

Nous vous avons déjà donné le CSS pour les cadrans dans Public / CSS / Styles.css , alors n'hésitez pas à jeter un coup d'œil. Suivant, ajoutez deux & lt; div & gt; Tags sous le & lt; Canvas & GT; dans le fichier HTML, comme décrit ci-dessous. En tant que convention, nous utiliserons le cadran gauche pour le dessin horizontal et le droit pour la verticale. Nous ajoutons également de nouvelles variables à la init () fonctionner pour se préparer aux événements tactiles. 

 & lt; div id = "dialhorizontale" class = "cadran" & gt; & lt; / div et gt;
& lt; div id = "BIANVERTIC" Classe = "Dial" & GT; & LT; / Div & GT; 
 var cibleLeft = document.getElementyID ('dialhorizontal');
var régiongleft = nouveau zingtouch.region (Targetleft);
var cibledright = document.getelementByID ('GIVERTICIAL');
varionright = nouveau zingtouch.region (Cadright);

07. Utilisez ZingTouch

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

[dix] [dix]
La toile avec des cadrans ajoutés, liés à la fonction Draw ()

ZingTouch est une bibliothèque JavaScript capable de détecter diverses gestes tactiles et de gérera également des événements de la souris. Il est fourni pour vous dans le / public / lib / Dossier, comme nous l'utilisons pour contrôler nos cadrans. Vous trouverez ci-dessous la mise en œuvre du contrôle gauche; Vous devrez vous répliquer et modifier de l'autre côté. 

 Régionleft.Bind (Targetleft, 'Tourner', fonction (E) {
  si (e.detail.distancefromlast & lt; 0) {
  --horizontal;
  } autre {
  ++ horizontal;
  }
  anglehorizontal + = e.detail.DistanceFromLast;
  cibleLeft.style.transform = 'Tourner (' + anglehorizontal + 'deg)';
  dessiner (math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (horizontal), math.floor (prev_vertical));
  prev_horizontal = horizontal;
});

08. Implémenter les limites de cadran

Pour bloquer les lignes de passer hors écran, nous utilisons le Candraw () fonction, qui retourne un booléen. Nous transmettons la direction, soit «horizontale», soit «verticale», et la valeur de la variable horizontale ou verticale. Nous appelons cette fonction dans l'auditeur "Tourner" des deux cadrans, et seulement si "vrai" est-ce que nous incremporons l'angle et appelez le tirer() fonction. 

 Fonction Candraw (direction, valeur) {
  var max = (direction === 'horizontal')? (Canvas.Width) :( Canvas.Height);
  Si (valeur & lt; 2 || valeur & gt; max - 2) {
  retourner faux;
  }
  retourne vrai;
}

09. Évitez les problèmes de cadran

Avec les limites que nous venons de mettre en œuvre, il est possible que le cadran puisse être bloqué à une extrémité si la valeur dépasse la limite, même par un point décimal. Pour éviter cette situation, nous devrions gérer le cas où Candraw () est faux et réinitialisez la valeur à un précédemment valide, comme indiqué ici pour le contrôleur horizontal: 

 Si (Candraw ("horizontal", horizontal)) {
  anglehorizontal + = e.detail.DistanceFromLast;
  cibleLeft.style.transform = 'Tourner (' + anglehorizontal + 'deg)';
  dessiner (math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (horizontal), math.floor (prev_vertical));
  prev_horizontal = horizontal;
} autre {
  horizontal = prev_horizontal;
}

10. Obtenez la planche de dessin sur votre tablette

Il est toujours recommandé de tester sur vos appareils ciblés le plus tôt possible. Notre application est maintenant de bonne forme et peut répondre aux événements tactiles. Suivez les étapes sur Accédez à Localhost à distance pour obtenir la carte de dessin sur votre tablette.

Ensuite, nous utiliserons Safari et le menu Développer pour inspecter la demande sur un iPad. Pour les appareils Android, utilisez Chrome: // Inspecter .

11. Test de l'accéléromètre

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

[dix] [dix]
Test de l'accéléromètre dans Safari [Cliquez sur l'icône pour l'agrandir]
[dix]

Connectez votre tablette à votre ordinateur via USB et inspectez l'application à l'aide des outils de développement.

Avec le code ci-dessous en place, vous devriez être capable de voir les différentes valeurs d'accélération, lorsque vous déplacez votre appareil. Afin de réinitialiser la toile, nous avons décidé d'envisager une accélération sur l'axe X sur 5 et diminuer lentement l'opacité ( effacer ). 

 var effassement = 1; / * Définir comme une variable globale * /
fenêtre.addeventlistener ('DeviceMotion', fonction (événement) {
  console.log ('accélération ::', événement.accente);
  if (event.acceleration.x & gt; 5) {
  effacement - = math.abs (événement.acceleration.x / 100);
  console.log ('ERASe ::', effacez);
  }
});

12. secouer à supprimer

Nous avons vu à l'étape précédente comment vérifier le mouvement et l'accélération. Nous devons maintenant appeler FadeDrawing () quand notre condition est remplie. Dans ce cas, nous redessinons une copie exacte de la toile à une opacité différente.

Réinitialiser le globalalpha à 1 dans tirer() et mettre le globalcompositeOpération Retour à la source-over. 

 Fonction FadeDrawing () {
  Si (effacez & lt; 0) {
  context.clearrect (0, 0, canvas.width, canvas.height);
  effacement = 1;
  revenir;
  }
  contexte.globalalpha = effacement;
  context.globalcompositeOperation = 'copie';
  context.drawimage (toile, 0, 0);
}

13. Faites-le ressembler à la vraie affaire

Our application with shake-to-delete functionality

[dix] [dix]
Notre application avec fonctionnalité Shake-to-Supprimer

Jusqu'à présent, notre application a l'air assez fade et plate. Afin de lui donner une profondeur, nous ajouterons une couleur de cadre, une ombre à l'intérieur du cadre et un peu de volume sur les cadrans. Le CSS pour les ombres à cadran est déjà fourni, mais vous devrez ajouter ces deux éléments à la fin du corps.

Complétez le CSS pour les éléments suggéré ici: 

 & lt; Div ID = "Balishadowhorizontal" Classe = "Shadow" & GT; & lt; / div et gt;
& lt; Div ID = "DIALShadowvertical" Classe = "Shadow" & GT; & LT; / Div & GT; 
 Corps {
  Contexte: # 09CBF7;
}
#sketch {
  Box-Shadow: 2px 2px 10px RGBA (0, 0, 0, 0,25) INSET;
}

14. Utilisez WebSockets

Au début de ce tutoriel, nous avons brièvement mentionné à l'aide de WebSockets via notre serveur de nœuds. Maintenant que vous avez un tampon de dessin autonome pour tablette, nous examinerons également la fabrication de votre téléphone. Cependant, les téléphones peuvent être trop petits pour afficher à la fois l'écran et les commandes. Nous utilisons donc des sockets pour communiquer entre le téléphone et l'écran de l'ordinateur.

15. Détecter la taille de l'appareil

Dans le fichier HTML principal, remplacer Main.js avec extra.js . Ce dernier contient tout ce que nous avons fait jusqu'à présent, avec des modifications pour gérer les périphériques et les sockets, ce que nous inspecterons dans les étapes suivantes. Jettes un coup d'oeil à DetectDevice () - Cette méthode est maintenant appelée à la charge au lieu de init () et décidera quel 'mode' à gérer pour l'application.

Vous trouverez ci-dessous le cas particulier d'un téléphone qui a été détecté: 

 Si (window.innerwidth & lt; 768) {
  socket = io.connect ();
  document.QuerySelector ('# croquis'). Supprimer ();
  var cadrics = document.QuerySelectorallall ('. Composez, .shadow');
  [] .Onforach.call (cadran, fonction (article) {
  item.classlist.add ('Big');
  });
  iscontrols = true;
  Framemarginvertical = 62;
  socket.emit ('prête', {'prêt': 'contrôles'});
}

16. Du téléphone à l'ordinateur

From phone to computer, remotely drawing through sockets

[dix] [dix]
Du téléphone à l'ordinateur, dessinez à distance dans les prises

Tout au long de extra.js Vous remarquerez des bits de code tels que socket.emit () ou socket.on () . Ce sont les émetteurs et les auditeurs pour nos instances de contrôle (téléphone) et d'écran (ordinateur). Chaque événement émis doit parcourir le serveur pour être ré-distribué à toutes les prises connectées. Dans serveur \ index.js Ajoutez quelques auditeurs de plus dans la fonction "Connexion" et redémarrez le serveur de nœuds. 

 socket.on ('Draw', fonction (données) {
  io.sockets.emit ('Draw', données);
});
socket.on ('effacer', fonction (données) {
  io.sockets.emit ("effacer", données);
});
socket.on ('réglframe', fonction (données) {
  ScreenWidth = Data.ScreenWidth;
  ScreenHeight = Data.ScreenHeight;
  io.sockets.emit ('ajuster', données);
});

17. Fixez l'orientation téléphonique

Visitez le localhost sur votre ordinateur, tout en accédant à distance à distance avec votre téléphone (comme vous l'avez déjà fait de votre tablette). Vous devriez maintenant voir une ligne étant dessinée sur votre écran lorsque vous tournez les cadrans sur votre téléphone. Cependant, vous remarquerez que les cadrans ne correspondent pas correctement si le téléphone est en mode portrait.

Nous pouvons résoudre ce problème avec certains CSS: 

 @media écran et (orientation: portrait) {
  .dial.big # dialivernal, .shadow.big # DIALShadowvertical {
  Droite: Calc (50% - 75px);
  bas: 20px;
  TOP: AUTO;
  }
  .dial.big # dialhorizontal, .shadow.big # DIALSHADOWHORIZONTAL {
  Gauche: Calc (50% - 75px);
  TOP: 20PX;
  }
}

18. rendre le jouet plus réaliste

Touching your tablet leaves some temporary fingerprints

[dix] [dix]
Toucher votre comprimé laisse des empreintes digitales temporaires

Revenons à notre version de la tablette. Malheureusement, l'API de vibration n'est pas disponible sur iOS. Nous ne pouvons donc pas mettre en œuvre les commentaires haptiques lorsque les cadrans sont tournés. Dans le jouet original, cependant, vous pouvez laisser des marques d'empreintes digitales noires temporaires sur l'écran si vous l'avez poussée. Nous pouvons ajouter un événement tactile sur l'appareil pour reproduire cette fonctionnalité.

Mettre ces auditeurs dans init () et explorer les fonctions qu'ils appellent: 

 Si (Type === 'tout') {
  Canvas.addeventListener ('TouchStart', fonction (E) {
  e.preventdefault ();
  DrawfingerPrint (E.Layerx, E.Layery, True);
  });
  canvas.addeventListener ('touffend', fonction (e) {
  Hidefingerprint (E.Layerx, E.Layery);
  });
}

19. Enregistrer une copie de la toile

Dans le DrawfingerPrint () Méthode, avant de faire autre chose, nous enregistrons une copie de l'état actuel de la toile à un élément caché que nous utilisons pour restaurer notre dessin lors de la suppression de l'impression. Cela ne se produit que sur la première touche, et non sur les appels ultérieurs qui augmentent la taille de l'impression toutes les 100 ms. 

 Fonction DrawfingerPrint (XPOS, YPOS, Savecanvas) {
  / * Fonction partielle, se référer à extra.js * /
  Si (Savecanvas) {
  hiddencanvas = document.createeelement ("Canvas");
  var hiddencontext = hiddencanvas.getcontext ('2d');
  hiddencanvas.width = Canvas.Width;
  hiddencanvas.height = Canvas.Height;
  hiddencontext.drawimage (toile, 0, 0);
  }
}

20. Exécutez l'application hors ligne

Vous pouvez maintenant rendre l'application vraiment autonome en le sauvegardant sur votre tablette comme application d'écran d'accueil. Nous ne pourrons pas faire la même chose pour le téléphone, car il nécessite une connexion au serveur. Dans /Publique , localisez le fichier nommé croquis.appCache et remplacez toutes les instances de «localhost» par votre adresse IP.

Maintenant, modifiez le HTML à lire comme suit: 

 & lt; html lang = "fr" manifeste = "sketch.appCache" & gt;

21. Enregistrez l'application

Visitez maintenant l'application sur votre tablette et sélectionnez l'option Ajouter à l'écran d'accueil. Une nouvelle icône doit apparaître sur votre bureau. Ouvrez-la une fois tout en étant connecté à votre localhost à distance. Le cache manifeste que nous avons configuré auparavant téléchargera tous les fichiers nécessaires pour une utilisation hors connexion en arrière-plan. Tournez le wi-fi et ouvrez l'application à nouveau. VOILÀ!

Cet article est apparu à l'origine dans Magazine de concepteur web numéro 263. Achetez-le ici .

Lire la suite:

  • 15 API Web que vous n'avez jamais entendu parler de
  • Un guide de débutant pour concevoir des animations d'interface
  • Un guide pour écrire mieux CSS
[dix] [dix]
[dix]

Comment - Most Popular Articles

Comment dessiner un lion

Comment Sep 11, 2025

[DIX] BIENVENUE DANS NOTRE Guide sur la Façon de Dessiner Un Lion. Le Roi de la Jungle, Le Lion en Est Nations Unies, Sinon Les Félins Les Plus importateu..

3 Techniques essentielles de rétopologie ZBrush

Comment Sep 11, 2025

[DIX] [DIX] [DIX] [dix] (Crédit d'image: Glen Southern) [DIX] LA RÉTOPOLOGIE DE ZB..

Créer des styles et des mises en page spécifiques à la quantité spécifique à CSS

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] Dans ce tutoriel, nous examinerons les moyens de modifier les styles d'élém..

Commencez avec diffuse

Comment Sep 11, 2025

L'un des moyens les plus simples d'apporter une certaine vie supplémentaire à n'importe quel morceau de Art 3D est d'ajouter de la couleur et de la texture. Il existe une var..

Faites des effets de typographie 3D interactifs

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] La typographie a toujours joué un rôle majeur dans l'arsenal d'outils de to..

19 conseils pour l'art grand poseur

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] Page 1 sur 2: Page 1 ..

Comment commencer avec Sass

Comment Sep 11, 2025

[dix] [dix] [dix] [dix] Toupet est un outil puissant qui apporte de nombreuse..

Comment concevoir une promotion pour une marque imaginaire

Comment Sep 11, 2025

Lors de la conception d'une marque, qu'il s'agisse d'une démarrage établie ou de démarrage que vous prenez le fil créatif sur, la cohérence de tous les points tactiles est la clé. ..

Catégories