地图路线拖动绘制
This commit is contained in:
yyy
parent
64d93c27df
commit
59a7eea5fe
@ -2,7 +2,12 @@
|
||||
<template>
|
||||
<div :style="wrapperStyle" class="vue-ruler-wrapper" onselectstart="return false;" ref="el">
|
||||
<section>
|
||||
<div ref="horizontalRuler" class="vue-ruler-h" @mousedown.stop="horizontalDragRuler">
|
||||
<div
|
||||
ref="horizontalRuler"
|
||||
class="vue-ruler-h"
|
||||
@mousedown.stop="horizontalDragRuler"
|
||||
:style="{ width: width + 'px' }"
|
||||
>
|
||||
<span
|
||||
v-for="(item, index) in xScale"
|
||||
:key="index"
|
||||
@ -11,7 +16,12 @@
|
||||
>{{ item.id }}</span
|
||||
>
|
||||
</div>
|
||||
<div ref="verticalRuler" class="vue-ruler-v" @mousedown.stop="verticalDragRuler">
|
||||
<div
|
||||
ref="verticalRuler"
|
||||
class="vue-ruler-v"
|
||||
@mousedown.stop="verticalDragRuler"
|
||||
:style="{ height: height + 'px' }"
|
||||
>
|
||||
<span
|
||||
v-for="(item, index) in yScale"
|
||||
:key="index"
|
||||
@ -82,6 +92,12 @@ const props = defineProps({
|
||||
type: Number,
|
||||
default: 100,
|
||||
validator: (val) => val % 10 === 0
|
||||
},
|
||||
width: {
|
||||
type: Number
|
||||
},
|
||||
height: {
|
||||
type: Number
|
||||
}
|
||||
})
|
||||
|
||||
@ -166,12 +182,10 @@ onBeforeUnmount(() => {
|
||||
off(document, 'mouseup', dottedLineUp)
|
||||
off(window, 'resize', windowResize)
|
||||
})
|
||||
//function
|
||||
const init = () => {
|
||||
box()
|
||||
scaleCalc()
|
||||
}
|
||||
|
||||
const windowResize = () => {
|
||||
xScale.value = [{ id: 0 }]
|
||||
yScale.value = [{ id: 0 }]
|
||||
@ -193,8 +207,10 @@ const box = () => {
|
||||
getCalcRevise(xScale.value, contentLeft)
|
||||
getCalcRevise(yScale.value, contentTop)
|
||||
}
|
||||
windowWidth.value = document.documentElement.clientWidth - leftSpacing
|
||||
windowHeight.value = document.documentElement.clientHeight - topSpacing - 80
|
||||
// windowWidth.value = document.documentElement.clientWidth - leftSpacing
|
||||
// windowHeight.value = document.documentElement.clientHeight - topSpacing - 80
|
||||
windowWidth.value = props.width + 18
|
||||
windowHeight.value = props.height + 18
|
||||
rulerWidth = verticalRuler.value.clientWidth
|
||||
rulerHeight = horizontalRuler.value.clientHeight
|
||||
}
|
||||
@ -204,8 +220,8 @@ const setSpacing = () => {
|
||||
}
|
||||
// 计算刻度
|
||||
const scaleCalc = () => {
|
||||
getCalc(xScale.value, windowWidth.value)
|
||||
getCalc(yScale.value, windowHeight.value)
|
||||
getCalc(xScale.value, props.width)
|
||||
getCalc(yScale.value, props.height)
|
||||
}
|
||||
|
||||
//获取刻度
|
||||
@ -360,7 +376,7 @@ const dragVerticalLine = (id) => {
|
||||
}
|
||||
|
||||
.vue-ruler-h {
|
||||
width: calc(100% - 18px);
|
||||
// width: calc(100% - 18px);
|
||||
background-color: #333;
|
||||
height: 18px;
|
||||
left: 18px;
|
||||
@ -371,7 +387,7 @@ const dragVerticalLine = (id) => {
|
||||
|
||||
.vue-ruler-v {
|
||||
width: 18px;
|
||||
height: 85vh;
|
||||
// height: 85vh;
|
||||
top: 18px;
|
||||
opacity: 0.6;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAyCAMAAABmvHtTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACBJREFUeNpiYGBEBwwMTGiAakI0NX7U9aOuHyGuBwgwAH6bBkAR6jkzAAAAAElFTkSuQmCC)
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,127 +1,190 @@
|
||||
<template>
|
||||
<div class="box">
|
||||
<svg :width="boxWidth" :height="boxHeight">
|
||||
<path
|
||||
v-for="(curve, index) in curves"
|
||||
<div>
|
||||
<svg
|
||||
ref="svgElement"
|
||||
:width="width"
|
||||
:height="height"
|
||||
@mousedown="startDrawing"
|
||||
@mousemove="drawLine"
|
||||
@mouseup="stopDrawing"
|
||||
@mouseleave="stopDrawing"
|
||||
>
|
||||
<!-- 渲染所有点 -->
|
||||
<circle
|
||||
v-for="(point, index) in points"
|
||||
:key="index"
|
||||
:d="getCurvePath(curve)"
|
||||
:stroke="curve.isSelected ? 'red' : 'blue'"
|
||||
:cx="point.x"
|
||||
:cy="point.y"
|
||||
r="5"
|
||||
fill="red"
|
||||
@mousedown="startFromPoint(index, $event)"
|
||||
/>
|
||||
|
||||
<!-- 渲染所有直线 -->
|
||||
<path
|
||||
v-for="(line, index) in lines"
|
||||
:key="'line-' + index"
|
||||
:d="`M ${line.startPointX} ${line.startPointY} L ${line.endPointX} ${line.endPointY}`"
|
||||
stroke="black"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
@mousedown="selectCurve(index)"
|
||||
/>
|
||||
<circle
|
||||
v-for="(curve, index) in curves"
|
||||
:key="'start-' + index"
|
||||
:cx="curve.startControlX"
|
||||
:cy="curve.startControlY"
|
||||
r="5"
|
||||
fill="green"
|
||||
@mousedown="startDrag(index, 'start')"
|
||||
/>
|
||||
<circle
|
||||
v-for="(curve, index) in curves"
|
||||
:key="'end-' + index"
|
||||
:cx="curve.endControlX"
|
||||
:cy="curve.endControlY"
|
||||
r="5"
|
||||
fill="green"
|
||||
@mousedown="startDrag(index, 'end')"
|
||||
|
||||
<!-- 实时绘制当前直线 -->
|
||||
<path
|
||||
v-if="isDrawing"
|
||||
:d="`M ${startX} ${startY} L ${currentX} ${currentY}`"
|
||||
stroke="blue"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<!-- 显示直线数据 -->
|
||||
<div>
|
||||
<h3>直线数据：</h3>
|
||||
<pre>{{ lines }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
<script>
|
||||
import { ref } from 'vue'
|
||||
|
||||
// 盒子的宽度和高度
|
||||
const boxWidth = ref(800)
|
||||
const boxHeight = ref(600)
|
||||
export default {
|
||||
setup() {
|
||||
const svgElement = ref(null) // SVG 元素的引用
|
||||
const width = 800 // SVG 宽度
|
||||
const height = 600 // SVG 高度
|
||||
|
||||
// 初始点位数据
|
||||
const curves = ref([
|
||||
{
|
||||
startX: 100,
|
||||
startY: 100,
|
||||
endX: 300,
|
||||
endY: 100,
|
||||
startControlX: 100,
|
||||
startControlY: 100,
|
||||
endControlX: 300,
|
||||
endControlY: 100,
|
||||
isSelected: false
|
||||
},
|
||||
{
|
||||
startX: 200,
|
||||
startY: 200,
|
||||
endX: 400,
|
||||
endY: 200,
|
||||
startControlX: 200,
|
||||
startControlY: 200,
|
||||
endControlX: 400,
|
||||
endControlY: 400,
|
||||
isSelected: false
|
||||
}
|
||||
])
|
||||
// 点位数据
|
||||
const points = ref([
|
||||
{ x: 10, y: 10 },
|
||||
{ x: 30, y: 100 },
|
||||
{ x: 40, y: 40 },
|
||||
{ x: 230, y: 400 },
|
||||
{ x: 750, y: 640 }
|
||||
])
|
||||
|
||||
// 当前拖动的曲线索引和控制点类型
|
||||
const dragging = ref({
|
||||
index: null,
|
||||
type: null
|
||||
})
|
||||
// 直线数据
|
||||
const lines = ref([])
|
||||
|
||||
// 获取曲线的路径字符串
|
||||
const getCurvePath = (curve) => {
|
||||
return `M${curve.startX},${curve.startY} C${curve.startControlX},${curve.startControlY} ${curve.endControlX},${curve.endControlY} ${curve.endX},${curve.endY}`
|
||||
}
|
||||
// 当前绘制的直线状态
|
||||
const isDrawing = ref(false)
|
||||
const startX = ref(0)
|
||||
const startY = ref(0)
|
||||
const currentX = ref(0)
|
||||
const currentY = ref(0)
|
||||
const startPointIndex = ref(null) // 起始点的索引
|
||||
|
||||
// 选中曲线
|
||||
const selectCurve = (index) => {
|
||||
curves.value.forEach((curve, i) => {
|
||||
curve.isSelected = i === index
|
||||
})
|
||||
console.log('Selected curve:', curves.value[index])
|
||||
}
|
||||
// 从点开始绘制
|
||||
const startFromPoint = (index, event) => {
|
||||
const point = points.value[index]
|
||||
startX.value = point.x
|
||||
startY.value = point.y
|
||||
startPointIndex.value = index
|
||||
isDrawing.value = true
|
||||
event.preventDefault() // 防止默认行为
|
||||
}
|
||||
|
||||
// 开始拖动控制点
|
||||
const startDrag = (index, type) => {
|
||||
dragging.value = { index, type }
|
||||
window.addEventListener('mousemove', handleDrag)
|
||||
window.addEventListener('mouseup', endDrag)
|
||||
}
|
||||
// 实时绘制
|
||||
const drawLine = (event) => {
|
||||
if (isDrawing.value) {
|
||||
const rect = svgElement.value.getBoundingClientRect()
|
||||
currentX.value = event.clientX - rect.left
|
||||
currentY.value = event.clientY - rect.top
|
||||
}
|
||||
}
|
||||
|
||||
// 处理拖动事件
|
||||
const handleDrag = (event) => {
|
||||
if (dragging.value.index !== null) {
|
||||
const curve = curves.value[dragging.value.index]
|
||||
let newX = event.offsetX
|
||||
let newY = event.offsetY
|
||||
// 结束绘制
|
||||
const stopDrawing = () => {
|
||||
if (isDrawing.value) {
|
||||
// 找到最近的终点
|
||||
const endPointIndex = findClosestPoint(currentX.value, currentY.value)
|
||||
|
||||
// 确保控制点不超出盒子范围
|
||||
newX = Math.max(0, Math.min(newX, boxWidth.value))
|
||||
newY = Math.max(0, Math.min(newY, boxHeight.value))
|
||||
if (endPointIndex !== null && endPointIndex !== startPointIndex.value) {
|
||||
const endPoint = points.value[endPointIndex]
|
||||
const newLine = {
|
||||
startPointX: startX.value,
|
||||
startPointY: startY.value,
|
||||
endPointX: endPoint.x,
|
||||
endPointY: endPoint.y
|
||||
}
|
||||
|
||||
if (dragging.value.type === 'start') {
|
||||
curve.startControlX = newX
|
||||
curve.startControlY = newY
|
||||
} else {
|
||||
curve.endControlX = newX
|
||||
curve.endControlY = newY
|
||||
// 检查是否已存在相同的直线
|
||||
const isDuplicate = lines.value.some(
|
||||
(line) =>
|
||||
(line.startPointX === newLine.startPointX &&
|
||||
line.startPointY === newLine.startPointY &&
|
||||
line.endPointX === newLine.endPointX &&
|
||||
line.endPointY === newLine.endPointY) ||
|
||||
(line.startPointX === newLine.endPointX &&
|
||||
line.startPointY === newLine.endPointY &&
|
||||
line.endPointX === newLine.startPointX &&
|
||||
line.endPointY === newLine.startPointY)
|
||||
)
|
||||
|
||||
if (!isDuplicate) {
|
||||
// 保存当前直线
|
||||
lines.value.push(newLine)
|
||||
}
|
||||
}
|
||||
|
||||
// 重置状态
|
||||
isDrawing.value = false
|
||||
startX.value = 0
|
||||
startY.value = 0
|
||||
currentX.value = 0
|
||||
currentY.value = 0
|
||||
startPointIndex.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// 找到最近的点
|
||||
const findClosestPoint = (x, y) => {
|
||||
let minDistance = Infinity
|
||||
let closestIndex = null
|
||||
|
||||
points.value.forEach((point, index) => {
|
||||
const distance = Math.sqrt((point.x - x) ** 2 + (point.y - y) ** 2)
|
||||
if (distance < minDistance && distance < 10) {
|
||||
// 10 是点的捕捉范围
|
||||
minDistance = distance
|
||||
closestIndex = index
|
||||
}
|
||||
})
|
||||
|
||||
return closestIndex
|
||||
}
|
||||
|
||||
return {
|
||||
svgElement,
|
||||
width,
|
||||
height,
|
||||
points,
|
||||
lines,
|
||||
isDrawing,
|
||||
startX,
|
||||
startY,
|
||||
currentX,
|
||||
currentY,
|
||||
startFromPoint,
|
||||
drawLine,
|
||||
stopDrawing
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 结束拖动
|
||||
const endDrag = () => {
|
||||
dragging.value = { index: null, type: null }
|
||||
window.removeEventListener('mousemove', handleDrag)
|
||||
window.removeEventListener('mouseup', endDrag)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box {
|
||||
border: 1px solid black;
|
||||
svg {
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #f5f5f5;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user