Merge branch 'xhf' of http://git.znkjfw.com/ak/zn-admin-vue3-wcs into xhf
This commit is contained in:
xhf
commit
4b54062344
@ -1,32 +1,52 @@
|
||||
<template>
|
||||
<!-- 新增设备 -->
|
||||
<Dialog v-model="dialogFormVisible" title="编辑路线" width="750" class="map-edit-route-dialog">
|
||||
<Dialog v-model="dialogFormVisible" title="编辑路线" width="780" class="map-edit-route-dialog">
|
||||
<el-form :model="form" label-width="120" ref="ruleFormRef">
|
||||
<el-row :gutter="24">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开始点位x轴" prop="startPointX" required>
|
||||
<el-input v-model="form.startPointX" placeholder="请输入开始点位x轴" type="number" />
|
||||
<el-input
|
||||
v-model="form.startPointX"
|
||||
placeholder="请输入开始点位x轴"
|
||||
type="number"
|
||||
:min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开始点位y轴" prop="startPointY" required>
|
||||
<el-input v-model="form.startPointY" placeholder="请输入开始点位y轴" type="number" />
|
||||
<el-input
|
||||
v-model="form.startPointY"
|
||||
placeholder="请输入开始点位y轴"
|
||||
type="number"
|
||||
:min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="结束点位x轴" prop="endPointX" required>
|
||||
<el-input v-model="form.endPointX" placeholder="请输入结束点位x轴" type="number" />
|
||||
<el-input
|
||||
v-model="form.endPointX"
|
||||
placeholder="请输入结束点位x轴"
|
||||
type="number"
|
||||
:min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="结束点位y轴" prop="endPointY" required>
|
||||
<el-input v-model="form.endPointY" placeholder="请输入结束点位y轴" type="number" />
|
||||
<el-input
|
||||
v-model="form.endPointY"
|
||||
placeholder="请输入结束点位y轴"
|
||||
type="number"
|
||||
:min="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="开始控制点x轴" prop="beginControlX" required>
|
||||
<el-input v-model="form.beginControlX" type="number" :disabled="true" />
|
||||
@ -38,7 +58,7 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="结束控制点x轴" prop="endControlX" required>
|
||||
<el-input v-model="form.endControlX" type="number" :disabled="true" />
|
||||
@ -50,7 +70,7 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="行走方法" prop="method" required>
|
||||
<el-select v-model="form.method" placeholder="请选择行走方法" @change="methodChange">
|
||||
@ -68,81 +88,69 @@
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="膨胀区域前" prop="expansionZoneFront" required>
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="form.expansionZoneFront"
|
||||
placeholder="请输入膨胀区域前"
|
||||
:precision="2"
|
||||
class="!w-170px"
|
||||
/>
|
||||
<span class="ml-3">米</span>
|
||||
</div>
|
||||
<el-input v-model="form.expansionZoneFront" type="number">
|
||||
<template #append>米</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="膨胀区域后" prop="expansionZoneAfter" required>
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="form.expansionZoneAfter"
|
||||
placeholder="请输入膨胀区域后"
|
||||
:precision="2"
|
||||
class="!w-170px"
|
||||
/>
|
||||
<span class="ml-3">米</span>
|
||||
</div>
|
||||
<el-input v-model="form.expansionZoneAfter" type="number">
|
||||
<template #append>米</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="膨胀区域左" prop="expansionZoneLeft" required>
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="form.expansionZoneLeft"
|
||||
placeholder="请输入膨胀区域左"
|
||||
:precision="2"
|
||||
class="!w-170px"
|
||||
/>
|
||||
<span class="ml-3">米</span>
|
||||
</div>
|
||||
<el-input v-model="form.expansionZoneLeft" type="number">
|
||||
<template #append>米</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="膨胀区域右" prop="expansionZoneRight" required>
|
||||
<div>
|
||||
<el-input-number
|
||||
v-model="form.expansionZoneRight"
|
||||
placeholder="请输入膨胀区域右"
|
||||
:precision="2"
|
||||
class="!w-170px"
|
||||
/>
|
||||
<span class="ml-3">米</span>
|
||||
</div>
|
||||
<el-input v-model="form.expansionZoneRight" type="number">
|
||||
<template #append>米</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="正向限速" prop="forwardSpeedLimit" required>
|
||||
<el-input
|
||||
v-model="form.forwardSpeedLimit"
|
||||
type="number"
|
||||
placeholder="请输入正向限速"
|
||||
/> </el-form-item
|
||||
></el-col>
|
||||
<div class="flex-center">
|
||||
<el-slider v-model="form.forwardSpeedLimit" :min="0.1" :max="10" :step="0.1" />
|
||||
<el-input
|
||||
v-model="form.forwardSpeedLimit"
|
||||
style="width: 200px; margin-left: 6px"
|
||||
type="number"
|
||||
>
|
||||
<template #append>m/s</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="反向限速" prop="reverseSpeedLimit" required>
|
||||
<el-input
|
||||
v-model="form.reverseSpeedLimit"
|
||||
type="number"
|
||||
placeholder="请输入反向限速"
|
||||
/> </el-form-item
|
||||
></el-col>
|
||||
<div class="flex-center">
|
||||
<el-slider v-model="form.reverseSpeedLimit" :min="0.1" :max="10" :step="0.1" />
|
||||
<el-input
|
||||
v-model="form.reverseSpeedLimit"
|
||||
style="width: 200px; margin-left: 6px"
|
||||
type="number"
|
||||
>
|
||||
<template #append>m/s</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item></el-col
|
||||
>
|
||||
</el-row>
|
||||
<el-row :gutter="24">
|
||||
<el-row :gutter="30">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="车头朝向" prop="toward" required>
|
||||
<el-select v-model="form.toward" placeholder="请选择车头朝向">
|
||||
@ -286,4 +294,15 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
|
||||
border-top: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.el-input-group__append,
|
||||
.el-input-group__prepend {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,11 +1,21 @@
|
||||
<template>
|
||||
<Dialog v-model="dialogFormVisible" title="节点属性" width="540" class="node-form-dialog">
|
||||
<el-form :model="form" label-width="auto" ref="ruleFormRef">
|
||||
<el-form-item label="X" prop="locationX" required>
|
||||
<el-input type="number" v-model="form.locationX" placeholder="请输入" />
|
||||
<el-form-item
|
||||
label="X"
|
||||
prop="locationX"
|
||||
required
|
||||
:rules="{ required: true, message: '请输入x轴坐标', trigger: 'change' }"
|
||||
>
|
||||
<el-input type="number" v-model="form.locationX" placeholder="请输入" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Y" prop="locationY" required>
|
||||
<el-input type="number" v-model="form.locationY" placeholder="请输入" />
|
||||
<el-form-item
|
||||
label="Y"
|
||||
prop="locationY"
|
||||
required
|
||||
:rules="{ required: true, message: '请输入y轴坐标', trigger: 'change' }"
|
||||
>
|
||||
<el-input type="number" v-model="form.locationY" placeholder="请输入" :min="0" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="type" required>
|
||||
<el-select v-model="form.type" placeholder="请选择类型" @change="typeChange">
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<!-- 刻度尺 -->
|
||||
<template>
|
||||
<div :style="wrapperStyle" class="vue-ruler-wrapper" onselectstart="return false;" ref="el">
|
||||
<div class="vue-ruler-wrapper" onselectstart="return false;">
|
||||
<section>
|
||||
<div
|
||||
ref="horizontalRuler"
|
||||
class="vue-ruler-h"
|
||||
@mousedown.stop="horizontalDragRuler"
|
||||
:style="{ width: width + 'px' }"
|
||||
@ -17,7 +16,6 @@
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
ref="verticalRuler"
|
||||
class="vue-ruler-v"
|
||||
@mousedown.stop="verticalDragRuler"
|
||||
:style="{ height: height + 'px' }"
|
||||
@ -30,21 +28,10 @@
|
||||
>{{ item.id }}</span
|
||||
>
|
||||
</div>
|
||||
<div :style="{ top: verticalDottedTop + 'px' }" class="vue-ruler-ref-dot-h"></div>
|
||||
<div :style="{ left: horizontalDottedLeft + 'px' }" class="vue-ruler-ref-dot-v"></div>
|
||||
<div
|
||||
v-for="item in lineList"
|
||||
:title="item.title"
|
||||
:style="getLineStyle(item)"
|
||||
:key="item.id"
|
||||
:class="`vue-ruler-ref-line-${item.type}`"
|
||||
@mousedown="handleDragLine(item)"
|
||||
></div>
|
||||
</section>
|
||||
<div ref="content" class="vue-ruler-content" :style="contentStyle">
|
||||
<div class="vue-ruler-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div v-show="isDrag" class="vue-ruler-content-mask"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
@ -53,40 +40,6 @@ import { computed, defineComponent, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
defineOptions({ name: 'V3RulerComponent' })
|
||||
|
||||
const props = defineProps({
|
||||
position: {
|
||||
type: String,
|
||||
default: 'relative',
|
||||
validator: (val) => {
|
||||
return ['absolute', 'fixed', 'relative', 'static', 'inherit'].indexOf(val) !== -1
|
||||
}
|
||||
},
|
||||
// 规定元素的定位类型
|
||||
isHotKey: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 热键开关
|
||||
isScaleRevise: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 刻度修正(根据content进行刻度重置)
|
||||
value: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [
|
||||
{ type: 'h', site: 50 },
|
||||
{ type: 'v', site: 180 }
|
||||
]
|
||||
}
|
||||
},
|
||||
// 预置参考线
|
||||
contentLayout: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return { top: 0, left: 0 }
|
||||
}
|
||||
},
|
||||
//步长
|
||||
stepLength: {
|
||||
type: Number,
|
||||
@ -101,123 +54,11 @@ const props = defineProps({
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['input', 'update:visible'])
|
||||
|
||||
/**
|
||||
* @description 绑定事件 on(element, event, handler)
|
||||
*/
|
||||
const on = (function () {
|
||||
return function (element, event, handler) {
|
||||
if (element && event && handler) {
|
||||
element.addEventListener(event, handler, false)
|
||||
}
|
||||
}
|
||||
})()
|
||||
|
||||
/**
|
||||
* @description 解绑事件 off(element, event, handler)
|
||||
*/
|
||||
const off = (function () {
|
||||
return function (element, event, handler) {
|
||||
if (element && event) {
|
||||
element.removeEventListener(event, handler, false)
|
||||
}
|
||||
}
|
||||
})()
|
||||
const size = 17
|
||||
let left_top = 18 // 内容左上填充
|
||||
let windowWidth = ref(0) // 窗口宽度
|
||||
let windowHeight = ref(0) // 窗口高度
|
||||
|
||||
let xScale = ref([{ id: 0 }]) // 水平刻度
|
||||
let yScale = ref([{ id: 0 }]) // 垂直刻度
|
||||
let topSpacing = 0 // 标尺与窗口上间距
|
||||
let leftSpacing = 0 // 标尺与窗口左间距
|
||||
let isDrag = ref(false)
|
||||
let dragFlag = '' // 拖动开始标记，可能值x(从水平标尺开始拖动);y(从垂直标尺开始拖动)
|
||||
let horizontalDottedLeft = ref(-999) // 水平虚线位置
|
||||
let verticalDottedTop = ref(-999) // 垂直虚线位置
|
||||
let rulerWidth = 0 // 垂直标尺的宽度
|
||||
let rulerHeight = 0 // 水平标尺的高度
|
||||
let dragLineId = '' // 被移动线的ID
|
||||
//ref
|
||||
const content = ref(null)
|
||||
const el = ref(null)
|
||||
const verticalRuler = ref(null)
|
||||
const horizontalRuler = ref(null)
|
||||
const wrapperStyle = computed(() => {
|
||||
return {
|
||||
width: windowWidth.value + 'px',
|
||||
height: windowHeight.value + 'px',
|
||||
position: props.position
|
||||
}
|
||||
})
|
||||
const contentStyle = computed(() => {
|
||||
return {
|
||||
left: props.contentLayout.left + 'px',
|
||||
top: props.contentLayout.top + 'px',
|
||||
padding: left_top + 'px 0px 0px ' + left_top + 'px'
|
||||
}
|
||||
})
|
||||
const lineList = computed(() => {
|
||||
let hCount = 0
|
||||
let vCount = 0
|
||||
return props.value.map((item) => {
|
||||
const isH = item.type === 'h'
|
||||
return {
|
||||
id: `${item.type}_${isH ? hCount++ : vCount++}`,
|
||||
type: item.type,
|
||||
title: item.site.toFixed(2) + 'px',
|
||||
[isH ? 'top' : 'left']: item.site / (props.stepLength / 50) + size
|
||||
}
|
||||
})
|
||||
})
|
||||
onMounted(() => {
|
||||
on(document, 'mousemove', dottedLineMove)
|
||||
on(document, 'mouseup', dottedLineUp)
|
||||
init()
|
||||
on(window, 'resize', windowResize)
|
||||
})
|
||||
onBeforeUnmount(() => {
|
||||
off(document, 'mousemove', dottedLineMove)
|
||||
off(document, 'mouseup', dottedLineUp)
|
||||
off(window, 'resize', windowResize)
|
||||
})
|
||||
const init = () => {
|
||||
box()
|
||||
scaleCalc()
|
||||
}
|
||||
const windowResize = () => {
|
||||
xScale.value = [{ id: 0 }]
|
||||
yScale.value = [{ id: 0 }]
|
||||
init()
|
||||
}
|
||||
const getLineStyle = ({ type, top, left }) => {
|
||||
return type === 'h' ? { top: top + 'px' } : { left: left + 'px' }
|
||||
}
|
||||
const handleDragLine = ({ type, id }) => {
|
||||
return type === 'h' ? dragHorizontalLine(id) : dragVerticalLine(id)
|
||||
}
|
||||
//获取窗口宽与高
|
||||
const box = () => {
|
||||
setSpacing()
|
||||
if (props.isScaleRevise) {
|
||||
// 根据内容部分进行刻度修正
|
||||
const contentLeft = content.value.offsetLeft
|
||||
const contentTop = content.value.offsetTop
|
||||
getCalcRevise(xScale.value, contentLeft)
|
||||
getCalcRevise(yScale.value, contentTop)
|
||||
}
|
||||
// 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
|
||||
}
|
||||
const setSpacing = () => {
|
||||
topSpacing = horizontalRuler.value.getBoundingClientRect().y //.offsetParent.offsetTop
|
||||
leftSpacing = verticalRuler.value.getBoundingClientRect().x // .offsetParent.offsetLeft
|
||||
}
|
||||
|
||||
// 计算刻度
|
||||
const scaleCalc = () => {
|
||||
getCalc(xScale.value, props.width)
|
||||
@ -232,127 +73,10 @@ const getCalc = (array, length) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
// 获取矫正刻度方法
|
||||
const getCalcRevise = (array, length) => {
|
||||
for (let i = 0; i < length; i += 1) {
|
||||
if (i % props.stepLength === 0 && i + props.stepLength <= length) {
|
||||
array.push({ id: i })
|
||||
}
|
||||
}
|
||||
}
|
||||
//生成一个参考线
|
||||
const newLine = (val) => {
|
||||
isDrag.value = true
|
||||
dragFlag = val
|
||||
}
|
||||
//虚线移动
|
||||
const dottedLineMove = ($event) => {
|
||||
setSpacing()
|
||||
switch (dragFlag) {
|
||||
case 'x':
|
||||
if (isDrag.value) {
|
||||
verticalDottedTop.value = $event.pageY - topSpacing
|
||||
}
|
||||
break
|
||||
case 'y':
|
||||
if (isDrag.value) {
|
||||
horizontalDottedLeft.value = $event.pageX - leftSpacing
|
||||
}
|
||||
break
|
||||
case 'h':
|
||||
if (isDrag.value) {
|
||||
verticalDottedTop.value = $event.pageY - topSpacing
|
||||
}
|
||||
break
|
||||
case 'v':
|
||||
if (isDrag.value) {
|
||||
horizontalDottedLeft.value = $event.pageX - leftSpacing
|
||||
}
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
//虚线松开
|
||||
const dottedLineUp = ($event) => {
|
||||
setSpacing()
|
||||
if (isDrag.value) {
|
||||
isDrag.value = false
|
||||
const cloneList = JSON.parse(JSON.stringify(props.value))
|
||||
switch (dragFlag) {
|
||||
case 'x':
|
||||
cloneList.push({
|
||||
type: 'h',
|
||||
site: ($event.pageY - topSpacing - size) * (props.stepLength / 50)
|
||||
})
|
||||
emit('input', cloneList)
|
||||
break
|
||||
case 'y':
|
||||
cloneList.push({
|
||||
type: 'v',
|
||||
site: ($event.pageX - leftSpacing - size) * (props.stepLength / 50)
|
||||
})
|
||||
emit('input', cloneList)
|
||||
break
|
||||
case 'h':
|
||||
dragCalc(cloneList, $event.pageY, topSpacing, rulerHeight, 'h')
|
||||
emit('input', cloneList)
|
||||
break
|
||||
case 'v':
|
||||
dragCalc(cloneList, $event.pageX, leftSpacing, rulerWidth, 'v')
|
||||
emit('input', cloneList)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
verticalDottedTop.value = horizontalDottedLeft.value = 0
|
||||
}
|
||||
}
|
||||
const dragCalc = (list, page, spacing, ruler, type) => {
|
||||
if (page - spacing < ruler) {
|
||||
let Index
|
||||
lineList.value.forEach((item, index) => {
|
||||
if (item.id === dragLineId) {
|
||||
Index = index
|
||||
}
|
||||
})
|
||||
list.splice(Index, 1, {
|
||||
type: type,
|
||||
site: -600
|
||||
})
|
||||
} else {
|
||||
let Index
|
||||
lineList.value.forEach((item, index) => {
|
||||
if (item.id === dragLineId) {
|
||||
Index = index
|
||||
}
|
||||
})
|
||||
list.splice(Index, 1, {
|
||||
type: type,
|
||||
site: (page - spacing - size) * (props.stepLength / 50)
|
||||
})
|
||||
}
|
||||
}
|
||||
//水平标尺按下鼠标
|
||||
const horizontalDragRuler = () => {
|
||||
newLine('x')
|
||||
}
|
||||
//垂直标尺按下鼠标
|
||||
const verticalDragRuler = () => {
|
||||
newLine('y')
|
||||
}
|
||||
// 水平线处按下鼠标
|
||||
const dragHorizontalLine = (id) => {
|
||||
isDrag.value = true
|
||||
dragFlag = 'h'
|
||||
dragLineId = id
|
||||
}
|
||||
// 垂直线处按下鼠标
|
||||
const dragVerticalLine = (id) => {
|
||||
isDrag.value = true
|
||||
dragFlag = 'v'
|
||||
dragLineId = id
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
scaleCalc()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.vue-ruler-wrapper {
|
||||
@ -363,11 +87,7 @@ const dragVerticalLine = (id) => {
|
||||
}
|
||||
|
||||
.vue-ruler-h,
|
||||
.vue-ruler-v,
|
||||
.vue-ruler-ref-line-v,
|
||||
.vue-ruler-ref-line-h,
|
||||
.vue-ruler-ref-dot-h,
|
||||
.vue-ruler-ref-dot-v {
|
||||
.vue-ruler-v {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@ -412,69 +132,10 @@ const dragVerticalLine = (id) => {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.vue-ruler-ref-line-v,
|
||||
.vue-ruler-ref-line-h,
|
||||
.vue-ruler-ref-dot-h,
|
||||
.vue-ruler-ref-dot-v {
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.vue-ruler-ref-line-h {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAMAAADU3h9xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYIACgAADAAAJAAE0lmO3AAAAAElFTkSuQmCC)
|
||||
repeat-x left center;
|
||||
/*./image/line_h.png*/
|
||||
cursor: n-resize;
|
||||
/*url(./image/cur_move_h.cur), move*/
|
||||
}
|
||||
|
||||
.vue-ruler-ref-line-v {
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
_height: 9999px;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAMAAAAPxGVzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYEAFAAEGAAAQAAGePof9AAAAAElFTkSuQmCC)
|
||||
repeat-y center top;
|
||||
/*./image/line_v.png*/
|
||||
cursor: w-resize;
|
||||
/*url(./image/cur_move_v.cur), move*/
|
||||
}
|
||||
|
||||
.vue-ruler-ref-dot-h {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)
|
||||
repeat-x left 1px;
|
||||
/*./image/line_dot.png*/
|
||||
cursor: n-resize;
|
||||
/*url(./image/cur_move_h.cur), move*/
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
.vue-ruler-ref-dot-v {
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
_height: 9999px;
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)
|
||||
repeat-y 1px top;
|
||||
/*./image/line_dot.png*/
|
||||
cursor: w-resize;
|
||||
/*url(./image/cur_move_v.cur), move*/
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.vue-ruler-content {
|
||||
position: absolute;
|
||||
z-index: 997;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vue-ruler-content-mask {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
z-index: 998;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,190 +1,127 @@
|
||||
<template>
|
||||
<div>
|
||||
<svg
|
||||
ref="svgElement"
|
||||
:width="width"
|
||||
:height="height"
|
||||
@mousedown="startDrawing"
|
||||
@mousemove="drawLine"
|
||||
@mouseup="stopDrawing"
|
||||
@mouseleave="stopDrawing"
|
||||
>
|
||||
<!-- 渲染所有点 -->
|
||||
<circle
|
||||
v-for="(point, index) in points"
|
||||
<div class="box">
|
||||
<svg :width="boxWidth" :height="boxHeight">
|
||||
<path
|
||||
v-for="(curve, index) in curves"
|
||||
:key="index"
|
||||
:cx="point.x"
|
||||
:cy="point.y"
|
||||
:d="getCurvePath(curve)"
|
||||
:stroke="curve.isSelected ? 'red' : 'blue'"
|
||||
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="red"
|
||||
@mousedown="startFromPoint(index, $event)"
|
||||
fill="green"
|
||||
@mousedown="startDrag(index, 'start')"
|
||||
/>
|
||||
|
||||
<!-- 渲染所有直线 -->
|
||||
<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"
|
||||
/>
|
||||
|
||||
<!-- 实时绘制当前直线 -->
|
||||
<path
|
||||
v-if="isDrawing"
|
||||
:d="`M ${startX} ${startY} L ${currentX} ${currentY}`"
|
||||
stroke="blue"
|
||||
stroke-width="2"
|
||||
fill="none"
|
||||
<circle
|
||||
v-for="(curve, index) in curves"
|
||||
:key="'end-' + index"
|
||||
:cx="curve.endControlX"
|
||||
:cy="curve.endControlY"
|
||||
r="5"
|
||||
fill="green"
|
||||
@mousedown="startDrag(index, 'end')"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<!-- 显示直线数据 -->
|
||||
<div>
|
||||
<h3>直线数据：</h3>
|
||||
<pre>{{ lines }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const svgElement = ref(null) // SVG 元素的引用
|
||||
const width = 800 // SVG 宽度
|
||||
const height = 600 // SVG 高度
|
||||
// 盒子的宽度和高度
|
||||
const boxWidth = ref(800)
|
||||
const boxHeight = ref(600)
|
||||
|
||||
// 点位数据
|
||||
const points = ref([
|
||||
{ x: 10, y: 10 },
|
||||
{ x: 30, y: 100 },
|
||||
{ x: 40, y: 40 },
|
||||
{ x: 230, y: 400 },
|
||||
{ x: 750, y: 640 }
|
||||
])
|
||||
// 初始点位数据
|
||||
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 lines = ref([])
|
||||
// 当前拖动的曲线索引和控制点类型
|
||||
const dragging = ref({
|
||||
index: null,
|
||||
type: null
|
||||
})
|
||||
|
||||
// 当前绘制的直线状态
|
||||
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 getCurvePath = (curve) => {
|
||||
return `M${curve.startX},${curve.startY} C${curve.startControlX},${curve.startControlY} ${curve.endControlX},${curve.endControlY} ${curve.endX},${curve.endY}`
|
||||
}
|
||||
|
||||
// 从点开始绘制
|
||||
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 selectCurve = (index) => {
|
||||
curves.value.forEach((curve, i) => {
|
||||
curve.isSelected = i === index
|
||||
})
|
||||
console.log('Selected curve:', curves.value[index])
|
||||
}
|
||||
|
||||
// 实时绘制
|
||||
const drawLine = (event) => {
|
||||
if (isDrawing.value) {
|
||||
const rect = svgElement.value.getBoundingClientRect()
|
||||
currentX.value = event.clientX - rect.left
|
||||
currentY.value = event.clientY - rect.top
|
||||
}
|
||||
}
|
||||
// 开始拖动控制点
|
||||
const startDrag = (index, type) => {
|
||||
dragging.value = { index, type }
|
||||
window.addEventListener('mousemove', handleDrag)
|
||||
window.addEventListener('mouseup', endDrag)
|
||||
}
|
||||
|
||||
// 结束绘制
|
||||
const stopDrawing = () => {
|
||||
if (isDrawing.value) {
|
||||
// 找到最近的终点
|
||||
const endPointIndex = findClosestPoint(currentX.value, currentY.value)
|
||||
// 处理拖动事件
|
||||
const handleDrag = (event) => {
|
||||
if (dragging.value.index !== null) {
|
||||
const curve = curves.value[dragging.value.index]
|
||||
let newX = event.offsetX
|
||||
let newY = event.offsetY
|
||||
|
||||
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
|
||||
}
|
||||
// 确保控制点不超出盒子范围
|
||||
newX = Math.max(0, Math.min(newX, boxWidth.value))
|
||||
newY = Math.max(0, Math.min(newY, boxHeight.value))
|
||||
|
||||
// 检查是否已存在相同的直线
|
||||
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
|
||||
if (dragging.value.type === 'start') {
|
||||
curve.startControlX = newX
|
||||
curve.startControlY = newY
|
||||
} else {
|
||||
curve.endControlX = newX
|
||||
curve.endControlY = newY
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 结束拖动
|
||||
const endDrag = () => {
|
||||
dragging.value = { index: null, type: null }
|
||||
window.removeEventListener('mousemove', handleDrag)
|
||||
window.removeEventListener('mouseup', endDrag)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
svg {
|
||||
border: 1px solid #ccc;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: #f5f5f5;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
.box {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user