Detecção de colisão de texto em tela e método de afinamento

O afinamento de texto é geralmente usado ao fazer necessidades relacionadas ao mapa. Eu apenas implementei esse método ao implementar uma função para o mecanismo de mapa da empresa. Simplifiquei-o aqui e operei-o em um Canvas comum.

Calcule o intervalo ocupado pelo texto no canvas

 // Calcula a largura necessária para o texto var p = { x: 10, y: 10, name: test text}; coordenada y da prancheta var maxX = medida.largura + px; // Encontre a coordenada y máxima ocupada pelo texto na prancheta do canvas // O Canvas só pode calcular a largura do texto, mas não a altura do texto. Portanto, basta usar a largura do texto dividida pelo número de texto para calcular um valor aproximado var maxY = Measure.width / p.name.length + py;var min = { x: px, y: py };var max = { x: maxX, y: maxY }; // limites é o intervalo ocupado pelo texto na tela. // Ao tomar as coordenadas do ponto como intervalo mínimo, será mais preciso definir textAlign e textBaseline da seguinte maneira. // Se exibidos em locais diferentes, os pontos máximo e mínimo do intervalo também precisam ser ajustados // ctx.textAlign = left; // ctx.textBaseline = top;var limites = new Bounds(min, max);

Objeto de intervalo de limites

 /** * Definir objetos de intervalo */function Bounds(min, max) { this.min = min; this.max = max;}/** * Determinar se o intervalo cruza com outro intervalo */Bounds.prototype.intersects = função (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 <= return xIntersects && yIntersects;};

Detecção

 // Antes de cada desenho, realiza a detecção de interseção de intervalo com o texto desenhado // Se uma interseção for encontrada, desista de desenhar o texto atual, caso contrário, desenhe e armazene a lista de texto desenhado for (var index in _textBounds) { // Faça um loop em todos os o intervalo de texto desenhado é testado para ver se ele cruza com o intervalo de texto atual. Se houver uma interseção, significa que ele colidirá e o texto será ignorado. ) { retornar; }}_textBounds.push(bounds);ctx.fillStyle = red;ctx.textAlign = left;ctx.textBaseline = top;ctx.fillText(p.name, px, py);

Endereço de exemplo: exemplo

Para obter detalhes, você pode visualizar o código completo: Endereço Github

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.