你可能不知道的前端算法之文字避让(inMap)


Posted in Javascript onJanuary 12, 2018

前言

inMap 是一款基于 canvas 的大数据可视化库,专注于大数据方向点线面的可视化效果展示。目前支持散点、围栏、热力、网格、聚合等方式;致力于让大数据可视化变得简单易用。

GitHub 地址:https://github.com/TalkingData/inmap(本地下载)

文档地址:http://inmap.talkingdata.com/

在地理信息可视化中,我们经常会遇到在地图上标记文字的需求,下面展示的是某流行 chart 图表框架的效果:

你可能不知道的前端算法之文字避让(inMap)

要显示的文字空间不够时,就会造成文字重叠显示混乱,用户体验很不友好。

怎么解决这个问题呢?我们采用文字避让算法,解决这种坑爹的问题。

下面展示的是 inMap 文字避让效果:

你可能不知道的前端算法之文字避让(inMap)

文字标注算法是 GIS 中最复杂的问题之一(属于 NP 复杂度问题,所以通常不能找到最优解,只能找到较优解)。

inMap 避让算法采用的是四分位模型算法,接下来手把手教你写避让算法,老司机带你装逼带你飞。

准备数据

inMap 接收的是经纬度数据,需要把它映射到 canvas 的像素坐标,这就用到了墨卡托转换,墨卡托算法很复杂,以后我们会有单独的一篇文章来讲讲他的原理。经过转换,你得到的数据应该是这样的:

[
 {
 "name": "海门",//要显示的文字
 "lng": 121.15,
 "lat": 31.89,
 "count": 7,
 "pixel": { //像素坐标
  "x": 968,
  "y": 736
 }
 },
 {
 "name": "鄂尔多斯",
 "lng": 109.781327,
 "lat": 39.608266,
 "count": 5,
 "pixel": {
  "x": 659,
  "y": 478
 }
 },
...
]

好了,我们得到转换后的像素坐标数据(x、y),就可以做下面的事情了。

求出每段文字矩形的实际大小

measureText() 是 canvas 内置的方法,返回字体宽度的像素单位:

let ctx = this.container.getContext('2d'); // canvas 上下文
let width= ctx.measureText(name).width;

我们通过 measureText 得到每个文字的宽度,canvas 并没有直接获取文字的方法,那文字的高度如何的得到呢?

我们通过反复测试发现 canvas 的 font 等于 “13px Arial” 字体(别的字体不敢保证)的时候,文字的高度大概是 fontSize 的 1.1 倍。

所以代码如下:

let fontSize = parseInt(ctx.font);
let height = fontSize * 1.1;

文字的宽度和高度得到后,我们就可以创建文字矩形的坐标系了。

创建四分位模型

你可能不知道的前端算法之文字避让(inMap)

所谓四分位模型,每一个标记点都有上下左右四个放文字的位子,如果左边放不下,那就放右边试试,还不行就放到下面试试,以此类推,原理就这么简单,哈哈。

创建右侧虚拟矩形坐标描述:

你可能不知道的前端算法之文字避让(inMap)

右侧虚拟矩形坐标的描述把圆点也包含在内了,是为了防止文字和圆点重叠。

在计算虚拟矩形的高度时有些坑,圆点大小不是固定的,是根据用户动态配置的,圆点的直径可能大于文字的高度,我们就设定虚拟矩形的高度永远都是最大的那个,需要做一些特殊处理。

代码如下:

_getLeftAnchor() {
  let x = this.center.x - this.radius - this.textReact.width,
    y = this.center.y - this.textReact.height / 2,
    diam = this.radius * 2,
    maxH = diam > this.textReact.height ? diam : this.textReact.height; //矩形的高度
  return {
    x,
    y,
    minX: x,
    maxX: this.center.x + this.radius,
    minY: this.center.y - maxH / 2,
    maxY: this.center.y + maxH / 2
  };
}

以此类推,描述下面、左面、上面的虚拟矩形坐标。

判断碰撞

判断两个矩形是否覆盖相交,根据矩形的 minX,maxX,minY,maxY 判断相交,原理比较简单,代码如下:

/**
 * 判断分位是否相交
 * @param {*} target 
 */ 
isAnchorMeet(target) {
  let react = this.getCurrentRect(),
    targetReact = target.getCurrentRect();
  if ((react.minX < targetReact.maxX) && (targetReact.minX < react.maxX) &&
    (react.minY < targetReact.maxY) && (targetReact.minY < react.maxY)) {
    return true;
  }
  return false;
}

创建虚拟文字集合对象

let labels = pixels.map((val) => {
  let radius = val.pixel.radius + this.style.normal.borderWidth; //圆点半径
  return new Label(val.pixel.x, val.pixel.y, radius, fontSize, byteWidth, val.name);
});

递归遍历虚拟文字集合、判断是否与其他相交,如果有相交就移动当前文字位子,直到不相交为止。当找不到合适位置时,就选择隐藏当前文字。

代码如下:

do {
  var meet = false; //本轮是否有相交
  for (let i = 0; i < labels.length; i++) {
    let temp = labels[i];
    for (let j = 0; j < labels.length; j++) {
      if (i != j && temp.show && temp.isAnchorMeet(labels[j])) {
        temp.next();
        meet = true;
        break;
      }
    }
  }
} while (meet);

绘画文字

labels.forEach(function (item) {
  if (item.show) { //是否显示
    let pixel = item.getCurrentRect();
    ctx.beginPath();
    ctx.fillText(item.text, pixel.x, pixel.y);
    ctx.fill();
  }
});

文字避让算法到目前介绍完了,对应的 inMap 文件地址为https://github.com/TalkingData/inmap/blob/master/src/worker/helper/Label.js,接下来还会继续给大家分享干货。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
浅析js中取绝对值的2种方法
Jul 09 Javascript
JavaScript Math.ceil() 函数使用介绍
Dec 11 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
JS代码实现table数据分页效果
May 26 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
JavaScrip关于创建常量的知识点
Dec 07 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
浅谈js获取ModelAndView值的问题
Mar 28 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 #Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 #Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 #Javascript
如何去除vue项目中的#及其ie9兼容性
Jan 11 #Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 #Javascript
详解VUE2.X过滤器的使用方法
Jan 11 #Javascript
Vuex提升学习篇
Jan 11 #Javascript
You might like
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
[原创]php集成安装包wampserver修改密码后phpmyadmin无法登陆的解决方法
2016/11/23 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
Jquery 表单取值赋值的一些基本操作
2009/10/11 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
Node.js中require的工作原理浅析
2014/06/24 Javascript
在JavaScript中操作时间之getMonth()方法的使用
2015/06/10 Javascript
VUEJS实战之利用laypage插件实现分页(3)
2016/06/13 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
[01:10:49]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
Python装饰器的函数式编程详解
2015/02/27 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
将python代码和注释分离的方法
2018/04/21 Python
Python中文编码知识点
2019/02/18 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
Python PyQt5整理介绍
2020/04/01 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
PyInstaller的安装和使用的详细步骤
2020/06/02 Python
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
标记环介质访问控制协议
2016/03/27 面试题
面试自我介绍演讲稿
2014/04/29 职场文书
投标邀请书范本
2015/02/02 职场文书
扬州个园导游词
2015/02/06 职场文书
2015年实习单位评语
2015/03/25 职场文书
涨价通知
2015/04/23 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
学校教学管理制度
2015/08/06 职场文书