测回重做bug
This commit is contained in:
yyy
parent
9af2e7382c
commit
9e50046f72
@ -770,32 +770,31 @@ const deactivatedHandle = () => {}
|
||||
//添加历史记录
|
||||
const addEditHistory = () => {
|
||||
//要判断是不是在最新的记录上修改 如果不是 要把currentIndex之后的记录都删掉 保持当前修改是最新的
|
||||
if (state.currentIndex !== state.allHistoryList.length - 1) {
|
||||
state.allHistoryList = state.allHistoryList.splice(0, state.currentIndex)
|
||||
state.currentIndex = state.allHistoryList.length
|
||||
state.allHistoryList.push({
|
||||
allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
|
||||
mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
|
||||
})
|
||||
} else {
|
||||
state.allHistoryList.push({
|
||||
allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
|
||||
mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
|
||||
})
|
||||
state.currentIndex++
|
||||
if (state.currentIndex < state.allHistoryList.length - 1) {
|
||||
state.allHistoryList.splice(state.currentIndex + 1)
|
||||
}
|
||||
state.allHistoryList.push({
|
||||
allMapPointInfo: JSON.parse(JSON.stringify(state.allMapPointInfo)),
|
||||
mapRouteList: JSON.parse(JSON.stringify(state.mapRouteList))
|
||||
})
|
||||
state.currentIndex = state.allHistoryList.length - 1
|
||||
interfaceRefreshed.value = true
|
||||
}
|
||||
|
||||
//上一步
|
||||
const backPreviousStep = () => {
|
||||
console.log(state.currentIndex)
|
||||
console.log(state.allMapPointInfo)
|
||||
console.log(state.allHistoryList)
|
||||
if (state.currentIndex > 0) {
|
||||
state.currentIndex--
|
||||
state.allMapPointInfo = state.allHistoryList[state.currentIndex]?.allMapPointInfo || []
|
||||
state.mapRouteList = state.allHistoryList[state.currentIndex]?.mapRouteList || []
|
||||
state.allMapPointInfo.splice(
|
||||
0,
|
||||
state.allMapPointInfo.length,
|
||||
...JSON.parse(JSON.stringify(state.allHistoryList[state.currentIndex]?.allMapPointInfo))
|
||||
)
|
||||
state.mapRouteList.splice(
|
||||
0,
|
||||
state.mapRouteList.length,
|
||||
...JSON.parse(JSON.stringify(state.allHistoryList[state.currentIndex]?.mapRouteList))
|
||||
)
|
||||
} else {
|
||||
message.warning('没了老铁')
|
||||
}
|
||||
@ -804,8 +803,16 @@ const backPreviousStep = () => {
|
||||
const backNextStep = () => {
|
||||
if (state.currentIndex < state.allHistoryList.length - 1) {
|
||||
state.currentIndex++
|
||||
state.allMapPointInfo = state.allHistoryList[state.currentIndex]?.allMapPointInfo || []
|
||||
state.mapRouteList = state.allHistoryList[state.currentIndex]?.mapRouteList || []
|
||||
state.allMapPointInfo.splice(
|
||||
0,
|
||||
state.allMapPointInfo.length,
|
||||
...JSON.parse(JSON.stringify(state.allHistoryList[state.currentIndex]?.allMapPointInfo))
|
||||
)
|
||||
state.mapRouteList.splice(
|
||||
0,
|
||||
state.mapRouteList.length,
|
||||
...JSON.parse(JSON.stringify(state.allHistoryList[state.currentIndex]?.mapRouteList))
|
||||
)
|
||||
} else {
|
||||
message.warning('没了老铁')
|
||||
}
|
||||
|
||||
@ -1,110 +1,79 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 选择单向或双向箭头 -->
|
||||
<select v-model="isDoubleArrow">
|
||||
<option value="false">单向箭头</option>
|
||||
<option value="true">双向箭头</option>
|
||||
</select>
|
||||
<svg width="500" height="500">
|
||||
<!-- 定义箭头样式 -->
|
||||
<defs>
|
||||
<!-- 正向箭头 -->
|
||||
<marker
|
||||
id="forward-arrow"
|
||||
viewBox="0 0 10 10"
|
||||
refX="10"
|
||||
refY="5"
|
||||
markerWidth="8"
|
||||
markerHeight="8"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
|
||||
</marker>
|
||||
<!-- 反向箭头 -->
|
||||
<marker
|
||||
id="backward-arrow"
|
||||
viewBox="0 0 10 10"
|
||||
refX="0"
|
||||
refY="5"
|
||||
markerWidth="8"
|
||||
markerHeight="8"
|
||||
orient="auto"
|
||||
>
|
||||
<path d="M 10 0 L 0 5 L 10 10 z" fill="black" />
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- 带有中间箭头的直线 -->
|
||||
<line :x1="startX" :y1="startY" :x2="endX" :y2="endY" stroke="black" stroke-width="2" />
|
||||
<path
|
||||
:d="getLineMidArrowPath()"
|
||||
stroke="none"
|
||||
fill="black"
|
||||
:marker-start="isDoubleArrow === 'true' ? 'url(#backward-arrow)' : ''"
|
||||
:marker-end="isDoubleArrow === 'true' ? 'url(#forward-arrow)' : 'url(#forward-arrow)'"
|
||||
/>
|
||||
|
||||
<!-- 带有中间箭头的贝塞尔曲线 -->
|
||||
<path :d="bezierPath" stroke="black" stroke-width="2" fill="none" />
|
||||
<path
|
||||
:d="getBezierMidArrowPath()"
|
||||
stroke="none"
|
||||
fill="black"
|
||||
:marker-start="isDoubleArrow === 'true' ? 'url(#backward-arrow)' : ''"
|
||||
:marker-end="isDoubleArrow === 'true' ? 'url(#forward-arrow)' : 'url(#forward-arrow)'"
|
||||
/>
|
||||
</svg>
|
||||
<ul>
|
||||
<li v-for="(point, index) in points" :key="index">
|
||||
点位 {{ index + 1 }}: ({{ point.x }}, {{ point.y }})
|
||||
<button @click="movePoint(index)">移动</button>
|
||||
<button @click="deletePoint(index)">删除</button>
|
||||
</li>
|
||||
</ul>
|
||||
<button @click="addPoint">新增点位</button>
|
||||
<button @click="undo" :disabled="historyIndex === 0">撤回</button>
|
||||
<button @click="redo" :disabled="historyIndex === history.length - 1">重做</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { reactive, ref } from 'vue'
|
||||
|
||||
// 直线的起点和终点坐标
|
||||
const startX = ref(50)
|
||||
const startY = ref(50)
|
||||
const endX = ref(200)
|
||||
const endY = ref(50)
|
||||
// 初始化点位数据
|
||||
const points = reactive([
|
||||
{ x: 10, y: 20 },
|
||||
{ x: 30, y: 40 }
|
||||
])
|
||||
|
||||
// 贝塞尔曲线的路径
|
||||
const bezierPath = ref('M 50 200 C 100 250 200 250 200 200')
|
||||
// 操作历史记录
|
||||
const history = reactive([[...points]])
|
||||
// 历史记录指针
|
||||
const historyIndex = ref(0)
|
||||
|
||||
// 控制箭头是单向还是双向
|
||||
const isDoubleArrow = ref('false')
|
||||
|
||||
// 计算直线中间箭头的路径
|
||||
const getLineMidArrowPath = () => {
|
||||
const midX = (startX.value + endX.value) / 2
|
||||
const midY = (startY.value + endY.value) / 2
|
||||
|
||||
let dx = endX.value - startX.value
|
||||
let dy = endY.value - startY.value
|
||||
let length = Math.sqrt(dx * dx + dy * dy)
|
||||
|
||||
if (length === 0) {
|
||||
return `M ${midX} ${midY} L ${midX} ${midY}`
|
||||
}
|
||||
|
||||
const unitDx = dx / length
|
||||
const unitDy = dy / length
|
||||
|
||||
const arrowLength = 1
|
||||
const startXArrow = midX - unitDx * arrowLength
|
||||
const startYArrow = midY - unitDy * arrowLength
|
||||
const endXArrow = midX
|
||||
const endYArrow = midY
|
||||
|
||||
return `M ${startXArrow} ${startYArrow} L ${endXArrow} ${endYArrow}`
|
||||
// 新增点位方法
|
||||
const addPoint = () => {
|
||||
const newPoint = { x: Math.random() * 100, y: Math.random() * 100 }
|
||||
points.push(newPoint)
|
||||
updateHistory()
|
||||
}
|
||||
|
||||
// 计算贝塞尔曲线中间箭头的路径
|
||||
const getBezierMidArrowPath = () => {
|
||||
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
|
||||
path.setAttribute('d', bezierPath.value)
|
||||
const length = path.getTotalLength()
|
||||
const midPoint = path.getPointAtLength(length / 2)
|
||||
const prevPoint = path.getPointAtLength(length / 2 - 1)
|
||||
// 移动点位方法
|
||||
const movePoint = (index) => {
|
||||
points[index].x = Math.random() * 100
|
||||
points[index].y = Math.random() * 100
|
||||
updateHistory()
|
||||
}
|
||||
|
||||
return `M ${prevPoint.x} ${prevPoint.y} L ${midPoint.x} ${midPoint.y}`
|
||||
// 删除点位方法
|
||||
const deletePoint = (index) => {
|
||||
points.splice(index, 1)
|
||||
updateHistory()
|
||||
}
|
||||
|
||||
// 更新历史记录
|
||||
const updateHistory = () => {
|
||||
// 如果已经进行了撤回操作，移除撤回之后的历史记录
|
||||
if (historyIndex.value < history.length - 1) {
|
||||
history.splice(historyIndex.value + 1)
|
||||
}
|
||||
// 保存当前状态到历史记录
|
||||
history.push([...points])
|
||||
// 更新历史记录指针
|
||||
historyIndex.value++
|
||||
}
|
||||
|
||||
// 撤回操作
|
||||
const undo = () => {
|
||||
if (historyIndex.value > 0) {
|
||||
historyIndex.value--
|
||||
// 恢复到上一个状态
|
||||
points.splice(0, points.length, ...history[historyIndex.value])
|
||||
}
|
||||
}
|
||||
|
||||
// 重做操作
|
||||
const redo = () => {
|
||||
if (historyIndex.value < history.length - 1) {
|
||||
historyIndex.value++
|
||||
// 恢复到下一个状态
|
||||
points.splice(0, points.length, ...history[historyIndex.value])
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user