国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

你不知道的前端算法之文字避讓

yedf / 1969人閱讀

摘要:避讓算法采用的是四分位模型算法,接下來(lái)手把手教你寫(xiě)避讓算法,老司機(jī)帶你裝逼帶你飛。創(chuàng)建四分位模型所謂四分位模型,每一個(gè)標(biāo)記點(diǎn)都有上下左右四個(gè)放文字的位子,如果左邊放不下,那就放右邊試試,還不行就放到下面試試,以此類(lèi)推,原理就這么簡(jiǎn)單,哈哈。

</>復(fù)制代碼

  1. 本文作者:TalkingData 可視化工程師李鳳祿
    編輯:Aresn

inMap 是一款基于 canvas 的大數(shù)據(jù)可視化庫(kù),專(zhuān)注于大數(shù)據(jù)方向點(diǎn)線面的可視化效果展示。目前支持散點(diǎn)、圍欄、熱力、網(wǎng)格、聚合等方式;致力于讓大數(shù)據(jù)可視化變得簡(jiǎn)單易用。

GitHub 地址:https://github.com/TalkingData/inmap

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

在地理信息可視化中,我們經(jīng)常會(huì)遇到在地圖上標(biāo)記文字的需求,下面展示的是某流行 chart 圖表框架的效果:

要顯示的文字空間不夠時(shí),就會(huì)造成文字重疊顯示混亂,用戶(hù)體驗(yàn)很不友好。

怎么解決這個(gè)問(wèn)題呢?我們采用文字避讓算法,解決這種坑爹的問(wèn)題。

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

文字標(biāo)注算法是 GIS 中最復(fù)雜的問(wèn)題之一(屬于 NP 復(fù)雜度問(wèn)題,所以通常不能找到最優(yōu)解,只能找到較優(yōu)解)。

inMap 避讓算法采用的是四分位模型算法,接下來(lái)手把手教你寫(xiě)避讓算法,老司機(jī)帶你裝逼帶你飛。

準(zhǔn)備數(shù)據(jù)

inMap 接收的是經(jīng)緯度數(shù)據(jù),需要把它映射到 canvas 的像素坐標(biāo),這就用到了墨卡托轉(zhuǎn)換,墨卡托算法很復(fù)雜,以后我們會(huì)有多帶帶的一篇文章來(lái)講講他的原理。經(jīng)過(guò)轉(zhuǎn)換,你得到的數(shù)據(jù)應(yīng)該是這樣的:

</>復(fù)制代碼

  1. [
  2. {
  3. "name": "海門(mén)",//要顯示的文字
  4. "lng": 121.15,
  5. "lat": 31.89,
  6. "count": 7,
  7. "pixel": { //像素坐標(biāo)
  8. "x": 968,
  9. "y": 736
  10. }
  11. },
  12. {
  13. "name": "鄂爾多斯",
  14. "lng": 109.781327,
  15. "lat": 39.608266,
  16. "count": 5,
  17. "pixel": {
  18. "x": 659,
  19. "y": 478
  20. }
  21. },
  22. ...
  23. ]

好了,我們得到轉(zhuǎn)換后的像素坐標(biāo)數(shù)據(jù)(x、y),就可以做下面的事情了。

求出每段文字矩形的實(shí)際大小

measureText() 是 canvas 內(nèi)置的方法,返回字體寬度的像素單位:

</>復(fù)制代碼

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

我們通過(guò) measureText 得到每個(gè)文字的寬度,canvas 并沒(méi)有直接獲取文字的方法,那文字的高度如何的得到呢?

我們通過(guò)反復(fù)測(cè)試發(fā)現(xiàn) canvas 的 font 等于 “13px Arial” 字體(別的字體不敢保證)的時(shí)候,文字的高度大概是 fontSize 的 1.1 倍。

所以代碼如下:

</>復(fù)制代碼

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

文字的寬度和高度得到后,我們就可以創(chuàng)建文字矩形的坐標(biāo)系了。

創(chuàng)建四分位模型

所謂四分位模型,每一個(gè)標(biāo)記點(diǎn)都有上下左右四個(gè)放文字的位子,如果左邊放不下,那就放右邊試試,還不行就放到下面試試,以此類(lèi)推,原理就這么簡(jiǎn)單,哈哈。

創(chuàng)建右側(cè)虛擬矩形坐標(biāo)描述:

右側(cè)虛擬矩形坐標(biāo)的描述把圓點(diǎn)也包含在內(nèi)了,是為了防止文字和圓點(diǎn)重疊。

在計(jì)算虛擬矩形的高度時(shí)有些坑,圓點(diǎn)大小不是固定的,是根據(jù)用戶(hù)動(dòng)態(tài)配置的,圓點(diǎn)的直徑可能大于文字的高度,我們就設(shè)定虛擬矩形的高度永遠(yuǎn)都是最大的那個(gè),需要做一些特殊處理。

代碼如下:

</>復(fù)制代碼

  1. _getLeftAnchor() {
  2. let x = this.center.x - this.radius - this.textReact.width,
  3. y = this.center.y - this.textReact.height / 2,
  4. diam = this.radius * 2,
  5. maxH = diam > this.textReact.height ? diam : this.textReact.height; //矩形的高度
  6. return {
  7. x,
  8. y,
  9. minX: x,
  10. maxX: this.center.x + this.radius,
  11. minY: this.center.y - maxH / 2,
  12. maxY: this.center.y + maxH / 2
  13. };
  14. }

以此類(lèi)推,描述下面、左面、上面的虛擬矩形坐標(biāo)。

判斷碰撞

判斷兩個(gè)矩形是否覆蓋相交,根據(jù)矩形的 minX,maxX,minY,maxY 判斷相交,原理比較簡(jiǎn)單,代碼如下:

</>復(fù)制代碼

  1. /**
  2. * 判斷分位是否相交
  3. * @param {*} target
  4. */
  5. isAnchorMeet(target) {
  6. let react = this.getCurrentRect(),
  7. targetReact = target.getCurrentRect();
  8. if ((react.minX < targetReact.maxX) && (targetReact.minX < react.maxX) &&
  9. (react.minY < targetReact.maxY) && (targetReact.minY < react.maxY)) {
  10. return true;
  11. }
  12. return false;
  13. }
創(chuàng)建虛擬文字集合對(duì)象

</>復(fù)制代碼

  1. let labels = pixels.map((val) => {
  2. let radius = val.pixel.radius + this.style.normal.borderWidth; //圓點(diǎn)半徑
  3. return new Label(val.pixel.x, val.pixel.y, radius, fontSize, byteWidth, val.name);
  4. });

遞歸遍歷虛擬文字集合、判斷是否與其他相交,如果有相交就移動(dòng)當(dāng)前文字位子,直到不相交為止。當(dāng)找不到合適位置時(shí),就選擇隱藏當(dāng)前文字。

代碼如下:

</>復(fù)制代碼

  1. do {
  2. var meet = false; //本輪是否有相交
  3. for (let i = 0; i < labels.length; i++) {
  4. let temp = labels[i];
  5. for (let j = 0; j < labels.length; j++) {
  6. if (i != j && temp.show && temp.isAnchorMeet(labels[j])) {
  7. temp.next();
  8. meet = true;
  9. break;
  10. }
  11. }
  12. }
  13. } while (meet);
繪畫(huà)文字

</>復(fù)制代碼

  1. labels.forEach(function (item) {
  2. if (item.show) { //是否顯示
  3. let pixel = item.getCurrentRect();
  4. ctx.beginPath();
  5. ctx.fillText(item.text, pixel.x, pixel.y);
  6. ctx.fill();
  7. }
  8. });

文字避讓算法到目前介紹完了,對(duì)應(yīng)的 inMap 文件地址為https://github.com/TalkingData/inmap/blob/master/src/worker/helper/Label.js,接下來(lái)還會(huì)繼續(xù)給大家分享干貨。

福利

分享兩位業(yè)內(nèi)大牛的前端課程:

Aresn 大神,開(kāi)源了很優(yōu)秀的前端 UI 組件庫(kù) iView,出版了《Vue.js實(shí)戰(zhàn)》一書(shū)。向大家推薦他的課程,Vue.js實(shí)戰(zhàn)系列教程,從本鏈接過(guò)去的打八折優(yōu)惠,先到先得。

Chaos WebGL 專(zhuān)家,擅長(zhǎng) web 3D 開(kāi)發(fā)。 主要有被《玩壞的地球系列課程》,很適合初學(xué)者。

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/90771.html

相關(guān)文章

  • 你不知道前端算法熱力圖實(shí)現(xiàn)

    摘要:目前支持散點(diǎn)圍欄熱力網(wǎng)格聚合等方式致力于讓大數(shù)據(jù)可視化變得簡(jiǎn)單易用。如圖表示,紅色區(qū)域表示分析要素的密度大,而藍(lán)色區(qū)域表示分析要素的密度小。實(shí)現(xiàn)熱力原理讀取每個(gè)像素的值透明度,做一個(gè)顏色映射。 本文作者:TalkingData 可視化工程師李鳳祿編輯:Aresn 歡迎加入 QQ 群參與技術(shù)討論:618308202 inMap 是一款基于 canvas 的大數(shù)據(jù)可視化庫(kù),專(zhuān)注于大數(shù)據(jù)方...

    zhaochunqi 評(píng)論0 收藏0
  • TalkingData 開(kāi)源地理信息可視化框架 inMap

    摘要:本文作者可視化工程師李鳳祿是可視化團(tuán)隊(duì)開(kāi)源的一款基于的大數(shù)據(jù)可視化庫(kù),專(zhuān)注于大數(shù)據(jù)方向點(diǎn)線面的可視化效果展示。目前支持散點(diǎn)圍欄熱力網(wǎng)格聚合等方式致力于讓大數(shù)據(jù)可視化變得簡(jiǎn)單易用。后續(xù)會(huì)輸出創(chuàng)造更好的可視化圖形和算法,并后續(xù)推出版本。 showImg(https://segmentfault.com/img/bV0yHB?w=1600&h=900); 本文作者:TalkingData 可...

    xeblog 評(píng)論0 收藏0
  • 阿里王剛談自動(dòng)駕駛:從單車(chē)智能到車(chē)路協(xié)同智能進(jìn)化

    摘要:在今年的云棲大會(huì)上,阿里巴巴人工智能實(shí)驗(yàn)室除了發(fā)布服務(wù)機(jī)器人天貓精靈太空蛋太空梭天貓精靈車(chē)載版,還重點(diǎn)推出了車(chē)路協(xié)同智能自動(dòng)駕駛車(chē)。秒看懂智慧物流車(chē)和感知基站各位嘉賓,上午好我是王剛,我要介紹的是自動(dòng)駕駛從單車(chē)智能跨到協(xié)同智能的進(jìn)化。 在今年的云棲大會(huì)上,阿里巴巴人工智能實(shí)驗(yàn)室除了發(fā)布AliGenie 3.0、服務(wù)機(jī)器人(天貓精靈太空蛋、太空梭)、天貓精靈車(chē)載版(TmallGenie ...

    shery 評(píng)論0 收藏0
  • 阿里王剛談自動(dòng)駕駛:從單車(chē)智能到車(chē)路協(xié)同智能進(jìn)化

    摘要:在今年的云棲大會(huì)上,阿里巴巴人工智能實(shí)驗(yàn)室除了發(fā)布服務(wù)機(jī)器人天貓精靈太空蛋太空梭天貓精靈車(chē)載版,還重點(diǎn)推出了車(chē)路協(xié)同智能自動(dòng)駕駛車(chē)。秒看懂智慧物流車(chē)和感知基站各位嘉賓,上午好我是王剛,我要介紹的是自動(dòng)駕駛從單車(chē)智能跨到協(xié)同智能的進(jìn)化。 在今年的云棲大會(huì)上,阿里巴巴人工智能實(shí)驗(yàn)室除了發(fā)布AliGenie 3.0、服務(wù)機(jī)器人(天貓精靈太空蛋、太空梭)、天貓精靈車(chē)載版(TmallGenie ...

    Dongjie_Liu 評(píng)論0 收藏0
  • css - 收藏集 - 掘金

    摘要:絕對(duì)底部前端掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人,純,可以實(shí)現(xiàn)當(dāng)正文內(nèi)容很少時(shí),底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問(wèn)題前端掘金起因在移動(dòng)端使用布局時(shí)圖片也需要用單位。 CSS 絕對(duì)底部 - 前端 - 掘金來(lái)自國(guó)外的設(shè)計(jì)達(dá)人,純CSS,可以實(shí)現(xiàn): 當(dāng)正文內(nèi)容很少時(shí),底部位于窗口最下面。當(dāng)改變窗口高度時(shí),不會(huì)出現(xiàn)重疊問(wèn)題。甚至,創(chuàng)造該CSS的人還專(zhuān)門(mén)成立一個(gè)網(wǎng)站介紹這個(gè)CSS底部布局方案...

    phpmatt 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<