canvas绘制红绿灯路口
2023-12-29 14:08:07
无图不欢，先上图
使用方法（以vue3为例）
<template>
<canvas class="lane" ref="laneCanvas"></canvas>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Lane from '@/utils/lane.js'
let laneCanvas = ref(null)
/**
* 车道方向，进口方向
* 1 - 北，2 - 东北，3 - 东，4 - 东南，
* 5 - 南，6 - 西南，7 - 西，8 - 西北
*
* 直行放行 nThrough 0不放行 1放行
* 左转放行 nTurnLeft 0不放行 1放行
* 右转放行 nTurnRight 0不放行 1放行
* 调头 nTurnAround 0不放行 1放行
*
* 通道相位 nChannelNumberPhase 1-红灯 2绿灯 3黄灯
*/
const randData = () => {
let data = []
let cdireCtions = ['北', '东北', '东', '东南', '南', '西南', '西', '西北']
cdireCtions.forEach((item, index) => {
if (rand(0, 1)) {
let lanes = []
let lanesLength = rand(1, 6)
if (lanesLength === 1) {
lanes = [{
nThrough: 1,
nTurnLeft: rand(0, 1),
nTurnRight: rand(0, 1),
nTurnAround: rand(0, 1),
nChannelNumberPhase: rand(1, 3)
}]
} else if (lanesLength === 2) {
lanes = [{
nThrough: 1,
nTurnLeft: rand(0, 1),
nTurnRight: 0,
nTurnAround: rand(0, 1),
nChannelNumberPhase: rand(1, 3)
}, {
nThrough: 1,
nTurnLeft: 0,
nTurnRight: rand(0, 1),
nTurnAround: 0,
nChannelNumberPhase: rand(1, 3)
}]
} else {
for (let i = 0; i < lanesLength; i++) {
let nThrough = 0
let nTurnLeft = 0
let nTurnRight = 0
let nTurnAround = 0
if (i === 0) {
nThrough = rand(0, 1)
nTurnLeft = 1
nTurnAround = rand(0, 1)
}
if (i === lanesLength - 1) {
nThrough = rand(0, 1)
nTurnRight = 1
nTurnAround = 0
}
if (i > 0 && i < lanesLength - 1) {
nThrough = 1
if (lanes[i - 1].nTurnLeft) {
nTurnLeft = rand(0, 1)
nTurnRight = 0
} else if (lanes[i - 1].nTurnRight) {
nTurnLeft = 0
nTurnRight = 1
} else {
nTurnLeft = 0
nTurnRight = rand(0, 1)
}
nTurnAround = 0
}
lanes.push({
nThrough,
nTurnLeft,
nTurnRight,
nTurnAround,
nChannelNumberPhase: rand(1, 3)
})
}
}
data.push({
nApproachDirection: index + 1,
cdireCtion: cdireCtions[index],
lanes
})
}
})
if (data.length < 2) {
data = randData()
}
return data
}
const dataTest = [{
nApproachDirection: 1,
cdireCtion: '北',
lanes: [{
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 1,
nChannelNumberPhase: 3
}, {
nThrough: 1,
nTurnLeft: 1,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 2
}, {
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 1,
nTurnAround: 0,
nChannelNumberPhase: 1
}]
}, {
nApproachDirection: 2,
cdireCtion: '东北',
lanes: [{
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 1,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 1,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 1,
nTurnAround: 0,
nChannelNumberPhase: 1
}]
}, {
nApproachDirection: 3,
cdireCtion: '东',
lanes: [{
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 1,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 1,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 1,
nTurnAround: 0,
nChannelNumberPhase: 1
}]
}, {
nApproachDirection: 4,
cdireCtion: '东南',
lanes: [{
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 1,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 1,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 1,
nTurnAround: 0,
nChannelNumberPhase: 1
}]
}, {
nApproachDirection: 5,
cdireCtion: '南',
lanes: [{
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 1,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 1,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 1,
nTurnAround: 0,
nChannelNumberPhase: 1
}]
}, {
nApproachDirection: 6,
cdireCtion: '西南',
lanes: [{
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 1,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 1,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 1,
nTurnAround: 0,
nChannelNumberPhase: 1
}]
}, {
nApproachDirection: 7,
cdireCtion: '西',
lanes: [{
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 1,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 1,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 1,
nTurnAround: 0,
nChannelNumberPhase: 1
}]
}, {
nApproachDirection: 8,
cdireCtion: '西北',
lanes: [{
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 1,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 1,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 1,
nTurnAround: 0,
nChannelNumberPhase: 1
}]
}]
const dataTest2 = [{
nApproachDirection: 1,
cdireCtion: '东',
lanes: [{
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 1,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 1,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 1,
nTurnAround: 0,
nChannelNumberPhase: 1
}]
}, {
nApproachDirection: 2,
cdireCtion: '南',
lanes: [{
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 1,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 1,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 1,
nTurnLeft: 0,
nTurnRight: 0,
nTurnAround: 0,
nChannelNumberPhase: 1
}, {
nThrough: 0,
nTurnLeft: 0,
nTurnRight: 1,
nTurnAround: 0,
nChannelNumberPhase: 1
}]
}]
const rand = (n, m) => {
var c = m - n + 1
return Math.floor(Math.random() * c + n)
}
onMounted(() => {
let data = randData()
console.log(data)
let laneC = new Lane({
canvas: laneCanvas.value,
data: [...data]
})
setInterval(() => {
data.forEach(dataItem => {
dataItem.lanes.forEach(lane => {
lane.nChannelNumberPhase = rand(1, 3)
})
})
laneC.setData(data)
}, 5000)
})
</script>
<style scoped lang="scss">
.lane {
width: 100%;
height: 100%;
background-color: #325e76;
}
</style>
lane.js源码
class Lane {
constructor(opt) {
this.dpr = window.devicePixelRatio || 1
this.canvas = opt.canvas
this.w = null
this.h = null
this.ctx = null
this.data = opt.data
// 车道范围坐标
this.region = []
// 车道线坐标
this.dataXY = []
// 路中心空白区域占canvas宽高最小值的比，用来计算车道宽度。占比越大，中心空白区域越大，车道越宽，线路越短。取值范围0-1，不允许取0,1
this.laneCenterProportion = 0.6 || opt.laneCenterProportion
// 车道样式
this.laneStyle = opt.laneStyle
this.init()
}
init() {
if (!this.canvas) {
return
}
if (this.canvas.width !== Math.floor(this.canvas.offsetWidth * this.dpr) || this.canvas.height !== Math.floor(this.canvas.offsetHeight * this.dpr)) {
this.w = this.canvas.width = Math.floor(this.canvas.offsetWidth * this.dpr)
this.h = this.canvas.height = Math.floor(this.canvas.offsetHeight * this.dpr)
}
this.ctx = this.canvas.getContext('2d')
this.getLaneStyle()
this.formatDataXY()
this.getRegion()
this.draw()
}
// 获取车道样式
getLaneStyle() {
let laneStyle = {
// 车道范围
region: {
width: 2 * this.dpr,
color: '#fff',
type: 'solid',
CurveType: 'quadratic', // normal: 插值曲线, quadratic: 二次贝塞尔, arc: 圆弧线。arc有问题，请勿使用
background: '#1f2748'
},
// 车道左侧车道线
innerLeft: {
width: 1 * this.dpr,
color: '#999',
type: [10 * this.dpr, 10 * this.dpr],
},
// 车道右侧车道线
innerRight: {
width: 1 * this.dpr,
color: '#eee',
type: [10 * this.dpr, 10 * this.dpr],
},
// 车道分割线
innerDivider: {
width: 2 * this.dpr,
color: '#f0bf0a',
type: 'solid'
},
// 车道标识
direction: {
widthProportion: 0.1, // 占车道比例，建议小于0.2
HeightWidthProportion: 10, // 高宽比，建议大于5
maxWidth: 20 * this.dpr,
arrowWidth: 2, // 箭头/方向线的比例, 建议大于1小于2
background: '#ddd'
},
// 斑马线
zebraCrossing: {
widthProportion: 0.05, // 单个斑马线宽占车道比例，建议小于0.2
widthHeightProportion: 0.2, // 单个斑马线宽高比，建议小于0.5
color: '#ddd'
},
// 红绿灯
trafficLight: {
rProportion: 0.3, // 单个红绿灯半径占车道比例，建议小于0.5,
colors: ['#FF0033', '#33CC00', '#FFFF33'],
}
}
if (this.laneStyle) {
this.laneStyle = Object.assign(laneStyle, this.laneStyle)
} else {
this.laneStyle = laneStyle
}
let laneMaxNum = this.getLaneMaxNum()
let sideLength = this.getSideLength()
// 车道宽度 / 2 表示双向
this.laneStyle.width = sideLength / 2 / laneMaxNum
// 方向表示线宽高
this.laneStyle.direction.width = this.laneStyle.width * this.laneStyle.direction.widthProportion
if (this.laneStyle.direction.width > this.laneStyle.direction.maxWidth) {
this.laneStyle.direction.width = this.laneStyle.direction.maxWidth
}
this.laneStyle.direction.height = this.laneStyle.direction.width * this.laneStyle.direction.HeightWidthProportion
// 斑马线宽高
this.laneStyle.zebraCrossing.width = this.laneStyle.width * this.laneStyle.zebraCrossing.widthProportion
this.laneStyle.zebraCrossing.height = this.laneStyle.zebraCrossing.width / this.laneStyle.zebraCrossing.widthHeightProportion
this.laneStyle.zebraCrossing.type = [this.laneStyle.zebraCrossing.width, this.laneStyle.zebraCrossing.width * 4]
// 红绿灯半径
this.laneStyle.trafficLight.r = this.laneStyle.width * this.laneStyle.trafficLight.rProportion
}
// 获取最大车道数
getLaneMaxNum() {
let laneMaxNum = 0
this.data.forEach(item => {
if (item.lanes.length > laneMaxNum) {
laneMaxNum = item.lanes.length
}
})
if(laneMaxNum === 1){
laneMaxNum = 2
}
return laneMaxNum
}
// 获取中心路口八边形边长
getSideLength() {
let minW = this.w > this.h ? this.h : this.w
let sideLength = minW * this.laneCenterProportion / (Math.sqrt(2) + 1)
return sideLength
}
// 计算车道坐标
formatDataXY() {
let dataXY = []
// this.laneStyle
// 车道起始中心位置
let centerX = this.w / 2
let centerY = this.h - this.h * (1 - this.laneCenterProportion) / 2
// 车道长度
let laneLength = Math.sqrt(Math.pow(this.w, 2) * Math.pow(this.h, 2))
this.data.forEach(dataItem => {
let dataXYItem = {
nApproachDirection: dataItem.nApproachDirection,
}
// 起始x
let startX = centerX - this.laneStyle.width * dataItem.lanes.length
// 起始y
let startY = centerY + this.laneStyle.zebraCrossing.height * 2
// 结束Y
let endY = startY + laneLength
// 线
let lines = []
// 单向车道分割线数量
let innerLines = dataItem.lanes.length - 1
// 车道左边线
lines.push({
x0: startX,
y0: startY - this.laneStyle.zebraCrossing.height * 2,
x1: startX,
y1: endY,
type: 'outer'
})
// 车道左侧分割线
for (let i = 0; i < innerLines; i++) {
let x = startX + (i + 1) * this.laneStyle.width
lines.push({
x0: x,
y0: startY,
x1: x,
y1: endY,
style: { ...this.laneStyle.innerLeft }
})
}
// 左右车道分割线
let dividerX = startX + (innerLines + 1) * this.laneStyle.width
lines.push({
x0: dividerX,
y0: startY,
x1: dividerX,
y1: endY,
style: { ...this.laneStyle.innerDivider }
})
// 车道右侧分割线
for (let i = 0; i < innerLines; i++) {
let x = startX + (innerLines + i + 2) * this.laneStyle.width
lines.push({
x0: x,
y0: startY,
x1: x,
y1: endY,
style: { ...this.laneStyle.innerRight }
})
}
// 车道右边线
let outerRightx = startX + (innerLines + 1) * 2 * this.laneStyle.width
lines.push({
x0: outerRightx,
y0: startY - this.laneStyle.zebraCrossing.height * 2,
x1: outerRightx,
y1: endY,
type: 'outer'
})
dataXYItem.lines = lines
// 方向标识
let directionIdentifyings = []
for (let i = 0; i < dataItem.lanes.length; i++) {
let laneItem = dataItem.lanes[i]
let key = [laneItem.nThrough, laneItem.nTurnLeft, laneItem.nTurnRight, laneItem.nTurnAround].join('')
let line = lines[innerLines + i + 1]
directionIdentifyings.push(this.getDirectionIdentifyings(key, this.laneStyle.direction.width, this.laneStyle.direction.height, {
x: line.x0 + this.laneStyle.width / 2,
y: line.y0 + this.laneStyle.direction.height / 2 + this.laneStyle.trafficLight.r * 4
}))
}
dataXYItem.directionIdentifyings = directionIdentifyings
// 斑马线
dataXYItem.zebraCrossing = [{
x: lines[0].x0,
y: startY - this.laneStyle.zebraCrossing.height
}, {
x: lines[lines.length - 1].x0,
y: startY - this.laneStyle.zebraCrossing.height
}]
// 红绿灯
let trafficLights = []
for (let i = 0; i < dataItem.lanes.length; i++) {
let laneItem = dataItem.lanes[i]
let line = lines[innerLines + i + 1]
trafficLights.push({
x: line.x0 + this.laneStyle.width / 2,
y: line.y0 + this.laneStyle.trafficLight.r * 2,
r: this.laneStyle.trafficLight.r,
color: this.laneStyle.trafficLight.colors[laneItem.nChannelNumberPhase - 1]
})
}
dataXYItem.trafficLights = trafficLights
dataXY.push(dataXYItem)
})
this.dataXYByRotate(dataXY)
this.dataXY = dataXY
}
// 获取方向标识坐标
getDirectionIdentifyings(key, w, h, centerXY) {
// 标识边界
let topY = centerXY.y - h / 2
let bottomY = centerXY.y + h / 2
let leftX = centerXY.x - w / 2 * 3
let rightX = centerXY.x + w / 2 * 3
// 直行线中心位置
let cX = centerXY.x + w
let cY = centerXY.y
// 箭头宽高
let arrowW = w * this.laneStyle.direction.arrowWidth
let arrowH = arrowW * Math.sin(Math.PI / 3)
// 线坐标
let points = []
// 三角形坐标
let arrowPoints = []
switch (key) {
case '0001':
// 调头
arrowPoints.push(this.getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: leftX + w / 2, y: bottomY - arrowH },
{ x: leftX + w / 2, y: topY + w / 2 },
{ x: leftX + w / 2 * 5, y: topY + w / 2 },
{ x: leftX + w / 2 * 5, y: bottomY },
])
break;
case '0100':
// 左转
arrowPoints.push(this.getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[0][0].x + arrowPoints[0][2].x) / 2, y: (arrowPoints[0][0].y + arrowPoints[0][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
break;
case '1000':
// 直行
leftX = centerXY.x - w / 2
rightX = centerXY.x + w / 2
cX = centerXY.x
arrowPoints.push(this.getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: cX, y: topY + arrowH },
{ x: cX, y: bottomY }
])
break;
case '0010':
// 右转
cX = centerXY.x - w
arrowPoints.push(this.getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[0][0].x + arrowPoints[0][2].x) / 2, y: (arrowPoints[0][0].y + arrowPoints[0][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
break;
case '0101':
// 调头左转
arrowPoints.push(this.getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: leftX + w / 2, y: bottomY - arrowH },
{ x: leftX + w / 2, y: cY + w / 2 },
{ x: leftX + w / 2 * 5, y: cY + w / 2 },
{ x: leftX + w / 2 * 5, y: bottomY },
])
arrowPoints.push(this.getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[1][0].x + arrowPoints[1][2].x) / 2, y: (arrowPoints[1][0].y + arrowPoints[1][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
break;
case '1001':
// 调头直行
arrowPoints.push(this.getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: leftX + w / 2, y: bottomY - arrowH },
{ x: leftX + w / 2, y: cY + w / 2 },
{ x: leftX + w / 2 * 5, y: cY + w / 2 },
{ x: leftX + w / 2 * 5, y: bottomY },
])
arrowPoints.push(this.getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: cX, y: topY + arrowH },
{ x: cX, y: bottomY }
])
break;
case '0011':
// 调头右转
leftX = centerXY.x - w / 2 * 5
rightX = centerXY.x + w / 2 * 5
arrowPoints.push(this.getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: leftX + w / 2, y: bottomY - arrowH },
{ x: leftX + w / 2, y: cY + w / 2 },
{ x: leftX + w / 2 * 5, y: cY + w / 2 },
{ x: leftX + w / 2 * 5, y: bottomY },
])
cX = centerXY.x
arrowPoints.push(this.getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[1][0].x + arrowPoints[1][2].x) / 2, y: (arrowPoints[1][0].y + arrowPoints[1][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
break;
case '1100':
// 左转直行
arrowPoints.push(this.getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[0][0].x + arrowPoints[0][2].x) / 2, y: (arrowPoints[0][0].y + arrowPoints[0][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
arrowPoints.push(this.getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: cX, y: topY + arrowH },
{ x: cX, y: bottomY }
])
break;
case '0110':
// 左转右转
leftX = centerXY.x - w / 2 * 5
rightX = centerXY.x + w / 2 * 5
cX = centerXY.x
arrowPoints.push(this.getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[0][0].x + arrowPoints[0][2].x) / 2, y: (arrowPoints[0][0].y + arrowPoints[0][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
arrowPoints.push(this.getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[1][0].x + arrowPoints[1][2].x) / 2, y: (arrowPoints[1][0].y + arrowPoints[1][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
break;
case '1010':
// 直行右转
cX = centerXY.x - w
arrowPoints.push(this.getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: cX, y: topY + arrowH },
{ x: cX, y: bottomY }
])
arrowPoints.push(this.getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[1][0].x + arrowPoints[1][2].x) / 2, y: (arrowPoints[1][0].y + arrowPoints[1][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
break;
case '1101':
// 调头左转直行
arrowPoints.push(this.getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: leftX + w / 2, y: bottomY - arrowH },
{ x: leftX + w / 2, y: cY + w / 2 },
{ x: leftX + w / 2 * 5, y: cY + w / 2 },
{ x: leftX + w / 2 * 5, y: bottomY },
])
arrowPoints.push(this.getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[1][0].x + arrowPoints[1][2].x) / 2, y: (arrowPoints[1][0].y + arrowPoints[1][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
arrowPoints.push(this.getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: cX, y: topY + arrowH },
{ x: cX, y: bottomY }
])
break;
case '1011':
// 调头直行右转
leftX = centerXY.x - w / 2 * 5
rightX = centerXY.x + w / 2 * 5
cX = centerXY.x
arrowPoints.push(this.getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: leftX + w / 2, y: bottomY - arrowH },
{ x: leftX + w / 2, y: cY + w / 2 },
{ x: leftX + w / 2 * 5, y: cY + w / 2 },
{ x: leftX + w / 2 * 5, y: bottomY },
])
arrowPoints.push(this.getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: cX, y: topY + arrowH },
{ x: cX, y: bottomY }
])
arrowPoints.push(this.getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[2][0].x + arrowPoints[2][2].x) / 2, y: (arrowPoints[2][0].y + arrowPoints[2][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
break;
case '0111':
// 调头左转右转
leftX = centerXY.x - w / 2 * 5
rightX = centerXY.x + w / 2 * 5
cX = centerXY.x
arrowPoints.push(this.getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: leftX + w / 2, y: bottomY - arrowH },
{ x: leftX + w / 2, y: cY + w / 2 },
{ x: leftX + w / 2 * 5, y: cY + w / 2 },
{ x: leftX + w / 2 * 5, y: bottomY },
])
arrowPoints.push(this.getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[1][0].x + arrowPoints[1][2].x) / 2, y: (arrowPoints[1][0].y + arrowPoints[1][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
arrowPoints.push(this.getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[2][0].x + arrowPoints[2][2].x) / 2, y: (arrowPoints[2][0].y + arrowPoints[2][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
break;
case '1110':
// 左转直行右转
leftX = centerXY.x - w / 2 * 5
rightX = centerXY.x + w / 2 * 5
cX = centerXY.x
arrowPoints.push(this.getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[0][0].x + arrowPoints[0][2].x) / 2, y: (arrowPoints[0][0].y + arrowPoints[0][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
arrowPoints.push(this.getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: cX, y: topY + arrowH },
{ x: cX, y: bottomY }
])
arrowPoints.push(this.getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[2][0].x + arrowPoints[2][2].x) / 2, y: (arrowPoints[2][0].y + arrowPoints[2][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
break;
case '1111':
// 调头左转直行右转
leftX = centerXY.x - w / 2 * 5
rightX = centerXY.x + w / 2 * 5
cX = centerXY.x
arrowPoints.push(this.getArrow(1, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: leftX + w / 2, y: bottomY - arrowH },
{ x: leftX + w / 2, y: cY + w / 2 },
{ x: leftX + w / 2 * 5, y: cY + w / 2 },
{ x: leftX + w / 2 * 5, y: bottomY },
])
arrowPoints.push(this.getArrow(2, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[1][0].x + arrowPoints[1][2].x) / 2, y: (arrowPoints[1][0].y + arrowPoints[1][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
arrowPoints.push(this.getArrow(3, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: cX, y: topY + arrowH },
{ x: cX, y: bottomY }
])
arrowPoints.push(this.getArrow(4, arrowW, arrowH, w, h, topY, bottomY, leftX, rightX, cX, cY))
points.push([
{ x: (arrowPoints[3][0].x + arrowPoints[3][2].x) / 2, y: (arrowPoints[3][0].y + arrowPoints[3][2].y) / 2 },
{ x: cX, y: cY },
{ x: cX, y: bottomY }
])
break;
}
return { arrowPoints, points }
}
getArrow(key, w, h, w2, h2, topY, bottomY, leftX, rightX, cX, cY) {
let point = []
let wd = (w - w2) / 2 // 三角形边长与线宽的差值的一半
let rotateDeg = 30// 左转右转旋转角度
let hv = h2 / Math.cos(Math.PI / 180 * rotateDeg) // 计算左转右转虚拟线长
let topYv = topY - (hv - h2) / 2 // 虚拟起始高度
switch (key) {
case 1:
// 调头
point = [
{ x: leftX - wd, y: bottomY - h },
{ x: leftX + w2 / 2, y: bottomY },
{ x: leftX + w2 + wd, y: bottomY - h }
]
break;
case 2:
// 左转
point = [
{ x: cX + w / 2, y: topYv + h },
{ x: cX, y: topYv },
{ x: cX - w / 2, y: topYv + h }
]
point.forEach(item => {
let newXY = this.computePosition(item.x, item.y, -rotateDeg, cX, cY)
item.x = newXY.x
item.y = newXY.y
})
break;
case 3:
// 直行
point = [
{ x: cX + w / 2, y: topY + h },
{ x: cX, y: topY },
{ x: cX - w / 2, y: topY + h }
]
break;
case 4:
// 右转
point = [
{ x: cX + w / 2, y: topYv + h },
{ x: cX, y: topYv },
{ x: cX - w / 2, y: topYv + h }
]
point.forEach(item => {
let newXY = this.computePosition(item.x, item.y, rotateDeg, cX, cY)
item.x = newXY.x
item.y = newXY.y
})
break;
}
return point
}
// 计算旋转坐标
dataXYByRotate(dataXY) {
let centerX = this.w / 2
let centerY = this.h / 2
dataXY.forEach(dataXYItem => {
// 八边形，一个边占45度
let rotateReg = -180 + (dataXYItem.nApproachDirection - 1) * 45
dataXYItem.lines.forEach(line => {
let xy0 = this.computePosition(line.x0, line.y0, rotateReg, centerX, centerY)
line.x0 = xy0.x
line.y0 = xy0.y
let xy1 = this.computePosition(line.x1, line.y1, rotateReg, centerX, centerY)
line.x1 = xy1.x
line.y1 = xy1.y
})
dataXYItem.directionIdentifyings.forEach(directionIdentifying => {
directionIdentifying.points.forEach(point => {
point.forEach(item => {
let { x, y } = this.computePosition(item.x, item.y, rotateReg, centerX, centerY)
item.x = x
item.y = y
})
})
directionIdentifying.arrowPoints.forEach(arrowPoint => {
arrowPoint.forEach(item => {
let { x, y } = this.computePosition(item.x, item.y, rotateReg, centerX, centerY)
item.x = x
item.y = y
})
})
})
dataXYItem.zebraCrossing.forEach(zebraCrossing => {
let { x, y } = this.computePosition(zebraCrossing.x, zebraCrossing.y, rotateReg, centerX, centerY)
zebraCrossing.x = x
zebraCrossing.y = y
})
dataXYItem.trafficLights.forEach(trafficLight => {
let { x, y } = this.computePosition(trafficLight.x, trafficLight.y, rotateReg, centerX, centerY)
trafficLight.x = x
trafficLight.y = y
})
})
}
// 旋转计算
computePosition(x, y, angle, centerX, centerY) {
// 圆心
let a = centerX;
let b = centerY;
// 计算
let c = Math.PI / 180 * angle;
let rx = (x - a) * Math.cos(c) - (y - b) * Math.sin(c) + a;
let ry = (y - b) * Math.cos(c) + (x - a) * Math.sin(c) + b;
return { x: rx, y: ry };
}
// 获取车道范围
getRegion() {
let region = []
for (let i = 0; i < this.dataXY.length; i++) {
let dataXYItem = this.dataXY[i]
let linesLength = dataXYItem.lines.length
if (i !== 0) {
// 衔接上一车道
let prevDataXYItem = this.dataXY[i - 1]
let data = {
prevNApproachDirection: prevDataXYItem.nApproachDirection,
nApproachDirection: dataXYItem.nApproachDirection,
type: 'connect'
}
let diffNApproachDirection = dataXYItem.nApproachDirection - prevDataXYItem.nApproachDirection
if(diffNApproachDirection > 4){
diffNApproachDirection = (prevDataXYItem.nApproachDirection + 8) - dataXYItem.nApproachDirection
}
if (diffNApproachDirection === 4) {
// 车道正对，直线即可
data.point = [
{ x: prevDataXYItem.lines[0].x0, y: prevDataXYItem.lines[0].y0 },
{ x: dataXYItem.lines[linesLength - 1].x0, y: dataXYItem.lines[linesLength - 1].y0 },
]
region.push(data)
} else {
if (this.laneStyle.region.CurveType === 'arc') {
let angle = 45 * diffNApproachDirection
let startAngle = 45 * (prevDataXYItem.nApproachDirection - 5)
data.OR = this.findCircleCenter(
prevDataXYItem.lines[0].x0, prevDataXYItem.lines[0].y0,
dataXYItem.lines[linesLength - 1].x0, dataXYItem.lines[linesLength - 1].y0,
angle,
true
)
data.OR.startAngle = startAngle
data.OR.endAngle = startAngle - angle
data.OR.anticlockwise = true
} else {
// 曲线
let laneXY0 = this.calculateIntersection([
[prevDataXYItem.lines[0].x0, prevDataXYItem.lines[0].y0],
[prevDataXYItem.lines[0].x1, prevDataXYItem.lines[0].y1],
], [
[dataXYItem.lines[linesLength - 1].x0, dataXYItem.lines[linesLength - 1].y0],
[dataXYItem.lines[linesLength - 1].x1, dataXYItem.lines[linesLength - 1].y1],
])
let laneXY1 = [(prevDataXYItem.lines[0].x0 + dataXYItem.lines[linesLength - 1].x0) / 2, (prevDataXYItem.lines[0].y0 + dataXYItem.lines[linesLength - 1].y0) / 2]
let originPoints = [
{ x: prevDataXYItem.lines[0].x0, y: prevDataXYItem.lines[0].y0 },
{ x: laneXY1[0] - (laneXY1[0] - laneXY0[0]) * diffNApproachDirection / 4, y: laneXY1[1] - (laneXY1[1] - laneXY0[1]) * diffNApproachDirection / 4 },
{ x: dataXYItem.lines[linesLength - 1].x0, y: dataXYItem.lines[linesLength - 1].y0 },
]
if (this.laneStyle.region.CurveType === 'normal') {
let point = this.getCurveVertex(originPoints)
data.point = point
} else {
data.point = originPoints
}
}
region.push(data)
}
}
// 车道范围
region.push({
nApproachDirection: dataXYItem.nApproachDirection,
x0: dataXYItem.lines[linesLength - 1].x0,
y0: dataXYItem.lines[linesLength - 1].y0,
x1: dataXYItem.lines[linesLength - 1].x1,
y1: dataXYItem.lines[linesLength - 1].y1,
x2: dataXYItem.lines[0].x1,
y2: dataXYItem.lines[0].y1,
x3: dataXYItem.lines[0].x0,
y3: dataXYItem.lines[0].y0,
type: 'lane'
})
if (i === this.dataXY.length - 1) {
// 衔接起始车道
let startDataXYItem = this.dataXY[0]
let startLinesLength = startDataXYItem.lines.length
let data = {
startNApproachDirection: startDataXYItem.nApproachDirection,
nApproachDirection: dataXYItem.nApproachDirection,
type: 'connect'
}
let diffNApproachDirection = startDataXYItem.nApproachDirection + 8 - dataXYItem.nApproachDirection
if(diffNApproachDirection > 4){
diffNApproachDirection = dataXYItem.nApproachDirection - startDataXYItem.nApproachDirection
}
if (diffNApproachDirection === 4) {
// 车道正对，直线即可
data.point = [
{ x: dataXYItem.lines[0].x0, y: dataXYItem.lines[0].y0 },
{ x: startDataXYItem.lines[startLinesLength - 1].x0, y: startDataXYItem.lines[startLinesLength - 1].y0 },
]
region.push(data)
} else {
if (this.laneStyle.region.CurveType === 'arc') {
let angle = 45 * diffNApproachDirection
let startAngle = 45 * (dataXYItem.nApproachDirection - 1)
data.OR = this.findCircleCenter(
dataXYItem.lines[0].x0, dataXYItem.lines[0].y0,
startDataXYItem.lines[linesLength - 1].x0, startDataXYItem.lines[linesLength - 1].y0,
angle,
true
)
data.OR.endAngle = startAngle + angle
data.OR.startAngle = startAngle
data.OR.anticlockwise = false
} else {
// 曲线
let laneXY0 = this.calculateIntersection([
[dataXYItem.lines[0].x0, dataXYItem.lines[0].y0],
[dataXYItem.lines[0].x1, dataXYItem.lines[0].y1],
], [
[startDataXYItem.lines[startLinesLength - 1].x0, startDataXYItem.lines[startLinesLength - 1].y0],
[startDataXYItem.lines[startLinesLength - 1].x1, startDataXYItem.lines[startLinesLength - 1].y1],
])
let laneXY1 = [(startDataXYItem.lines[startLinesLength - 1].x0 + dataXYItem.lines[0].x0) / 2, (startDataXYItem.lines[startLinesLength - 1].y0 + dataXYItem.lines[0].y0) / 2]
let originPoints = [
{ x: dataXYItem.lines[0].x0, y: dataXYItem.lines[0].y0 },
{ x: laneXY1[0] - (laneXY1[0] - laneXY0[0]) * diffNApproachDirection / 4, y: laneXY1[1] - (laneXY1[1] - laneXY0[1]) * diffNApproachDirection / 4 },
{ x: startDataXYItem.lines[startLinesLength - 1].x0, y: startDataXYItem.lines[startLinesLength - 1].y0 },
]
if (this.laneStyle.region.CurveType === 'normal') {
let point = this.getCurveVertex(originPoints)
data.point = point
} else {
data.point = originPoints
}
}
region.push(data)
}
}
}
this.region = region
}
// 获取两条直线的交点
calculateIntersection(line1, line2) {
// 解方程组
const x1 = line1[0][0];
const y1 = line1[0][1];
const x2 = line1[1][0];
const y2 = line1[1][1];
const x3 = line2[0][0];
const y3 = line2[0][1];
const x4 = line2[1][0];
const y4 = line2[1][1];
const denominator = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
if (denominator === 0) {
// 直线平行，没有交点
return null;
}
const intersectionX = ((x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4)) / denominator;
const intersectionY = ((x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4)) / denominator;
return [intersectionX, intersectionY];
}
// 以下四个方法获取曲线
getCurveVertex(vertex, pointsPow = 0.4) {
let length = 0
for (let i = 0; i < vertex.length - 1; i++) {
length += Math.sqrt(Math.pow(vertex[i].x - vertex[i + 1].x, 2) + Math.pow(vertex[i].y - vertex[i + 1].y, 2))
}
length = Math.ceil(length)
return this.getNewData(vertex, length * pointsPow)
}
// 曲线 插值
getNewData(pointsOrigin, pointsPow) {
const points = []
const divisions = (pointsOrigin.length - 1) * pointsPow
for (let i = 0; i < divisions; i++) {
points.push(this.getPoint(i, divisions, pointsOrigin, pointsPow))
}
return points
}
getPoint(i, divisions, pointsOrigin, pointsPow) {
const isRealI = (i * divisions) % pointsPow
const p = ((pointsOrigin.length - 1) * i) / divisions
const intPoint = Math.floor(p)
const weight = p - intPoint
const p0 = pointsOrigin[intPoint === 0 ? intPoint : intPoint - 1]
const p1 = pointsOrigin[intPoint]
const p2 = pointsOrigin[intPoint > pointsOrigin.length - 2 ? pointsOrigin.length - 1 : intPoint + 1]
const p3 = pointsOrigin[intPoint > pointsOrigin.length - 3 ? pointsOrigin.length - 1 : intPoint + 2]
return {
isReal: isRealI === 0,
x: this.catmullRom(weight, p0.x, p1.x, p2.x, p3.x),
y: this.catmullRom(weight, p0.y, p1.y, p2.y, p3.y)
}
}
catmullRom(t, p0, p1, p2, p3) {
const v0 = (p2 - p0) * 0.5
const v1 = (p3 - p1) * 0.5
const t2 = t * t
const t3 = t * t2
return (2 * p1 - 2 * p2 + v0 + v1) * t3 + (-3 * p1 + 3 * p2 - 2 * v0 - v1) * t2 + v0 * t + p1
}
// 根据圆上两点以及夹角角度 求 圆心
findCircleCenter(x1, y1, x2, y2, theta, isNeg) {
let cx = 0;
let cy = 0;
let dDistance = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
let dRadius = dDistance * 0.5 / Math.sin(Math.PI / 180 * theta * 0.5);
if (dDistance == 0.0) {
// cout << "\n输入了相同的点!\n";
return false;
}
if ((2 * dRadius) < dDistance) {
// cout << "\n两点间距离大于直径!\n";
return false;
}
let k_verticle = 0.0;
let mid_x = 0.0
let mid_y = 0.0;
let a = 1.0;
let b = 1.0;
let c = 1.0;
let k = (y2 - y1) / (x2 - x1);
let cx1, cy1, cx2, cy2;
if (k == 0) {
cx1 = (x1 + x2) / 2.0;
cx2 = (x1 + x2) / 2.0;
cy1 = y1 + Math.sqrt(dRadius * dRadius - (x1 - x2) * (x1 - x2) / 4.0);
cy2 = y2 - Math.sqrt(dRadius * dRadius - (x1 - x2) * (x1 - x2) / 4.0);
}
else {
k_verticle = -1.0 / k;
mid_x = (x1 + x2) / 2.0;
mid_y = (y1 + y2) / 2.0;
a = 1.0 + k_verticle * k_verticle;
b = -2 * mid_x - k_verticle * k_verticle * (x1 + x2);
c = mid_x * mid_x + k_verticle * k_verticle * (x1 + x2) * (x1 + x2) / 4.0 -
(dRadius * dRadius - ((mid_x - x1) * (mid_x - x1) + (mid_y - y1) * (mid_y - y1)));
cx1 = (-1.0 * b + Math.sqrt(b * b - 4 * a * c)) / (2 * a);
cx2 = (-1.0 * b - Math.sqrt(b * b - 4 * a * c)) / (2 * a);
cy1 = this.y_Coordinates(mid_x, mid_y, k_verticle, cx1);
cy2 = this.y_Coordinates(mid_x, mid_y, k_verticle, cx2);
}
//cx2,cy2为顺时针圆心坐标，cx1,cy1为逆时针圆心坐标
if (isNeg) {
cx = cx1;
cy = cy1;
}
else {
cx = cx2;
cy = cy2;
}
return {x: cx, y: cy, r: Math.sqrt(Math.pow(cx - x1, 2) + Math.pow(cy - y1, 2))};
}
y_Coordinates(x, y, k, x0) {
return k * x0 - k * x + y;
}
// 设置新的红绿灯数据
setData(data){
this.dataXY.forEach((dataXYItem, dataXYIndex) => {
dataXYItem.trafficLights.forEach((trafficLight, trafficLightIndex) => {
trafficLight.color = this.laneStyle.trafficLight.colors[data[dataXYIndex].lanes[trafficLightIndex].nChannelNumberPhase - 1]
})
})
this.ctx.clearRect(0,0,this.w,this.h)
this.draw()
}
// 绘制
draw() {
this.drawRegion()
this.drawLines()
this.drawDirectionIdentifyings()
this.drawZebraCrossing()
this.drawTrafficLight()
// this.drawHelper()
}
drawRegion() {
this.ctx.save()
// 缩放
// this.ctx.translate(this.w / 2, this.h / 2)
// this.ctx.scale(this.scaleC, this.scaleC)
// this.ctx.translate(-this.w / 2, -this.h / 2)
this.ctx.beginPath()
this.ctx.fillStyle = this.laneStyle.region.background
this.ctx.lineWidth = this.laneStyle.region.width
this.ctx.strokeStyle = this.laneStyle.region.color
this.ctx.lineJoin = 'round';
for (let i = 0; i < this.region.length; i++) {
let regionItem = this.region[i]
if (regionItem.type === 'connect') {
if (regionItem?.point?.length === 2 && this.laneStyle.region.CurveType !== 'arc') {
// 直线
regionItem.point.forEach(item => {
this.ctx.lineTo(item.x, item.y)
})
} else if (this.laneStyle.region.CurveType === 'arc') {
// 圆
if(regionItem.OR)
this.ctx.arc(regionItem.OR.x, regionItem.OR.y, regionItem.OR.r, regionItem.OR.startAngle * Math.PI / 180, regionItem.OR.endAngle * Math.PI / 180, regionItem.OR.anticlockwise)
} else if (this.laneStyle.region.CurveType === 'normal') {
// 插值
regionItem.point.forEach(item => {
this.ctx.lineTo(item.x, item.y)
})
} else {
// 二次贝塞尔
this.ctx.lineTo(regionItem.point[0].x, regionItem.point[0].y)
this.ctx.quadraticCurveTo(regionItem.point[1].x, regionItem.point[1].y, regionItem.point[2].x, regionItem.point[2].y)
}
} else {
this.ctx.lineTo(regionItem.x0, regionItem.y0)
this.ctx.lineTo(regionItem.x1, regionItem.y1)
this.ctx.lineTo(regionItem.x2, regionItem.y2)
this.ctx.lineTo(regionItem.x3, regionItem.y3)
}
}
this.ctx.fill()
this.ctx.stroke()
this.ctx.closePath()
this.ctx.restore()
}
drawLines() {
this.dataXY.forEach((dataXYItem, dataXYIndex) => {
dataXYItem.lines.forEach(lineItem => {
if (lineItem.type !== 'outer') {
this.ctx.save()
// 缩放
// this.ctx.translate(this.w / 2, this.h / 2)
// this.ctx.scale(this.scaleC, this.scaleC)
// this.ctx.translate(-this.w / 2, -this.h / 2)
this.ctx.beginPath()
this.ctx.lineWidth = lineItem.style.width
this.ctx.strokeStyle = lineItem.style.color
if (lineItem.style.type !== 'solid') {
this.ctx.setLineDash(lineItem.style.type);
}
this.ctx.lineTo(lineItem.x0, lineItem.y0)
this.ctx.lineTo(lineItem.x1, lineItem.y1)
this.ctx.stroke()
this.ctx.closePath()
this.ctx.restore()
}
})
})
}
drawDirectionIdentifyings() {
this.dataXY.forEach((dataXYItem, dataXYIndex) => {
dataXYItem.directionIdentifyings.forEach(directionIdentifying => {
this.ctx.save()
// 缩放
// this.ctx.translate(this.w / 2, this.h / 2)
// this.ctx.scale(this.scaleC, this.scaleC)
// this.ctx.translate(-this.w / 2, -this.h / 2)
directionIdentifying.points.forEach(pointItem => {
this.ctx.beginPath()
this.ctx.lineWidth = directionIdentifying.w
this.ctx.strokeStyle = this.laneStyle.direction.background
pointItem.forEach(item => {
this.ctx.lineTo(item.x, item.y)
})
this.ctx.stroke()
this.ctx.closePath()
})
directionIdentifying.arrowPoints.forEach(arrowPoint => {
this.ctx.beginPath()
this.ctx.fillStyle = this.laneStyle.direction.background
arrowPoint.forEach(item => {
this.ctx.lineTo(item.x, item.y)
})
this.ctx.fill()
this.ctx.closePath()
})
this.ctx.restore()
})
})
}
drawTrafficLight() {
this.dataXY.forEach((dataXYItem, dataXYIndex) => {
dataXYItem.trafficLights.forEach(trafficLight => {
this.ctx.save()
// 缩放
// this.ctx.translate(this.w / 2, this.h / 2)
// this.ctx.scale(this.scaleC, this.scaleC)
// this.ctx.translate(-this.w / 2, -this.h / 2)
this.ctx.beginPath()
this.ctx.fillStyle = trafficLight.color
this.ctx.arc(trafficLight.x, trafficLight.y, trafficLight.r, 0, Math.PI * 2)
this.ctx.fill()
this.ctx.closePath()
this.ctx.restore()
})
})
}
drawZebraCrossing() {
this.dataXY.forEach((dataXYItem, dataXYIndex) => {
this.ctx.save()
// 缩放
// this.ctx.translate(this.w / 2, this.h / 2)
// this.ctx.scale(this.scaleC, this.scaleC)
// this.ctx.translate(-this.w / 2, -this.h / 2)
this.ctx.beginPath()
this.ctx.lineWidth = this.laneStyle.zebraCrossing.height
this.ctx.strokeStyle = this.laneStyle.zebraCrossing.color
this.ctx.setLineDash(this.laneStyle.zebraCrossing.type);
dataXYItem.zebraCrossing.forEach(zebraCrossing => {
this.ctx.lineTo(zebraCrossing.x, zebraCrossing.y)
})
this.ctx.stroke()
this.ctx.closePath()
this.ctx.restore()
})
}
drawHelper() {
// 绘制车道方向数字，用来查看车道是否正确
this.ctx.beginPath()
this.ctx.fillStyle = '#fff'
this.ctx.font = 20 * this.dpr + 'px Arial'
for (let i = 0; i < this.region.length; i++) {
let regionItem = this.region[i]
this.ctx.fillText(regionItem.nApproachDirection, regionItem.x0, regionItem.y0)
}
this.ctx.closePath()
// 绘制坐标线
this.ctx.save()
this.ctx.lineWidth = 2 * this.dpr
this.ctx.strokeStyle = 'red'
this.ctx.beginPath()
this.ctx.lineTo(this.w / 2, 0)
this.ctx.lineTo(this.w / 2, this.h)
this.ctx.stroke()
this.ctx.closePath()
this.ctx.beginPath()
this.ctx.lineTo(0, this.h / 2)
this.ctx.lineTo(this.w, this.h / 2)
this.ctx.stroke()
this.ctx.closePath()
this.ctx.restore()
// 绘制方向标识
let testKeys = ['0001', '0100', '1000', '0010', '0101', '1001', '0011', '1100', '0110', '1010', '1101', '1011', '0111', '1110', '1111']
let width = this.w / testKeys.length
let w = width * this.laneStyle.direction.widthProportion
let h = w * this.laneStyle.direction.HeightWidthProportion
testKeys.forEach((key, index) => {
let { arrowPoints, points } = this.getDirectionIdentifyings(key, w, h, { x: width * index + width / 2, y: this.h / 2 })
this.ctx.save()
// 缩放
// this.ctx.translate(this.w / 2, this.h / 2)
// this.ctx.scale(this.scaleC, this.scaleC)
// this.ctx.translate(-this.w / 2, -this.h / 2)
points.forEach(pointItem => {
this.ctx.beginPath()
this.ctx.lineWidth = w
this.ctx.strokeStyle = '#fff'
pointItem.forEach(item => {
this.ctx.lineTo(item.x, item.y)
})
this.ctx.stroke()
this.ctx.closePath()
})
arrowPoints.forEach(arrowPoint => {
this.ctx.beginPath()
this.ctx.fillStyle = '#fff'
arrowPoint.forEach(item => {
this.ctx.lineTo(item.x, item.y)
})
this.ctx.fill()
this.ctx.closePath()
})
this.ctx.restore()
})
}
}
export default Lane
文章来源:https://blog.csdn.net/qq_42231248/article/details/135287252
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！