Coins d’un papierNouveau
L’éditeur des 4 coins d’un papier : quand une photo est mal redressée (« Mal redressée ? »), tu fais glisser chaque coin sur celui du papier, et la photo est remise à plat avec tes coins. Loupe au doigt, clavier, aperçu redressé ; des coins qui se croisent sont refusés. JavaScript maison, sans bibliothèque. Utilisé par le scanner et la fiche d’un papier de Gestion ; réutilisable (visionneuse, Wallet).
Essayer
C’est le composant réel, sur une carte fictive dessinée dans la page (rien ne part sur le réseau). Les coins proposés sont volontairement mal placés (un trapèze) : remets-les sur ceux de la carte, puis « ✓ Redresser ».
Installer
aubui-coins.js (≈ 17 Ko non compressé, ≈ 6 Ko en gzip) se charge à la demande : le scanner le charge lui-même (AubuiScanner.coins()), une page peut l’ajouter avec <script src="https://ui.aubota.xyz/js/aubui-coins.js?v=…"> (même ?v= que aubui.js, Aubui.build). Le style est dans aubui.full.css ; sinon le composant charge components/coins.css tout seul.
API window.AubuiCoins
var e = AubuiCoins.ouvrir({
image: blob, // URL, Blob, <img> ou <canvas> : la photo à redresser
coins: [[0.1, 0.1], [0.9, 0.12], [0.88, 0.9], [0.1, 0.88]], // 0-1 de l’image : haut-gauche, haut-droit, bas-droit, bas-gauche (facultatif)
proposer: function (img) { return coins || null; }, // facultatif : une proposition (ex. AubuiScanner._.detecter)
titre: 'Place les 4 coins sur ceux du papier', texteOk: '✓ Redresser', declencheur: bouton,
surValider: function (coins, infos) { // infos : { proposes (les coins de départ), canvas (l’image redressée, si lisible) }
return fetch(…); // une Promise : l’éditeur reste ouvert (avec le message) si elle échoue
},
surFermeture: function (raison) {} // valide · annuler · echap · remplace · api
});
e.coins(); // les coins du moment
e.fermer();
AubuiCoins.redresser(canvas, coins, 2400); // → <canvas> remis à plat (homographie, bilinéaire), ou null (image d’un autre site)| Élément | Rôle |
|---|---|
| Poignées | 4 boutons ronds (cible de 44 px) : on attrape le plus proche même un peu à côté ; une loupe (× 2,5, avec une croix) montre le coin de près pendant qu’on le fait glisser. |
| Coins croisés | Si les coins ne forment plus un quadrilatère dans l’ordre (haut gauche, haut droit, bas droit, bas gauche), le tracé passe en rouge, un message le dit et « Redresser » est désactivé. |
| Aperçu | La remise à plat en petit, recalculée à chaque mouvement (si l’image est lisible : même site, Blob, canvas). |
| Classes | .aub-coins · __tete · __fermer · __scene · __img · __trace · __poignee · __loupe · __bas · __aide · __apercu · __actions ; .is-croise ; html.aub-coins-ouvert. |
| Évènement | aubui:coins sur document, detail.etape : ouvert (coins) · change (i, coins) · valide (coins) · ferme (raison). |
| Apprentissage (Gestion) | L’écart entre les coins proposés et les tiens, en coordonnées 0-1, est retenu par AIA (jamais l’image) : au bout de 3 corrections pareilles (ou d’une correction d’un professeur), la reconstruction essaie d’elle-même le contour corrigé. |
role="dialog"+aria-modal; le focus reste dans l’éditeur (Tab passe d’un coin à l’autre puis aux boutons), Échap ferme et rend le focus au bouton d’origine.- Chaque coin est un bouton nommé (« Coin haut gauche »…) : ← → ↑ ↓ le déplacent d’1 px (Maj : 10 px), Entrée valide ; sa position est donnée en % (
aria-valuetext). - Les consignes et les erreurs sont lues (
aria-live="polite") ; « réduire les animations » est respecté.