Método de adelgazamiento y detección de colisiones de texto en lienzo

La reducción de texto se usa generalmente cuando se realizan necesidades relacionadas con mapas. Solo implementé este método cuando implementé una función para el motor de mapas de la empresa. Lo he simplificado aquí y no introduce el concepto de mapa al operarlo en un Canvas normal.

Calcular el rango ocupado por el texto en el lienzo

 // Calcula el ancho requerido para el texto var p = { x: 10, y: 10, nombre: texto de prueba}; var medida = ctx.measureText(p.name); tablero de dibujo coordenada y var maxX = medida.ancho + px; // Encuentre la coordenada y máxima ocupada por el texto en el tablero de dibujo del lienzo // El lienzo solo puede calcular el ancho del texto, pero no la altura del texto. Así que simplemente use el ancho del texto dividido por la cantidad de texto para calcular un var maxY = medida.ancho / p.name.length + py;var min = { x: px, y: py };var max = { x: maxX, y: maxY }; // límites es el rango ocupado por el texto en el lienzo. // Al tomar las coordenadas de los puntos como rango mínimo, será más preciso configurar textAlign y textBaseline de la siguiente manera. // Si se muestran en diferentes ubicaciones, los puntos máximo y mínimo del rango también deben ajustarse // ctx.textAlign = left; // ctx.textBaseline = top;var limites = new Bounds(min, max);

Objeto de rango de límites

 /** * Definir objetos de rango */function Bounds(min, max) { this.min = min; this.max = max;}/** * Determinar si el rango se cruza con otro rango */Bounds.prototype.intersects = función(límites) { var min = this.min, max = this.max, min2 = límites.min, max2 = límites.max, xIntersects = max2.x >= min.x && min2.x <= max.x, yIntersects = max2.y >= min.y && min2.y <= max.y return xIntersects && yIntersects;};

Detección

 // Antes de cada dibujo, realice la detección de intersección de rango con el texto dibujado // Si se encuentra una intersección, deje de dibujar el texto actual; de lo contrario, dibuje y almacene la lista de texto dibujado para (var index in _textBounds) { // Repita todo el rango de texto dibujado se prueba para ver si se cruza con el rango de texto actual. Si hay una intersección, significa que chocará y el texto se omitirá var pointBounds = _textBounds[index] if (pointBounds.intersects(bounds) ) { devolver; }}_textBounds.push(límites);ctx.fillStyle = rojo;ctx.textAlign = izquierda;ctx.textBaseline = arriba;ctx.fillText(p.name, px, py);

Dirección de ejemplo: ejemplo

Para más detalles, puede ver el código completo: Dirección de Github

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.