Skip to content

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

fix: 完善病害绘制图

上级 2bc9455f
显示空白字符变更
内嵌 并排
正在显示 包含 1155 行增加 和 346 行删除
src/App.vue
浏览文件 @ 22a68623
<!--
* @Descripttion:
* @Author: xuyanqi
* @Date: 2021-12-16 13:48:47
-->
<template> <template>
<div id="app"> <div id="app">
<div class="canvas"> <drawing></drawing>
<canvas id="main-canvas" :width="boxWidth" :height="boxHeight"></canvas>
</div>
<div class="plan">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>施工日志</span>
</div>
<el-form ref="ruleForm" class="demo-ruleForm">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="车道宽度" prop="roadWidth">
<el-input-number
v-model="roadWidth"
:precision="2"
:step="0.1"
:max="100"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
</div>
</div> </div>
</template> </template>
<script> <script>
import paper from "paper"; import drawing from "@/components/drawing.vue";
import { Point } from "paper/dist/paper-core";
export default { export default {
name: "App", name: "App",
props: {}, components: {
data() { drawing,
return {
areax: 30,
areay: 30,
boxWidth: 1060,
boxHeight: 800,
circle_diameter: 50,
startStake: 1000,
x: 200,
y: 200,
ratioWidth: 10,
ratioHeight: 25,
roadWidth: 10,
};
},
mounted() {
this.updateDrawing();
},
methods: {
updateDrawing() {
paper.setup(document.getElementById("main-canvas"));
// Now, draw your things based on component state.
// const point = new paper.Point(this.x, this.y);
// const circle = new paper.Path.Circle(point, this.circle_diameter);
// circle.fillColor = "#2ecc71";
// circle.strokeColor = "#2ecc71";
// 面板四周的边框
this.drawCanvasBorder();
// 标出有效位置
// this.drawEffectiveArea();
// 画中心线
this.drawCenterLine();
// 画边线
this.drawBorderLine();
this.drawDisease(1070, 2.5, 2, 2.8, "下行", 1);
this.drawDisease(1030, 0, 2, 5.8, "下行", 2);
this.drawDisease(1020, 3.1, 4, 6.1, "上行", 3);
this.drawDisease(1080, 0, 3, 3, "上行", 4);
},
drawCanvasBorder() {
let path = new paper.Path();
path.strokeColor = "black";
path.add(new Point(0, 0));
path.add(new Point(this.boxWidth, 0));
path.add(new Point(this.boxWidth, this.boxHeight));
path.add(new Point(0, this.boxHeight));
path.closed = true;
},
drawEffectiveArea() {
let rectangle = new paper.Rectangle({
x: this.areax,
y: this.areay,
width: 1000,
height: 500,
});
let path = new paper.Path.Rectangle(rectangle);
path.fillColor = "#e9e9ff";
},
drawCenterLine() {
var centerLine = new paper.Path({
segments: [
[0, this.boxHeight / 2],
[this.boxWidth, this.boxHeight / 2],
],
});
centerLine.strokeColor = "#ff0000";
centerLine.strokeWidth = 1;
centerLine.strokeCap = "round";
centerLine.dashArray = [10, 12];
},
drawBorderLine() {
for (let index = 0; index < 10; index++) {
// 刻画标尺，100米的实际长度，显示在1000px上，每100px显示一个刻度
// 上行
let borderLine = new paper.Path({
segments: [
[
this.areax + index * this.ratioWidth * 10,
this.boxHeight / 2 - this.roadWidth * this.ratioHeight + 10,
],
[
this.areax + index * this.ratioWidth * 10,
this.boxHeight / 2 - this.roadWidth * this.ratioHeight,
],
[
this.areax + (index + 1) * this.ratioWidth * 10,
this.boxHeight / 2 - this.roadWidth * this.ratioHeight,
],
[
this.areax + (index + 1) * this.ratioWidth * 10,
this.boxHeight / 2 - this.roadWidth * this.ratioHeight + 10,
],
],
});
borderLine.strokeColor = "#000";
borderLine.strokeWidth = 1;
borderLine = new paper.Path({
segments: [
[
this.areax + index * this.ratioWidth * 10,
this.boxHeight / 2 + this.roadWidth * this.ratioHeight - 10,
],
[
this.areax + index * this.ratioWidth * 10,
this.boxHeight / 2 + this.roadWidth * this.ratioHeight,
],
[
this.areax + (index + 1) * this.ratioWidth * 10,
this.boxHeight / 2 + this.roadWidth * this.ratioHeight,
],
[
this.areax + (index + 1) * this.ratioWidth * 10,
this.boxHeight / 2 + this.roadWidth * this.ratioHeight - 10,
],
],
});
borderLine.strokeColor = "#000";
borderLine.strokeWidth = 1;
if (index == 9) {
new paper.PointText({
point: [
this.areax + index * this.ratioWidth * 10 - 16,
this.boxHeight / 2 - this.roadWidth * this.ratioHeight - 5,
],
content: this.transformStakeString(this.startStake + index * 10),
fillColor: "black",
fontFamily: "Courier New",
fontSize: 12,
});
new paper.PointText({
point: [
this.areax + (index + 1) * this.ratioWidth * 10 - 30,
this.boxHeight / 2 - this.roadWidth * this.ratioHeight + 10 - 15,
],
content: this.transformStakeString(
this.startStake + (index + 1) * 10
),
fillColor: "black",
fontFamily: "Courier New",
fontSize: 12,
});
} else {
new paper.PointText({
point: [
this.areax + index * this.ratioWidth * 10 - 16,
this.boxHeight / 2 - this.roadWidth * this.ratioHeight - 5,
],
content: this.transformStakeString(this.startStake + index * 10),
fillColor: "black",
fontFamily: "Courier New",
fontSize: 12,
});
}
}
},
drawDisease(stake, distance, width, height, direction, lineType) {
const x = this.areax + (stake - this.startStake) * this.ratioWidth;
let y = 100;
if (direction === "下行") {
y = this.boxHeight / 2 + distance * this.ratioHeight;
}
if (direction === "上行") {
y =
this.boxHeight / 2 -
distance * this.ratioHeight -
width * this.ratioHeight;
}
this.drawRectangleLabel(
x,
y,
height * this.ratioWidth,
width * this.ratioHeight,
distance,
direction,
lineType
);
},
drawInterferenceLine(rectangle, lineType) {
console.log(rectangle, lineType);
if (lineType == 1) {
let myPath = new paper.Path();
myPath.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath.add(rectangle.topCenter);
myPath.add(rectangle.rightCenter);
myPath.add(rectangle.bottomCenter);
myPath.add(rectangle.leftCenter);
myPath.closePath();
}
if (lineType == 2) {
let myPath1 = new paper.Path();
myPath1.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath1.add(rectangle.topCenter);
myPath1.add(rectangle.bottomCenter);
let myPath2 = new paper.Path();
myPath2.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath2.add(rectangle.rightCenter);
myPath2.add(rectangle.leftCenter);
}
if (lineType == 3) {
let myPath1 = new paper.Path();
myPath1.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath1.add(rectangle.leftCenter);
myPath1.add(rectangle.bottomCenter);
let myPath2 = new paper.Path();
myPath2.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath2.add(rectangle.topLeft);
myPath2.add(rectangle.bottomRight);
let myPath3 = new paper.Path();
myPath3.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath3.add(rectangle.topCenter);
myPath3.add(rectangle.rightCenter);
}
if (lineType == 4) {
let myPath1 = new paper.Path();
myPath1.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath1.add(rectangle.topLeft);
myPath1.add(rectangle.bottomRight);
let myPath2 = new paper.Path();
myPath2.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath2.add(rectangle.topRight);
myPath2.add(rectangle.bottomLeft);
}
},
drawRectangleLabel(x, y, width, height, distance, direction, lineType) {
let rectangle = new paper.Rectangle({
x,
y,
width,
height,
});
let path = new paper.Path.Rectangle(rectangle);
path.strokeColor = "black";
this.drawInterferenceLine(rectangle, lineType);
if (height > 1) {
new paper.PointText({
point: rectangle.rightCenter,
content: height / this.ratioHeight,
fillColor: "black",
fontFamily: "Courier New",
fontSize: 8,
});
}
if (width > 1) {
if (direction === "下行") {
let bottomCenter = rectangle.bottomCenter;
bottomCenter.y += -1;
bottomCenter.x += -8;
new paper.PointText({
point: bottomCenter,
content: width / this.ratioWidth,
fillColor: "black",
fontFamily: "Courier New",
fontSize: 8,
});
let topCenter = rectangle.topCenter;
topCenter.y += -1;
topCenter.x += 2;
new paper.PointText({
point: topCenter,
content: "右" + distance,
fillColor: "black",
fontFamily: "Courier New",
fontSize: 8,
});
} else {
let topCenter = rectangle.topCenter;
topCenter.y += -2;
topCenter.x += -10;
new paper.PointText({
point: topCenter,
content: width / this.ratioWidth,
fillColor: "black",
fontFamily: "Courier New",
fontSize: 8,
});
let bottomCenter = rectangle.bottomCenter;
bottomCenter.y += 0;
bottomCenter.x += 2;
new paper.PointText({
point: bottomCenter,
content: "左" + distance,
fillColor: "black",
fontFamily: "Courier New",
fontSize: 8,
});
}
}
if (width > 1 && height > 1) {
let bottomRight = rectangle.bottomRight;
bottomRight.y += 10;
bottomRight.x += 10;
new paper.PointText({
point: bottomRight,
content: (width / this.ratioWidth) * (height / this.ratioHeight),
fillColor: "black",
fontFamily: "Courier New",
fontSize: 8,
});
}
},
transformStake(stake) {
return Number(
stake.toLocaleLowerCase().replace("k", "").replace("+", "")
);
},
transformStakeString(stake) {
let stakeString = "K" + stake;
let l = stakeString.length - 3;
return stakeString.slice(0, l) + "+" + stakeString.slice(l);
},
}, },
}; };
</script> </script>
......
src/components/drawing.vue 0 → 100644
浏览文件 @ 22a68623
<!--
* @Descripttion:
* @Author: xuyanqi
* @Date: 2021-12-28 14:04:29
-->
<template>
<div class="drawing">
<div
id="canvas"
class="canvas"
:style="{
height: boxHeight + rulerHeight + 'px',
}"
></div>
<el-row>
<el-row class="control-btn">
<el-button type="primary" @click="roadDrawer = true"
>生成画布</el-button
>
<el-button type="primary" @click="diseaseDrawer = true"
>添加病害</el-button
>
</el-row>
<el-row>
<el-table :data="diseaseList" stripe style="width: 100%">
<el-table-column prop="roadName" label="路线名称" width="180">
</el-table-column>
<el-table-column prop="direction" label="行驶方向" width="180">
</el-table-column>
<el-table-column prop="stake" label="病害桩号" width="180">
</el-table-column>
<el-table-column prop="distance" label="距分割线"> </el-table-column>
<el-table-column prop="diseaseLength" label="病害长度">
</el-table-column>
<el-table-column prop="diseaseWidth" label="病害宽度">
</el-table-column>
</el-table>
</el-row>
</el-row>
<!-- 道路信息弹框 -->
<el-drawer
title="道路信息"
:visible.sync="roadDrawer"
:wrapperClosable="false"
direction="rtl"
>
<div class="plan">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>道路信息</span>
</div>
<el-form ref="ruleForm" label-width="80px">
<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="roadWidth">
{{ diseaseForm.roadWidth / 2 }} m
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">生成</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</el-drawer>
<!-- 病害弹框 -->
<el-drawer
title="病害信息"
:visible.sync="diseaseDrawer"
direction="rtl"
:wrapperClosable="false"
>
<div class="plan">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>病害信息</span>
</div>
<el-form
:model="diseaseForm"
:rules="diseaseRules"
ref="ruleForm"
label-width="80px"
>
<el-form-item label="路面类型" prop="roadType">
<el-select v-model="diseaseForm.roadType" placeholder="请选择">
<el-option
v-for="item in roadOptions"
: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
v-for="item in diseaseOptions[diseaseForm.roadType]"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="严重程度" prop="severity">
<el-select v-model="diseaseForm.severity" placeholder="请选择">
<el-option
v-for="item in severityOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="病害桩号" prop="stake">
<el-input v-model="diseaseForm.stake"></el-input>
</el-form-item>
<el-form-item label="距分割线" prop="distance">
<el-input v-model="diseaseForm.distance">
<template slot="append">m</template></el-input
>
</el-form-item>
<el-form-item label="病害宽度" prop="diseaseWidth">
<el-input v-model="diseaseForm.diseaseWidth">
<template slot="append">m</template></el-input
>
</el-form-item>
<el-form-item label="病害长度" prop="diseaseLength">
<el-input v-model="diseaseForm.diseaseLength">
<template slot="append">m</template></el-input
>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="addDisease">添加病害</el-button>
</el-form-item>
</el-form>
</el-card>
</div>
</el-drawer>
</div>
</template>
<script>
import paper from "paper";
import { Point } from "paper/dist/paper-core";
export default {
data() {
return {
roadDrawer: false,
canvas: null,
// 左右边距
boxPadding: 50,
// 标尺高度
rulerHeight: 40,
// 标尺分隔高度
rulerSeparateHeight: 30,
// 左边标尺间隔多少厘米
leftRuler: 50,
diseaseDrawer: false,
diseaseForm: {
roadName: "G205 山深线",
direction: "上行",
startStake: "615.700",
endStake: "615.800",
roadLength: 1000,
roadWidth: 7,
roadType: 1,
diseaseType: 1,
severity: 1,
distance: 0.1,
stake: "615.700",
diseaseLength: 2,
diseaseWidth: 2,
},
severityOptions: [
{
label: "轻",
value: 1,
},
{
label: "中",
value: 2,
},
{
label: "重",
value: 3,
},
],
roadOptions: [
{
label: "沥青路面",
value: 1,
},
{
label: "水泥路面",
value: 2,
},
],
diseaseOptions: {
1: [
{
label: "龟裂",
value: 1,
},
{
label: "块状裂缝",
value: 2,
},
{
label: "纵向裂缝",
value: 3,
},
{
label: "横向裂缝",
value: 4,
},
{
label: "沉陷",
value: 5,
},
{
label: "车辙",
value: 6,
},
{
label: "波浪拥包",
value: 7,
},
{
label: "坑槽",
value: 8,
},
{
label: "松散",
value: 9,
},
{
label: "泛油",
value: 10,
},
{
label: "块状修补",
value: 11,
},
{
label: "条状修补",
value: 12,
},
],
2: [
{
label: "破碎板",
value: 1,
},
{
label: "裂缝",
value: 2,
},
{
label: "板角断裂",
value: 3,
},
{
label: "错台",
value: 4,
},
{
label: "拱起",
value: 5,
},
{
label: "边角剥落",
value: 6,
},
{
label: "接缝料损坏",
value: 7,
},
{
label: "坑洞",
value: 8,
},
{
label: "唧泥",
value: 9,
},
{
label: "露骨",
value: 10,
},
{
label: "块状修补",
value: 11,
},
{
label: "条状修补",
value: 12,
},
],
},
directionOptions: [
{
label: "上行",
value: "上行",
},
{
label: "下行",
value: "下行",
},
],
diseaseList: [],
};
},
computed: {
// 路线长度
roadLength() {
const startStake = Number(this.diseaseForm.startStake);
const endStake = Number(this.diseaseForm.endStake);
return Math.ceil((endStake - startStake) * 1000);
},
// 桩号数据
stakeList() {
const startStake = Number(this.diseaseForm.startStake);
const endStake = Number(this.diseaseForm.endStake);
let stakeList = [startStake.toFixed(3)];
let subsectionNum = Math.ceil((endStake - startStake) * 100) - 1;
stakeList.push((Number(startStake.toFixed(2)) + 0.01).toFixed(3));
for (let i = 0; i < subsectionNum; i++) {
const upStake = Number(stakeList[stakeList.length - 1]);
stakeList.push((upStake + 0.01).toFixed(3));
}
return stakeList;
},
// 画布宽度
boxWidth() {
return Number(this.diseaseForm.roadLength) + this.boxPadding * 2;
},
// 画布高度
boxHeight() {
return this.diseaseForm.roadWidth * 100;
},
// 半幅宽度
roadHalfWidth() {
return this.boxHeight / 2 + this.rulerHeight;
},
// 病害校验
diseaseRules() {
return {
distance: [
{ required: true, message: "请输入距分割线多少米" },
{
type: "number",
validator: (rule, value, callback) => {
if (!value) {
return callback(new Error("请输入距分割线多少米"));
} else {
if (value >= 0 && value <= this.diseaseForm.roadWidth / 2) {
callback();
} else {
return callback(
new Error(
`长度应在0.1m至${this.diseaseForm.roadWidth / 2}m之间`
)
);
}
}
},
trigger: "blur",
},
],
stake: [
{ required: true, message: "请输入病害位置桩号" },
{
type: "number",
validator: (rule, value, callback) => {
if (!value) {
return callback(new Error("请输入病害位置桩号"));
} else {
if (
value >= Number(this.diseaseForm.startStake) &&
value <= Number(this.diseaseForm.endStake)
) {
callback();
} else {
return callback(
new Error(
`桩号应在${this.diseaseForm.startStake}至${this.diseaseForm.endStake}之间`
)
);
}
}
},
trigger: "blur",
},
],
diseaseWidth: [
{ required: true, message: "请输入病害宽度" },
{
type: "number",
validator: (rule, value, callback) => {
if (!value) {
return callback(new Error("请输入病害宽度"));
} else {
const actualWidth =
this.diseaseForm.roadWidth / 2 - this.diseaseForm.distance;
console.log(actualWidth);
if (actualWidth >= value) {
callback();
} else {
return callback(new Error(`宽度应在0至${actualWidth}之间`));
}
}
},
trigger: "blur",
},
],
};
},
},
mounted() {
this.initCanvas();
this.drawDisease();
new paper.Point(50, 0).angle;
new paper.Point(40, 100).angle;
},
methods: {
/** 初始化 */
initCanvas() {
this.createCanvas();
paper.setup(this.canvas);
// 绘制边框
this.drawCanvasBorder();
// 绘制中间线
this.drawCenterLine();
// 绘制量尺
this.drawBorderLine();
},
/** 创建画布 */
createCanvas() {
var canvasList = document.getElementById("canvas");
this.canvas = document.createElement("canvas");
canvasList.appendChild(this.canvas);
this.canvas.width = this.boxWidth;
this.canvas.height = this.boxHeight + this.rulerHeight;
},
/** 绘制边框 */
drawCanvasBorder() {
let path = new paper.Path();
path.strokeColor = "black";
path.add(new Point(0, 0));
path.add(new Point(this.boxWidth, 0));
path.add(new Point(this.boxWidth, this.boxHeight + this.rulerHeight));
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],
// ],
// });
// path2.strokeColor = "black";
},
/** 绘制中间线 */
drawCenterLine() {
var centerLine = new paper.Path({
segments: [
[0, this.boxHeight / 2 + this.rulerHeight],
[this.boxWidth, this.boxHeight / 2 + this.rulerHeight],
],
});
centerLine.strokeColor = "#ff0000";
centerLine.strokeWidth = 1;
centerLine.strokeCap = "round";
centerLine.dashArray = [10, 12];
},
/** 绘制量尺
* 十米划分
*/
drawBorderLine() {
/**
* 画布总宽为 [this.boxWidth]，x坐标 [this.boxPadding] 为起始位置，止点坐标为 [this.boxWidth]，左右两边各空出 [this.boxPadding] 的距离。
*/
let segments = [
[this.boxPadding, this.rulerSeparateHeight],
[this.boxPadding, this.rulerHeight],
];
new paper.PointText({
point: [this.boxPadding / 2, this.boxPadding / 2],
content: this.transformStakeString(this.stakeList[0]),
fillColor: "black",
fontFamily: "Courier New",
fontSize: 12,
});
// 循环绘制量尺标线&设置标题
for (let index = 1; index <= this.stakeList.length - 1; index++) {
segments.push([this.boxPadding + index * 100, this.rulerHeight]);
segments.push([
this.boxPadding + index * 100,
this.rulerSeparateHeight,
]);
segments.push([this.boxPadding + index * 100, this.rulerHeight]);
new paper.PointText({
point: [this.boxPadding / 2 + index * 100, this.boxPadding / 2],
content: this.transformStakeString(this.stakeList[index]),
fillColor: "black",
fontFamily: "Courier New",
fontSize: 12,
});
}
let borderLine = new paper.Path({
segments: segments,
});
borderLine.strokeColor = "#000";
borderLine.strokeWidth = 1;
},
/**
* 绘制病害
*/
drawDisease() {
// 距离中间线多少米
let distance = this.diseaseForm.distance;
// 桩号
let stake = this.diseaseForm.stake;
// 病害长度
let diseaseLength = this.diseaseForm.diseaseLength;
// 病害宽度
let diseaseWidth = this.diseaseForm.diseaseWidth;
// 病害在canvas上的位置
const x =
(Number(stake) - Number(this.diseaseForm.startStake)) * 10000 +
this.boxPadding;
let y = this.roadHalfWidth + distance * 100;
const width = diseaseLength * 10;
const height = diseaseWidth * 100;
if (this.diseaseForm.direction == "上行") {
y = this.roadHalfWidth - distance * 100 - diseaseWidth * 100;
}
let rectangle = new paper.Rectangle({
x,
y,
width,
height,
});
let path = new paper.Path.Rectangle(rectangle);
path.strokeColor = "black";
this.drawInterferenceLine(rectangle, 4);
new paper.PointText({
point: rectangle.rightCenter,
content: `${diseaseWidth}m`,
fillColor: "black",
fontFamily: "Courier New",
fontSize: 14,
});
new paper.PointText({
point: rectangle.topCenter,
content: `${diseaseLength}m`,
fillColor: "black",
fontFamily: "Courier New",
fontSize: 14,
});
this.diseaseList.push(this.diseaseForm);
},
/** 绘制网格 */
drawInterferenceLine(rectangle, lineType) {
if (lineType == 1) {
let myPath = new paper.Path();
myPath.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath.add(rectangle.topCenter);
myPath.add(rectangle.rightCenter);
myPath.add(rectangle.bottomCenter);
myPath.add(rectangle.leftCenter);
myPath.closePath();
}
if (lineType == 2) {
let myPath1 = new paper.Path();
myPath1.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath1.add(rectangle.topCenter);
myPath1.add(rectangle.bottomCenter);
let myPath2 = new paper.Path();
myPath2.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath2.add(rectangle.rightCenter);
myPath2.add(rectangle.leftCenter);
}
if (lineType == 3) {
let myPath1 = new paper.Path();
myPath1.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath1.add(rectangle.leftCenter);
myPath1.add(rectangle.bottomCenter);
let myPath2 = new paper.Path();
myPath2.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath2.add(rectangle.topLeft);
myPath2.add(rectangle.bottomRight);
let myPath3 = new paper.Path();
myPath3.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath3.add(rectangle.topCenter);
myPath3.add(rectangle.rightCenter);
}
if (lineType == 4) {
let myPath1 = new paper.Path();
myPath1.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath1.add(rectangle.topLeft);
myPath1.add(rectangle.bottomRight);
let myPath2 = new paper.Path();
myPath2.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath2.add(rectangle.topRight);
myPath2.add(rectangle.bottomLeft);
}
},
/**
* 生成画布
*/
onSubmit() {
paper.remove();
this.canvas.remove();
this.initCanvas();
},
// 添加病害
addDisease() {
this.drawDisease();
},
/** 桩号转换 */
transformStakeString(stake) {
let stakeString = "K" + stake;
return stakeString.replace(".", "+");
},
},
};
</script>
<style scoped>
.drawing {
display: flex;
}
.canvas {
display: block;
box-sizing: border-box;
padding: 10px;
}
.plan {
background: #fff;
width: 90%;
box-sizing: border-box;
padding: 10px;
margin-left: 20px;
}
.control-btn {
margin-top: 30px;
}
</style>
src/components/drawing_old.vue 0 → 100644
浏览文件 @ 22a68623
<!--
* @Descripttion:
* @Author: xuyanqi
* @Date: 2021-12-18 15:03:57
-->
<template>
<div class="drawing">
<div class="canvas">
<canvas id="main-canvas" :width="boxWidth" :height="boxHeight"></canvas>
</div>
<div class="plan">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>道路信息</span>
</div>
<el-form ref="ruleForm" class="demo-ruleForm">
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="起点桩号" prop="roadWidth">
<el-input v-model="form.startStake"></el-input>
</el-form-item>
<el-form-item label="止点桩号" prop="roadWidth">
<el-input v-model="form.endStake"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">生成</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
</div>
</div>
</template>
<script>
import paper from "paper";
import { Point } from "paper/dist/paper-core";
export default {
data() {
return {
areax: 30,
areay: 30,
boxWidth: 1060,
boxHeight: 800,
circle_diameter: 50,
startStake: 1000,
x: 200,
y: 200,
ratioWidth: 10,
ratioHeight: 25,
roadWidth: 10,
form: {
startStake: "615.730",
endStake: "616.700",
},
};
},
computed: {
stakeList() {
const startStake = Number(this.form.startStake);
const endStake = Number(this.form.endStake);
let stakeList = [startStake.toFixed(3)];
let subsectionNum = Math.ceil(((endStake - startStake) * 1000) / 100) - 1;
let i = 0;
// 判断起点桩号是否是整数，如果不是整数第一段路桩号将截至整百,否则最后一段路截断
if (startStake % 1 !== 0) {
i++;
stakeList.push((Number(startStake.toFixed(1)) + 0.1).toFixed(3));
}
for (i; i < subsectionNum; i++) {
const upStake = Number(stakeList[stakeList.length - 1]);
stakeList.push((upStake + 0.1).toFixed(3));
}
stakeList.push(endStake.toFixed(3));
return stakeList;
},
},
mounted() {
this.updateDrawing();
},
methods: {
updateDrawing() {
paper.setup(document.getElementById("main-canvas"));
// Now, draw your things based on component state.
// const point = new paper.Point(this.x, this.y);
// const circle = new paper.Path.Circle(point, this.circle_diameter);
// circle.fillColor = "#2ecc71";
// circle.strokeColor = "#2ecc71";
// 面板四周的边框
this.drawCanvasBorder();
// 标出有效位置
// this.drawEffectiveArea();
// 画中心线
this.drawCenterLine();
// 画边线
this.drawBorderLine();
this.drawDisease(615.83, 2.5, 2, 2.8, "下行", 1);
// this.drawDisease(1030, 0, 2, 5.8, "下行", 2);
// this.drawDisease(1020, 3.1, 4, 6.1, "上行", 3);
// this.drawDisease(1080, 0, 3, 3, "上行", 4);
},
drawCanvasBorder() {
let path = new paper.Path();
path.strokeColor = "black";
path.add(new Point(0, 0));
path.add(new Point(this.boxWidth, 0));
path.add(new Point(this.boxWidth, this.boxHeight));
path.add(new Point(0, this.boxHeight));
path.closed = true;
},
drawEffectiveArea() {
let rectangle = new paper.Rectangle({
x: this.areax,
y: this.areay,
width: 1000,
height: 500,
});
let path = new paper.Path.Rectangle(rectangle);
path.fillColor = "#e9e9ff";
},
drawCenterLine() {
var centerLine = new paper.Path({
segments: [
[0, this.boxHeight / 2],
[this.boxWidth, this.boxHeight / 2],
],
});
centerLine.strokeColor = "#ff0000";
centerLine.strokeWidth = 1;
centerLine.strokeCap = "round";
centerLine.dashArray = [10, 12];
},
drawBorderLine() {
if (this.stakeList.length > 11) {
this.$message({
message: "桩号超过1000米",
type: "warning",
});
return false;
}
for (let index = 0; index < this.stakeList.length - 1; index++) {
// 刻画标尺，100米的实际长度，显示在1000px上，每100px显示一个刻度
let m = 10;
if (index == 0) {
m = 7;
}
// 上行
let borderLine = new paper.Path({
segments: [
[
this.areax + index * this.ratioWidth * m,
this.boxHeight / 2 - this.roadWidth * this.ratioHeight + m,
],
[
this.areax + index * this.ratioWidth * m,
this.boxHeight / 2 - this.roadWidth * this.ratioHeight,
],
[
this.areax + (index + 1) * this.ratioWidth * m,
this.boxHeight / 2 - this.roadWidth * this.ratioHeight,
],
[
this.areax + (index + 1) * this.ratioWidth * m,
this.boxHeight / 2 - this.roadWidth * this.ratioHeight + m,
],
],
});
borderLine.strokeColor = "#000";
borderLine.strokeWidth = 1;
// 下行
borderLine = new paper.Path({
segments: [
[
this.areax + index * this.ratioWidth * m,
this.boxHeight / 2 + this.roadWidth * this.ratioHeight - m,
],
[
this.areax + index * this.ratioWidth * m,
this.boxHeight / 2 + this.roadWidth * this.ratioHeight,
],
[
this.areax + (index + 1) * this.ratioWidth * m,
this.boxHeight / 2 + this.roadWidth * this.ratioHeight,
],
[
this.areax + (index + 1) * this.ratioWidth * m,
this.boxHeight / 2 + this.roadWidth * this.ratioHeight - m,
],
],
});
borderLine.strokeColor = "#000";
borderLine.strokeWidth = 1;
console.log(index == this.stakeList.length - 1);
if (index == 9) {
new paper.PointText({
point: [
this.areax + index * this.ratioWidth * m - 16,
this.boxHeight / 2 - this.roadWidth * this.ratioHeight - 5,
],
content: this.transformStakeString(this.stakeList[index]),
fillColor: "black",
fontFamily: "Courier New",
fontSize: 12,
});
new paper.PointText({
point: [
this.areax + (index + 1) * this.ratioWidth * m - 30,
this.boxHeight / 2 - this.roadWidth * this.ratioHeight + m - 15,
],
content: this.transformStakeString(this.stakeList[index + 1]),
fillColor: "black",
fontFamily: "Courier New",
fontSize: 12,
});
} else {
new paper.PointText({
point: [
this.areax + index * this.ratioWidth * m - 16,
this.boxHeight / 2 - this.roadWidth * this.ratioHeight - 5,
],
content: this.transformStakeString(this.stakeList[index]),
fillColor: "black",
fontFamily: "Courier New",
fontSize: 12,
});
}
console.log(borderLine);
}
},
drawDisease(stake, distance, width, height, direction, lineType) {
stake = stake + (stake - this.form.startStake) * 100;
const x =
this.areax + (stake - Number(this.form.startStake)) * this.ratioWidth;
let y = 100;
if (direction === "下行") {
y = this.boxHeight / 2 + distance * this.ratioHeight;
}
if (direction === "上行") {
y =
this.boxHeight / 2 -
distance * this.ratioHeight -
width * this.ratioHeight;
}
this.drawRectangleLabel(
x,
y,
height * this.ratioWidth,
width * this.ratioHeight,
distance,
direction,
lineType
);
},
drawInterferenceLine(rectangle, lineType) {
// console.log(rectangle, lineType);
if (lineType == 1) {
let myPath = new paper.Path();
myPath.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath.add(rectangle.topCenter);
myPath.add(rectangle.rightCenter);
myPath.add(rectangle.bottomCenter);
myPath.add(rectangle.leftCenter);
myPath.closePath();
}
if (lineType == 2) {
let myPath1 = new paper.Path();
myPath1.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath1.add(rectangle.topCenter);
myPath1.add(rectangle.bottomCenter);
let myPath2 = new paper.Path();
myPath2.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath2.add(rectangle.rightCenter);
myPath2.add(rectangle.leftCenter);
}
if (lineType == 3) {
let myPath1 = new paper.Path();
myPath1.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath1.add(rectangle.leftCenter);
myPath1.add(rectangle.bottomCenter);
let myPath2 = new paper.Path();
myPath2.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath2.add(rectangle.topLeft);
myPath2.add(rectangle.bottomRight);
let myPath3 = new paper.Path();
myPath3.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath3.add(rectangle.topCenter);
myPath3.add(rectangle.rightCenter);
}
if (lineType == 4) {
let myPath1 = new paper.Path();
myPath1.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath1.add(rectangle.topLeft);
myPath1.add(rectangle.bottomRight);
let myPath2 = new paper.Path();
myPath2.strokeColor = new paper.Color(0, 0, 0, 0.5);
myPath2.add(rectangle.topRight);
myPath2.add(rectangle.bottomLeft);
}
},
drawRectangleLabel(x, y, width, height, distance, direction, lineType) {
let rectangle = new paper.Rectangle({
x,
y,
width,
height,
});
let path = new paper.Path.Rectangle(rectangle);
path.strokeColor = "black";
this.drawInterferenceLine(rectangle, lineType);
if (height > 1) {
new paper.PointText({
point: rectangle.rightCenter,
content: height / this.ratioHeight,
fillColor: "black",
fontFamily: "Courier New",
fontSize: 8,
});
}
if (width > 1) {
if (direction === "下行") {
let bottomCenter = rectangle.bottomCenter;
bottomCenter.y += -1;
bottomCenter.x += -8;
new paper.PointText({
point: bottomCenter,
content: width / this.ratioWidth,
fillColor: "black",
fontFamily: "Courier New",
fontSize: 8,
});
let topCenter = rectangle.topCenter;
topCenter.y += -1;
topCenter.x += 2;
new paper.PointText({
point: topCenter,
content: "右" + distance,
fillColor: "black",
fontFamily: "Courier New",
fontSize: 8,
});
} else {
let topCenter = rectangle.topCenter;
topCenter.y += -2;
topCenter.x += -10;
new paper.PointText({
point: topCenter,
content: width / this.ratioWidth,
fillColor: "black",
fontFamily: "Courier New",
fontSize: 8,
});
let bottomCenter = rectangle.bottomCenter;
bottomCenter.y += 0;
bottomCenter.x += 2;
new paper.PointText({
point: bottomCenter,
content: "左" + distance,
fillColor: "black",
fontFamily: "Courier New",
fontSize: 8,
});
}
}
if (width > 1 && height > 1) {
let bottomRight = rectangle.bottomRight;
bottomRight.y += 10;
bottomRight.x += 10;
new paper.PointText({
point: bottomRight,
content: (width / this.ratioWidth) * (height / this.ratioHeight),
fillColor: "black",
fontFamily: "Courier New",
fontSize: 8,
});
}
},
transformStake(stake) {
return Number(
stake.toLocaleLowerCase().replace("k", "").replace("+", "")
);
},
transformStakeString(stake) {
let stakeString = "K" + stake;
return stakeString.replace(".", "+");
},
onSubmit() {
this.drawBorderLine();
},
},
};
</script>
<style scoped>
.drawing {
display: flex;
}
.canvas {
display: block;
box-sizing: border-box;
padding: 10px;
}
.plan {
background: #fff;
width: 400px;
box-sizing: border-box;
padding: 10px;
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论