Methode zur Erkennung und Ausdünnung von Canvas-Textkollisionen

Textausdünnung wird im Allgemeinen bei der Erstellung kartenbezogener Anforderungen verwendet. Ich habe diese Methode auch bei der Implementierung einer Funktion für die Karten-Engine des Unternehmens implementiert. Ich habe sie hier vereinfacht und das Konzept der Karte nicht eingeführt

Berechnen Sie den Bereich, den Text auf der Leinwand einnimmt

 // Berechnen Sie die für den Text erforderliche Breite. var p = { x: 10, y: 10, name: test text}; varmeasure = ctx.measureText(p.name); Y-Koordinate des Zeichenbretts var maxX = Measure.width + px; // Finden Sie die maximale Y-Koordinate, die der Text im Zeichenbrett der Leinwand einnimmt. // Das Zeichenbrett kann nur die Breite des Textes berechnen, nicht jedoch die Höhe des Textes. Verwenden Sie also einfach die Breite des Textes dividiert durch die Anzahl des Textes, um einen ungefähren Wert zu berechnen. x: maxX, y: maxY }; // Bounds ist der vom Text im Canvas eingenommene Bereich. // Wenn Punktkoordinaten als Mindestbereich verwendet werden, ist es genauer, textAlign und textBaseline wie folgt festzulegen. // Bei Anzeige an verschiedenen Orten müssen auch die maximalen und minimalen Punkte des Bereichs angepasst werden // ctx.textAlign = left // ctx.textBaseline = top;varbounds = new Bounds(min, max);

Begrenzt das Bereichsobjekt

 /** * Bereichsobjekte definieren */function Bounds(min, max) { this.min = min; this.max = max;}/** * Bestimmen Sie, ob sich der Bereich mit einem anderen Bereich schneidet */Bounds.prototype.intersects = function(bounds) { var min = this.min, max = this.max, min2 =bounds.min, max2 =bounds.max, xIntersects = max2.x >= min.x && min2.x <= max.x, yIntersects = max2.y >= min.y && min2.y <= max.y && yIntersects;};

Erkennung

 // Führen Sie vor jeder Zeichnung eine Bereichsschnittpunkterkennung mit dem gezeichneten Text durch. // Wenn ein Schnittpunkt gefunden wird, geben Sie das Zeichnen des aktuellen Textes auf, andernfalls zeichnen und speichern Sie die Liste der gezeichneten Texte für (var index in _textBounds) { // Schleife alle Der gezeichnete Textbereich wird getestet, um zu sehen, ob er sich mit dem aktuellen Textbereich schneidet. Wenn es einen Schnittpunkt gibt, bedeutet dies, dass er kollidiert, und der Text wird übersprungen. ) { zurückkehren; }}_textBounds.push(bounds);ctx.fillStyle = red;ctx.textAlign = left;ctx.textBaseline = top;ctx.fillText(p.name, px, py);

Beispieladresse: Beispiel

Weitere Informationen finden Sie im vollständigen Code: Github-Adresse

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.