欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3實(shí)現(xiàn)模擬地圖站點(diǎn)名稱按需顯示的功能(車輛模擬地圖)

 更新時(shí)間:2024年06月22日 09:43:32   作者:鄒瓊俊  
最近在做車輛模擬地圖,在實(shí)現(xiàn)控制站點(diǎn)名稱按需顯示,下面通過本文給大家分享vue3實(shí)現(xiàn)模擬地圖站點(diǎn)名稱按需顯示的功能,感興趣的朋友跟隨小編一起看看吧

很久很久沒有更新博客了,因?yàn)閷?shí)在是太忙了,每天都有公司的事情忙不完.......

最近在做車輛模擬地圖,在實(shí)現(xiàn)控制站點(diǎn)名稱按需顯示時(shí),折騰了好一段時(shí)間,特此記錄一下。最終界面如下圖所示:

站點(diǎn)顯示需求:首末站必須顯示,從第一個(gè)站開始,如果站點(diǎn)名稱能顯示下,則顯示,如果站點(diǎn)名稱會(huì)重疊則隱藏,以此類推。當(dāng)界面寬度變化時(shí),車輛模擬地圖自動(dòng)變化,保證站點(diǎn)名稱能夠最大限度的顯示。

最開始我用的比例換算法,算法復(fù)雜度是O,結(jié)果總是不準(zhǔn)。盡管一開始我就覺得算法的復(fù)雜度應(yīng)該是O2。我之前卻一直想著只遍歷一次就算出來,我也嘗試過把需求描述得很詳細(xì)去問chatgpt,可是它就像個(gè)傻子一樣輸出各種算法錯(cuò)誤代碼。

需要注意的地方:由于站點(diǎn)的名稱內(nèi)容是千奇百怪的,可以有空格,各種特殊圖標(biāo),所以站點(diǎn)文字的長度計(jì)算是一個(gè)問題,這里是通過canvas來計(jì)算的。還有,這里我添加了一個(gè)限制,站點(diǎn)文字內(nèi)容我最大顯示120px,超出隱藏并顯示省略號,站點(diǎn)名稱上添加了title顯示全稱。

/**
 * 獲取站點(diǎn)名稱
 * @param item 
 * @param showFullName 是否總是顯示站點(diǎn)全名
 */
/** */
export const getSiteName = (item: any,showFullName?:boolean=false) => {
  const { siteSign } = simulatedMapConf.value;
  let name = '';
  if (siteSign == 'firstWord') {
    name = getSubStrByPreNum(item.stationName);
  } else if (siteSign == 'order') {
    name = item.stationSeq + '';
  } else {
    name=showFullName?item.stationName:(item.show? item.stationName:''); //show控制站點(diǎn)名稱是否顯示
  }
  return name || '';
}
/**
 * 獲取站點(diǎn)名稱寬度
 * @param item 站點(diǎn)對象
 * @param showFullName 是否總是顯示站點(diǎn)全名
 * @returns 
 */
export const getSiteNameWidth = (item: any,showFullName?:boolean=false) => {
  const name =showFullName?item.stationName: getSiteName(item,showFullName);
  const width= calculateStringWidth(name);
  return width>siteMaxWidth?siteMaxWidth:width;
}
/**
 * 根據(jù)字符串計(jì)算出界面渲染的寬度
 * @param str 
 * @returns 
 */
function calculateStringWidth(str:string) {
  // 創(chuàng)建一個(gè)虛擬的 <canvas> 元素
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  // 設(shè)置字體樣式
  ctx.font = '12px sans-serif';
  // 使用 canvas 的 measureText 方法測量字符串的寬度
  const width = ctx.measureText(str).width;
  // 返回計(jì)算出的寬度
  return width;
}

最核心的算法:

//計(jì)算上行站點(diǎn),控制站點(diǎn)是否顯示在模擬地圖上
    function calcSite(station: any, lineWidth: number) {
        if (station.length < 1) return [];
        station.forEach((f: any, index) => {
            f.show=false;
        });
        const lastSiteLength = getSiteNameWidth(station[station.length - 1], true) / 2;//站點(diǎn)文字寬度
        let lastLeft = getSiteCx(station[station.length - 1], station.length - 1);//最后一個(gè)站點(diǎn)left
        lastLeft = toDecimal(lastLeft - lastSiteLength);
        station.forEach((f: any, index) => {
            let siteLength = getSiteNameWidth(f, true);//站點(diǎn)文字寬度
            let bigHalf = siteLength / 2;//獲取當(dāng)前的半寬
            f.left = getSiteCx(f, index); 
            if (index == 0 || index == station.length - 1) { //第一項(xiàng)和最后一項(xiàng)必須顯示
                f.show = true;
            } else {
                const preShowIndex = getLastTrueIndex(station); //獲取前面最近一個(gè)顯示站點(diǎn)的索引
                const preEndLeft = toDecimal(station[preShowIndex].left + getSiteNameWidth(station[preShowIndex], true) / 2);//上一項(xiàng)顯示的站點(diǎn)名稱結(jié)束left位置
                f.show = toDecimal(f.left - bigHalf) >=preEndLeft && preEndLeft < lastLeft; //如果上一個(gè)顯示站點(diǎn)文字的結(jié)尾位置 小于等于 當(dāng)前站點(diǎn)文字的開始位置  并且小于最后一個(gè)站點(diǎn)文字的開始位置
if (f.show && toDecimal(f.left + bigHalf) > lastLeft) {
                    f.show = false;
                }
            }
        })
    }

獲取前面最近一個(gè)顯示站點(diǎn)的索引:

//獲取list集合中最后一項(xiàng)show的index位置
    function getLastTrueIndex(dataList: any) {
        // 從數(shù)組末尾第2項(xiàng)開始向前遍歷
        for (let i = dataList.length - 2; i >= 0; i--) {
            if (dataList[i].show === true) {
                return i;  // 返回第一個(gè)找到的最后一個(gè)為true的索引
            }
        }
        return -1;  // 如果未找到符合條件的對象,返回-1
    }

下行站點(diǎn)的計(jì)算有些差別,因?yàn)橄滦姓军c(diǎn)是從右至左,所以left基本上是反著的:

//計(jì)算下行站點(diǎn),控制站點(diǎn)是否顯示在模擬地圖上 getDownSiteCx
    function calcDownSite(station: any, lineWidth: number) {
        if (station.length < 1) return [];
        station.forEach((f: any, index) => {
            f.show=false;
        });
        const lastSiteLength = getSiteNameWidth(station[station.length - 1], true) / 2;//站點(diǎn)文字寬度
        let lastLeft = getDownSiteCx(station[station.length - 1], station.length - 1);//最后一個(gè)站點(diǎn)left
        lastLeft = toDecimal(lastLeft + lastSiteLength);
        station.forEach((f: any, index) => {
            let siteLength = getSiteNameWidth(f, true);//站點(diǎn)文字寬度
            let bigHalf = siteLength / 2;//獲取當(dāng)前的半寬
            f.left = getDownSiteCx(f, index); 
            if (index == 0 || index == station.length - 1) { //第一項(xiàng)和最后一項(xiàng)必須顯示
                f.show = true;
            } else {
                const preShowIndex = getLastTrueIndex(station); //獲取前面最近一個(gè)顯示站點(diǎn)的索引
                const preEndLeft = toDecimal(station[preShowIndex].left - getSiteNameWidth(station[preShowIndex], true) / 2);//上一項(xiàng)顯示站的的結(jié)束left位置
                f.show = toDecimal(f.left + bigHalf) <=preEndLeft && preEndLeft > lastLeft;
                if (f.show && toDecimal(f.left - bigHalf) < lastLeft) {
                    f.show = false;
                }
            }
        })
    }

另外獲取站點(diǎn)中心點(diǎn)位置的方法

//獲取上行站點(diǎn)水平x位置
    const getSiteCx = (item: any, index: number) => {
        return startleft.value + dLayout.lineWidth * index;
    }
    //獲取下行站點(diǎn)水平x位置
    const getDownSiteCx = (item: any, index: number) => {
        return downStartleft.value - layout.endLine - dLayout.downLineWidth * index;
    }

說明:站點(diǎn)的布局采用css絕對定位。第一個(gè)版本這塊我是采用的svg畫的,后來發(fā)現(xiàn)擴(kuò)展起來越來越麻煩,周末就在家花了半天時(shí)間全部改造為html實(shí)現(xiàn)了。

我最開始的有問題代碼是上下行站點(diǎn)共用的,最大的問題是會(huì)出現(xiàn)跳站點(diǎn)顯示的情況,代碼如下的:

//計(jì)算站點(diǎn),控制站點(diǎn)是否顯示在模擬地圖上
    function calcSite(station: any, lineWidth: number) {
        let availableWidth = (station.length - 1) * lineWidth; //總長度
        //記錄顯示站點(diǎn)的長度
        let totalLength = 0;
        station.forEach((f: any, index) => {
            let siteLength = getSiteNameWidth(f, true);
            let bigHalf =siteLength / 2;//獲取比較大的半寬
            let bigHalfPre = 0;
            //計(jì)算上一項(xiàng)的文字半寬
            if (index >= 1) {
                let siteLengthPre = getSiteNameWidth(station[index - 1], true);
                bigHalfPre =siteLengthPre / 2;
            }
            f.left = toDecimal(lineWidth * index);
            f.show =index==0?true: f.left >=toDecimal(totalLength);
            if(index >= 1&&station[index-1].show&&bigHalf+bigHalfPre>lineWidth){
                f.show=false;
            }
            if (f.show) {
                let times = getDivisor(siteLength, lineWidth);
                totalLength += times * lineWidth;
            }
        })
    }
/**
 * 兩個(gè)數(shù)相除有余數(shù)時(shí)結(jié)果加1
 * @param all 被除數(shù) 站點(diǎn)寬度
 * @param num 除數(shù)  線寬
 * @returns 
 */
export const getDivisor=( all:number,item:number)=>{
    if(all<=item) return 1;
    let diff:number=0;
    if(item<=20){
        diff=2.5;
    }
    if(item<=30){
        diff=2;
    }
    else if(item<=40){
        diff=1.5;
    }
    else if(item<=46){
        diff=1.05;
    }
    else if(item<=50){
        diff=1;
    }
    return all%item==0?(all/item):(Math.ceil(all/item)+diff);
}

到此這篇關(guān)于vue3實(shí)現(xiàn)模擬地圖上,站點(diǎn)名稱按需顯示的功能的文章就介紹到這了,更多相關(guān)vue3站點(diǎn)名稱按需顯示內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • vue自動(dòng)添加瀏覽器兼容前后綴操作

    vue自動(dòng)添加瀏覽器兼容前后綴操作

    這篇文章主要介紹了vue自動(dòng)添加瀏覽器兼容前后綴操作,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue組件中prop屬性使用說明實(shí)例代碼詳解

    Vue組件中prop屬性使用說明實(shí)例代碼詳解

    這篇文章主要介紹了Vue組件中prop屬性使用說明,非常不錯(cuò)具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-05-05
  • element-ui upload組件多文件上傳的示例代碼

    element-ui upload組件多文件上傳的示例代碼

    這篇文章主要介紹了element-ui upload組件多文件上傳的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-10-10
  • vue-cli點(diǎn)擊實(shí)現(xiàn)全屏功能

    vue-cli點(diǎn)擊實(shí)現(xiàn)全屏功能

    這篇文章主要為大家詳細(xì)介紹了vue-cli點(diǎn)擊實(shí)現(xiàn)全屏功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-03-03
  • Vue關(guān)于element穿梭框進(jìn)行的修改成table表格穿梭框方式

    Vue關(guān)于element穿梭框進(jìn)行的修改成table表格穿梭框方式

    這篇文章主要介紹了Vue關(guān)于element穿梭框進(jìn)行的修改成table表格穿梭框方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-04-04
  • Vue3 源碼導(dǎo)讀(推薦)

    Vue3 源碼導(dǎo)讀(推薦)

    這篇文章主要介紹了Vue3 源碼導(dǎo)讀(推薦),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-10-10
  • vue 全局封裝loading加載教程(全局監(jiān)聽)

    vue 全局封裝loading加載教程(全局監(jiān)聽)

    這篇文章主要介紹了vue 全局封裝loading加載教程(全局監(jiān)聽),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • 如何在Vue3中使用Ref訪問DOM元素詳解

    如何在Vue3中使用Ref訪問DOM元素詳解

    在Vue3中可以使用`ref`來獲取DOM元素,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中使用Ref訪問DOM元素的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-09-09
  • vue 項(xiàng)目軟鍵盤回車觸發(fā)搜索事件

    vue 項(xiàng)目軟鍵盤回車觸發(fā)搜索事件

    這篇文章主要介紹了vue 項(xiàng)目軟鍵盤回車觸發(fā)搜索事件,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • Vue?瀏覽器本地存儲的問題小結(jié)

    Vue?瀏覽器本地存儲的問題小結(jié)

    這篇文章主要介紹了Vue?瀏覽器本地存儲,LocalStorage 和 SessionStorage 統(tǒng)稱為 WebStorage,存儲大小一般支持5mb左右,但是不同的瀏覽器也有區(qū)別,具體內(nèi)容介紹跟隨小編一起看看吧
    2022-04-04

最新評論