0.0.4 • Published 11 months ago
@faintout/tidal-lane v0.0.4
基于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>
演示效果请以文件查看