Comment implémenter la disposition adaptative de la position de l'axe y dans l'annotation Web?

Explication détaillée de l'algorithme adaptatif de la position de l'axe y pour l'annotation de la page Web

Cet article examine comment créer une fonction d'annotation Web similaire aux documents de mots, en se concentrant sur la résolution du problème des commentaires qui se chevauchent et de la réalisation d'une disposition adaptative de la position de l'axe y de l'annotation. Idéalement, les annotations devraient être étroitement disposées pour éviter les chevauchements, tout en maintenant un espacement raisonnable entre les annotations.

Le défi de base consiste à concevoir un algorithme qui calcule automatiquement sa position de l'axe y lors de l'ajout de nouvelles annotations. Une solution efficace consiste à utiliser le positionnement absolu et à combiner les structures de données et les algorithmes pour gérer les emplacements d'annotation.

Structure des données:

Nous utilisons un tableau pour stocker les informations pour chaque annotation, chaque élément contenant top (position supérieure initiale) et height (hauteur). Par exemple:

 [
  {en haut: 100, hauteur: 200},
  {en haut: 800, hauteur: 200},
  {en haut: 820, hauteur: 200},
  {en haut: 1020, hauteur: 200},
]]

Algorithme adaptatif:

Nous utilisons un algorithme similaire à la disposition du débit de cascade, utilisons la méthode reduce pour itérer le tableau et calculons la position finale de l'axe y de chaque annotation ( currentTop ). Le noyau de l'algorithme est de comparer la valeur top initiale de l'annotation actuelle avec la position inférieure de l'annotation précédente, et de sélectionner une valeur plus grande en tant que currentTop final de l'annotation actuelle, évitant ainsi le chevauchement.

 const arr = [
  {en haut: 100, hauteur: 200},
  {en haut: 800, hauteur: 200},
  {en haut: 820, hauteur: 200},
  {en haut: 1020, hauteur: 200},
  {en haut: 1430, hauteur: 180},
]]

arr.reduce ((s, n, i) => {
  n.currentTop = math.max (n.top, (s.currentTop || s.top) s.height);
  retour n;
});

console.log (arr);

Math.max(n.top, (s.currentTop || s.top) s.height) Cette ligne de code est le cœur de l'algorithme. s.currentTop || s.top gère le cas de la première annotation.

application:

La valeur currentTop calculée par cet algorithme peut être appliquée au style CSS de l'élément d'annotation, tel que top: ${currentTop}px; , réalisant ainsi la disposition adaptative de l'annotation, résolvant efficacement le problème de chevauchement de l'annotation et réalisant un effet similaire à l'espacement d'annotation des documents de mots. Cet algorithme garantit que les annotations sont organisées étroitement, tout en évitant l'obstruction mutuelle, réalisant une expérience d'annotation Web en douceur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!