svg
This commit is contained in:
aarizona
parent
6e9eabae56
commit
8e48b92f42
|
|
@ -5,20 +5,21 @@ import PF, { Grid } from 'pathfinding'
|
|||
|
||||
import { useFloorplanStore } from '../stores/floorplan';
|
||||
|
||||
type PathItem = { path: string, unwalkable: boolean, x: number, y: number }
|
||||
const floorplan = useFloorplanStore()
|
||||
|
||||
const canvasElement = ref();
|
||||
const context = ref();
|
||||
|
||||
const grid = ref<Grid>()
|
||||
const startPoint = ref<number[]>()
|
||||
const endPoint = ref<number[]>()
|
||||
const startPoint = ref<{ x: number, y: number }>({ x: 13, y: 19 })
|
||||
const endPoint = ref<{ x: number, y: number }>()
|
||||
const startToEndPath = ref()
|
||||
|
||||
const plan = useFloorplanStore()
|
||||
const paths = ref<PathItem[]>([])
|
||||
|
||||
const newDraw = () => {
|
||||
startPoint.value = undefined
|
||||
endPoint.value = undefined
|
||||
startToEndPath.value = undefined
|
||||
|
||||
|
|
@ -33,61 +34,71 @@ const newDraw = () => {
|
|||
})
|
||||
});
|
||||
|
||||
grid.value = new PF.Grid(plan.np_array.map(y => y.map(x => x > 0 ? 1 : 0)))
|
||||
const quantum_lines = plan.prepared_array
|
||||
quantum_lines.forEach((line, indexY) => {
|
||||
line.forEach((point, indexX) => {
|
||||
const targetX = indexX * plan.chunkSize
|
||||
const targetY = indexY * plan.chunkSize
|
||||
paths.value.push({
|
||||
path: `M${targetX} ${targetY} ${targetX + plan.chunkSize} ${targetY} ${targetX + plan.chunkSize} ${targetY + plan.chunkSize} ${targetX} ${targetY + plan.chunkSize}Z`,
|
||||
unwalkable: !!point,
|
||||
x: indexX,
|
||||
y: indexY,
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
grid.value = new PF.Grid(plan.prepared_array.map(y => y.map(x => x > 0 ? 1 : 0)))
|
||||
}
|
||||
|
||||
const setPoint = (event: MouseEvent) => {
|
||||
try {
|
||||
if (!event.currentTarget) return
|
||||
const target = (<HTMLCanvasElement>event.currentTarget)
|
||||
const bound = target.getBoundingClientRect()
|
||||
const findPath = async () => {
|
||||
const finder = new PF.DijkstraFinder();
|
||||
|
||||
const targetX = event.x - bound.x
|
||||
const targetY = event.y - bound.y
|
||||
startToEndPath.value = finder.findPath(
|
||||
Math.round(startPoint.value.x),
|
||||
Math.round(startPoint.value.y),
|
||||
Math.round(endPoint.value.x),
|
||||
Math.round(endPoint.value.y),
|
||||
(grid.value as Grid)
|
||||
);
|
||||
console.log({ path: startToEndPath.value.length })
|
||||
}
|
||||
|
||||
const ctx = (context.value as CanvasRenderingContext2D)
|
||||
const setPointSvg = (item: PathItem) => {
|
||||
endPoint.value = { x: item.x, y: item.y }
|
||||
findPath()
|
||||
}
|
||||
|
||||
if (!startPoint.value) {
|
||||
startPoint.value = [targetX, targetY]
|
||||
ctx.fillStyle = 'rgb(0,255,0,0.75)';
|
||||
ctx.beginPath();
|
||||
ctx.arc(targetX, targetY, 10, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
} else
|
||||
if (!endPoint.value) {
|
||||
endPoint.value = [targetX, targetY]
|
||||
ctx.fillStyle = 'rgb(0,0,255,0.75)';
|
||||
ctx.beginPath();
|
||||
ctx.arc(targetX, targetY, 10, 0, 2 * Math.PI);
|
||||
ctx.fill();
|
||||
|
||||
const finder = new PF.DijkstraFinder();
|
||||
|
||||
startToEndPath.value = finder.findPath(
|
||||
Math.round(startPoint.value[0]),
|
||||
Math.round(startPoint.value[1]),
|
||||
Math.round(endPoint.value[0]),
|
||||
Math.round(endPoint.value[1]),
|
||||
(grid.value as Grid)
|
||||
);
|
||||
startToEndPath.value.forEach((element: number[]) => {
|
||||
ctx.fillRect(element[0], element[1], 1, 1)
|
||||
});
|
||||
} else {
|
||||
newDraw()
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
const getFillStyle = (item: PathItem) => {
|
||||
if (item.unwalkable) {
|
||||
return 'rgba(0,0,0,0.5)'
|
||||
} else if (item.x == startPoint.value.x && item.y == startPoint.value.y) {
|
||||
return 'lawngreen'
|
||||
} else if (endPoint.value && item.x == endPoint.value.x && item.y == endPoint.value.y) {
|
||||
return 'blue'
|
||||
} else if (startToEndPath.value && startToEndPath.value.find(el => el.x == item.x && el.y == item.y)) {
|
||||
return 'gold'
|
||||
} else {
|
||||
return 'transparent'
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await floorplan.getData()
|
||||
newDraw()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="container" style="display: flex; justify-content: center; align-items: center;">
|
||||
<div class="container" style="display: flex; justify-content: center; align-items: center; flex-direction: column;">
|
||||
<canvas ref="canvasElement" width="1200" height="600"></canvas>
|
||||
|
||||
<svg ref="svgElement" width="1200" height="600" style="position: absolute;">
|
||||
<path v-for="item in paths" :d="item.path" :fill="getFillStyle(item)" @click="setPointSvg(item)">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
<style scoped>
|
||||
svg path:hover {
|
||||
fill: red
|
||||
}
|
||||
</style>
|
||||
|
|
@ -6,6 +6,7 @@ export const useFloorplanStore = defineStore('floorplan', {
|
|||
state: () => {
|
||||
return {
|
||||
title: undefined,
|
||||
chunkSize: 10,
|
||||
np_array: [] as number[][],
|
||||
prepared_array: [] as number[][]
|
||||
}
|
||||
|
|
@ -17,16 +18,17 @@ export const useFloorplanStore = defineStore('floorplan', {
|
|||
const data = await res.json()
|
||||
this.title = data.title
|
||||
this.np_array = data.np_field
|
||||
const chunkSize = 5
|
||||
this.prepared_array = [...chunks(data.np_field, chunkSize)].map(line => {
|
||||
this.prepared_array = [...chunks(data.np_field, this.chunkSize)].map(line => {
|
||||
const line_data = [] as any[][]
|
||||
line.map((item: any) => [...chunks(item, chunkSize)]).map((item) => {
|
||||
line.map((item: any) => [...chunks(item, this.chunkSize)]).map((item, j) => {
|
||||
item.map((one_line, k) => {
|
||||
if (!line_data[k]) line_data[k] = []
|
||||
line_data[k].push(...one_line)
|
||||
})
|
||||
})
|
||||
return line_data.map(el=> el.some(deep => deep > 0) ? 1 : 0)
|
||||
return line_data.map(el => {
|
||||
return el.filter(e => e > 0).length > 0 ? 1 : 0
|
||||
})
|
||||
});
|
||||
} catch (error) {
|
||||
// this.list = []
|
||||
|
|
|
|||
Loading…
Reference in New Issue