Détection de collision de texte sur toile et méthode d'amincissement

L'amincissement du texte est généralement utilisé lors de la création de besoins liés à la carte. Je n'ai implémenté cette méthode que lors de l'implémentation d'une fonction pour le moteur de carte de l'entreprise. Je l'ai simplifiée ici et je l'utilise sur un canevas ordinaire.

Calculer la plage occupée par le texte dans le canevas

 // Calculer la largeur requise pour le texte var p = { x: 10, y: 10, name: test text}; var Measure = ctx.measureText(p.name); // Trouver l'espace maximum occupé par le texte dans le canevas planche à dessin y coordonnée var maxX = Measure.width + px; // Trouver la coordonnée y maximale occupée par le texte dans la planche à dessin du canevas // Canvas ne peut calculer que la largeur du texte, mais pas la hauteur du texte. Utilisez donc simplement la largeur du texte divisée par le nombre de texte pour calculer une approximation var maxY = mesure.width / p.name.length + py;var min = { x: px, y: py };var max = { x: maxX, y: maxY }; // les limites sont la plage occupée par le texte dans le canevas. // Lorsque vous prenez les coordonnées du point comme plage minimale, il sera plus précis de définir textAlign et textBaseline de la manière suivante. // S'ils sont affichés à différents emplacements, les points maximum et minimum de la plage doivent également être ajustés // ctx.textAlign = left; // ctx.textBaseline = top;varbounds = new Bounds(min, max);

Objet de plage de limites

 /** * Définir les objets de plage */function Bounds(min, max) { this.min = min; this.max = max;}/** * Déterminer si la plage croise une autre plage */Bounds.prototype.intersects = fonction (limites) { var min = this.min, max = this.max, min2 = limites.min, max2 = limites.max, xIntersects = max2.x >= min.x && min2.x <= max.x, yIntersects = max2.y >= min.y && min2.y <= max.y; return xIntersects && yIntersects;};

Détection

 // Avant chaque dessin, effectuez une détection d'intersection de plage avec le texte dessiné // Si une intersection est trouvée, abandonnez le dessin du texte courant, sinon dessinez et stockez la liste des textes dessinés pour (var index in _textBounds) { // Bouclez tous les la plage de texte dessinée est testée pour voir si elle croise la plage de texte actuelle. S'il y a une intersection, cela signifie qu'elle entrera en collision et le texte est ignoré var pointBounds = _textBounds[index]; ) { retour; }}_textBounds.push(bounds);ctx.fillStyle = red;ctx.textAlign = left;ctx.textBaseline = top;ctx.fillText(p.name, px, py);

Exemple d'adresse : exemple

Pour plus de détails, vous pouvez consulter le code complet : Adresse Github

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.