Skip to content

R
road-demo
提交 f3835a7d authored 作者: 许言琪's avatar 许言琪
浏览文件
操作

fix: 添加缩放比

上级 22a68623
显示空白字符变更
内嵌 并排
正在显示 包含 139 行增加 和 88 行删除
src/components/drawing.vue
浏览文件 @ f3835a7d
......@@ -5,13 +5,7 @@
-->
<template>
<div class="drawing">
<div
id="canvas"
class="canvas"
:style="{
height: boxHeight + rulerHeight + 'px',
}"
></div>
<div id="canvas" class="canvas"></div>
<el-row>
<el-row class="control-btn">
<el-button type="primary" @click="roadDrawer = true"
......@@ -42,7 +36,7 @@
<el-drawer
title="道路信息"
:visible.sync="roadDrawer"
:wrapperClosable="false"
:wrapperClosable="true"
direction="rtl"
>
<div class="plan">
......@@ -54,37 +48,42 @@
<el-form-item label="路线名称" prop="roadName">
{{ diseaseForm.roadName }}
</el-form-item>
<el-form-item label="行驶方向" prop="direction">
<el-select v-model="diseaseForm.direction" placeholder="请选择">
<el-option
v-for="item in directionOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="起点名称" prop="startStake">
<el-input v-model="diseaseForm.startStake"></el-input>
</el-form-item>
<el-form-item label="止点桩号" prop="endStake">
<el-input v-model="diseaseForm.endStake"></el-input>
</el-form-item>
<el-form-item label="路线长度" prop="roadLength">
<el-input v-model="diseaseForm.roadLength">
<template slot="append">m</template></el-input
>
</el-form-item>
<el-form-item label="全幅宽度" prop="roadWidth">
<el-input v-model="diseaseForm.roadWidth">
<template slot="append">m</template></el-input
>
</el-form-item>
<el-form-item label="路线长度" prop="roadLength">
{{ roadLength }} m
</el-form-item>
<el-form-item label="半幅宽度" prop="roadWidth">
{{ diseaseForm.roadWidth / 2 }} m
</el-form-item>
<el-form-item
label="是否保持缩放比"
label-width="110px"
prop="endStake"
>
<el-select
v-model="scale"
placeholder="请选择"
@change="scaleChange"
>
<el-option
v-for="item in scaleOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">生成</el-button>
......@@ -99,7 +98,7 @@
title="病害信息"
:visible.sync="diseaseDrawer"
direction="rtl"
:wrapperClosable="false"
:wrapperClosable="true"
>
<div class="plan">
<el-card class="box-card">
......@@ -123,6 +122,17 @@
</el-option>
</el-select>
</el-form-item>
<el-form-item label="行驶方向" prop="direction">
<el-select v-model="diseaseForm.direction" placeholder="请选择">
<el-option
v-for="item in directionOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="病害类型" prop="diseaseType">
<el-select v-model="diseaseForm.diseaseType" placeholder="请选择">
<el-option
......@@ -148,7 +158,7 @@
<el-form-item label="病害桩号" prop="stake">
<el-input v-model="diseaseForm.stake"></el-input>
</el-form-item>
<el-form-item label="距分割线" prop="distance">
<el-form-item label="距中心线" prop="distance">
<el-input v-model="diseaseForm.distance">
<template slot="append">m</template></el-input
>
......@@ -189,6 +199,18 @@ export default {
rulerSeparateHeight: 30,
// 左边标尺间隔多少厘米
leftRuler: 50,
// 病害大小展示是否成正比,100为正常比例，10为视觉比例
scale: 10,
scaleOptions: [
{
label: "是",
value: 10,
},
{
label: "否",
value: 100,
},
],
diseaseDrawer: false,
diseaseForm: {
roadName: "G205 山深线",
......@@ -366,7 +388,7 @@ export default {
},
// 画布宽度
boxWidth() {
return Number(this.diseaseForm.roadLength) + this.boxPadding * 2;
return Number(this.roadLength) * 10 + this.boxPadding * 2;
},
// 画布高度
boxHeight() {
......@@ -452,9 +474,8 @@ export default {
},
mounted() {
this.initCanvas();
this.drawDisease();
new paper.Point(50, 0).angle;
new paper.Point(40, 100).angle;
this.drawDisease(this.diseaseForm);
this.diseaseList.push(JSON.parse(JSON.stringify(this.diseaseForm)));
},
methods: {
/** 初始化 */
......@@ -486,50 +507,42 @@ export default {
path.add(new Point(0, this.boxHeight + this.rulerHeight));
path.closed = true;
// 左距离尺，上行
const leftRuler = Math.ceil(
(this.boxHeight - this.rulerHeight) / this.leftRuler
);
let path1Segments = [];
path1Segments.push([20, this.rulerHeight]);
path1Segments.push([10, this.rulerHeight]);
new paper.PointText({
point: [10, this.rulerHeight - 5],
content: "1cm",
fillColor: "black",
fontFamily: "Courier New",
fontSize: 11,
});
for (let index = 1; index < leftRuler + 1; index++) {
path1Segments.push([10, this.leftRuler * index + this.rulerHeight]);
path1Segments.push([
20,
this.leftRuler * index + this.rulerHeight + 0.1,
]);
path1Segments.push([
10,
this.leftRuler * index + this.rulerHeight + 0.1,
]);
new paper.PointText({
point: [10, this.leftRuler * index + this.rulerHeight - 5],
content: index * this.leftRuler + "cm",
fillColor: "black",
fontFamily: "Courier New",
fontSize: 11,
});
}
0.1;
let path1 = new paper.Path({
segments: path1Segments,
});
path1.strokeColor = "black";
// 左距离尺，下行
// let path2 = new paper.Path({
// segments: [
// [10, this.roadHalfWidth],
// [10, this.boxHeight],
// ],
// const leftRuler = Math.ceil(
// (this.boxHeight - this.rulerHeight) / this.leftRuler
// );
// let path1Segments = [];
// path1Segments.push([20, this.rulerHeight]);
// path1Segments.push([10, this.rulerHeight]);
// new paper.PointText({
// point: [10, this.rulerHeight - 5],
// content: "1cm",
// fillColor: "black",
// fontFamily: "Courier New",
// fontSize: 11,
// });
// path2.strokeColor = "black";
// for (let index = 1; index < leftRuler + 1; index++) {
// path1Segments.push([10, this.leftRuler * index + this.rulerHeight]);
// path1Segments.push([
// 20,
// this.leftRuler * index + this.rulerHeight + 0.1,
// ]);
// path1Segments.push([
// 10,
// this.leftRuler * index + this.rulerHeight + 0.1,
// ]);
// new paper.PointText({
// point: [10, this.leftRuler * index + this.rulerHeight - 5],
// content: index * this.leftRuler + "cm",
// fillColor: "black",
// fontFamily: "Courier New",
// fontSize: 11,
// });
// }
// 0.1;
// let path1 = new paper.Path({
// segments: path1Segments,
// });
// path1.strokeColor = "black";
},
/** 绘制中间线 */
drawCenterLine() {
......@@ -587,26 +600,36 @@ export default {
/**
* 绘制病害
*/
drawDisease() {
drawDisease(form) {
console.log(form);
if (!form) {
return false;
}
// 距离中间线多少米
let distance = this.diseaseForm.distance;
let distance = form.distance;
// 桩号
let stake = this.diseaseForm.stake;
let stake = form.stake;
// 病害长度
let diseaseLength = this.diseaseForm.diseaseLength;
let diseaseLength = form.diseaseLength;
// 病害宽度
let diseaseWidth = this.diseaseForm.diseaseWidth;
let diseaseWidth = form.diseaseWidth;
// 病害在canvas上的位置
const x =
(Number(stake) - Number(this.diseaseForm.startStake)) * 10000 +
this.boxPadding;
(Number(stake) - Number(form.startStake)) * 10000 + this.boxPadding;
let y = this.roadHalfWidth + distance * 100;
const width = diseaseLength * 10;
const height = diseaseWidth * 100;
if (this.diseaseForm.direction == "上行") {
const height = diseaseWidth * this.scale;
if (form.direction == "上行") {
console.log(this.roadHalfWidth - distance * 100);
console.log(this.roadHalfWidth);
console.log(distance);
if (this.scale === 10) {
y = this.roadHalfWidth - distance * 100 - height;
} else {
y = this.roadHalfWidth - distance * 100 - diseaseWidth * 100;
}
}
let rectangle = new paper.Rectangle({
x,
y,
......@@ -617,7 +640,7 @@ export default {
path.strokeColor = "black";
this.drawInterferenceLine(rectangle, 4);
// 病害宽度
new paper.PointText({
point: rectangle.rightCenter,
content: `${diseaseWidth}m`,
......@@ -625,15 +648,32 @@ export default {
fontFamily: "Courier New",
fontSize: 14,
});
// 病害长度
new paper.PointText({
point: rectangle.topCenter,
point: rectangle.bottomCenter,
content: `${diseaseLength}m`,
fillColor: "black",
fontFamily: "Courier New",
fontSize: 14,
});
this.diseaseList.push(this.diseaseForm);
// 病害距离中间距离
if (form.direction == "上行") {
new paper.PointText({
point: rectangle.topCenter,
content: `左${form.distance}m`,
fillColor: "black",
fontFamily: "Courier New",
fontSize: 11,
});
} else {
new paper.PointText({
point: rectangle.topCenter,
content: `右${form.distance}m`,
fillColor: "black",
fontFamily: "Courier New",
fontSize: 11,
});
}
},
/** 绘制网格 */
drawInterferenceLine(rectangle, lineType) {
......@@ -695,7 +735,18 @@ export default {
},
// 添加病害
addDisease() {
this.drawDisease();
this.drawDisease(this.diseaseForm);
this.diseaseList.push(JSON.parse(JSON.stringify(this.diseaseForm)));
},
/** 缩放比 */
scaleChange() {
paper.remove();
this.canvas.remove();
this.initCanvas();
this.diseaseList.forEach((item) => {
this.drawDisease(item);
});
},
/** 桩号转换 */
transformStakeString(stake) {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论