Метод обнаружения и прореживания текста на холсте

Прореживание текста обычно используется при создании потребностей, связанных с картой. Я реализовал этот метод только при реализации функции для картографического движка компании. Я упростил его здесь и использую его на обычном холсте.

Вычислить диапазон, занимаемый текстом на холсте

 // Вычисляем ширину, необходимую для текста var p = { x: 10, y: 10, name: test text}; var Measure = ctx.measureText(p.name); // Находим максимальное пространство, занимаемое текстом на холсте; Координата y доски для рисования var maxX = Measure.width + px // Находим максимальную координату y, занимаемую текстом на доске для рисования холста // Canvas может вычислять только ширину текста, но не высоту текста. Поэтому просто используйте ширину текста, разделенную на количество текста, чтобы вычислить приблизительное значение var maxY = Measure.width / p.name.length + py;var min = { x: px, y: py };var max = { x: maxX, y: maxY } // граница — это диапазон, занимаемый текстом на холсте. // Принимая координаты точки за минимальный диапазон, точнее будет установить textAlign и textBaseline следующим образом. // Если они отображаются в разных местах, также необходимо настроить максимальную и минимальную точки диапазона // ctx.textAlign = left; // ctx.textBaseline = top;varbounds = new Bounds(min, max);

Объект диапазона границ

 /** * Определить объекты диапазона */function Bounds(min, max) { this.min = min; this.max = max;}/** * Определить, пересекается ли диапазон с другим диапазоном */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; return xIntersects && yIntersects;};

Обнаружение

 // Перед каждым рисованием выполнять обнаружение пересечения диапазона с нарисованным текстом // Если пересечение найдено, отказаться от рисования текущего текста, в противном случае нарисовать и сохранить список нарисованного текста for (индекс var в _textBounds) { // Зациклить все нарисованный текстовый диапазон проверяется, пересекается ли он с текущим текстовым диапазоном. Если есть пересечение, это означает, что оно будет конфликтовать, и текст будет пропущен. var pointBounds = _textBounds[index]; if (pointBounds.intersects(bounds) ) { возвращаться; }}_textBounds.push(bounds);ctx.fillStyle = red;ctx.textAlign = left;ctx.textBaseline = top;ctx.fillText(p.name, px, py);

Пример адреса: пример

Для получения подробной информации вы можете просмотреть полный код: Адрес Github.

Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.