基于JS+Canvas开发车道线+潮汐车道绘制。

• 支持车道线、潮汐车道、行进方向、潮汐车道文字显示。
• 直接引入@faintout/tidal-lane，并通过new TidalLane()创建方式使用。
• import TidalLane from '@faintout/tidal-lane'
• github-地址 TidalLane
• 更新以base64形式去访问图片
• demo文件夹可以进行查看

使用方法

    <script>
        const roadList = [{
                type: "bottom",
                tidal: false,
            },
            {
                type: 'top',
                tidal: true,
            },
        ]
        const tidalLane = new TidalLane('tidalLane', roadList)

        //更新
        setTimeout(() => {
            const tempRoadList = [{
                    type: "bottom",
                    tidal: false,
                },
                {
                    type: 'top',
                    tidal: false,
                },

            ]
            //更新潮汐车道
            tidalLane.setRoadList(tempRoadList)
        }, 3000)
    </script>

配置项

const tidalLane = new TidalLane($1, $2)
//$1 - 为外层画布的ID String
//$2 - 绘制道路所需的数组 Array 
{
    type: 'top', //为行进方向  top|bottom
    tidal: false,  //是否为潮汐车道 Boolean
},

vue中使用

<template>
    <div class="tidal-lane" id="tidalLane"></div>
</template>

<script setup>
    import TidalLane from '@faintout/tidal-lane'
    import { nextTick } from 'vue'
    nextTick(() => {
        const roadList = [
            {
                type:"bottom",
                tidal:false,
            },
            {
                type:'top',
                tidal:true,
            },
            {
                type:'top',
                tidal:true,
            },
            {
                type:'bottom',
                tidal:true,
            },
        ]
        const tidalLane = new TidalLane('tidalLane', roadList)
        //此处为更新车道的数据，
        setTimeout(()=>{
            tidalLane.setRoadList([
            {
                type:"bottom",
                tidal:false,
            },
            {
                type:'top',
                tidal:true,
            },
            {
                type:'top',
                tidal:true,
            },
            {
                type:'bottom',
                tidal:true,
            },
        ])
        },3000)
    })
</script>

演示效果请以文件查看