Skip to content

R
road-demo
提交 e2fdf136 authored 作者: 王健's avatar 王健
浏览文件
操作

第三次尝试

上级 d9573fb8
显示空白字符变更
内嵌 并排
正在显示 包含 319 行增加 和 179 行删除
package.json
浏览文件 @ e2fdf136
......@@ -10,6 +10,7 @@
"dependencies": {
"core-js": "^3.6.5",
"element-ui": "^2.15.6",
"paper": "^0.12.15",
"vue": "^2.6.11"
},
"devDependencies": {
......
src/App.vue
浏览文件 @ e2fdf136
<template>
<div id="app">
<div class="canvas">
<canvas ref="road" :width="boxWidth" :height="boxHeight"></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-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 class="plan"></div>
</div>
</template>
<script>
import paper from "paper";
import { Point } from "paper/dist/paper-core";
export default {
name: "App",
props: {},
data() {
return {
ctx: null,
boxWidth: 1000,
boxHeight: 714,
areax: 30,
areay: 30,
boxWidth: 1060,
boxHeight: 800,
circle_diameter: 50,
startStake: 1000,
x: 200,
y: 200,
ratioWidth: 10,
ratioHeight: 25,
roadWidth: 8.25,
ratio: 10,
startStake: "K3+950",
};
},
mounted() {
this.init();
this.updateDrawing();
},
methods: {
init() {
this.ctx = this.$refs.road.getContext("2d");
this.drowRect({
startx: 0,
starty: 0,
width: this.boxWidth,
height: this.boxHeight,
strokeStyle: "#000",
});
this.drowCenterLine();
this.drowBorderLines();
this.drowText({
startx: 10,
starty: this.boxHeight / 2 - (this.ratio * this.roadWidth) / 2,
fillText: "8.47",
fillStyle: "#000",
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,
});
this.drawWithArrowheads({
startx: 5,
starty: this.boxHeight / 2,
endx: 5,
endy: this.boxHeight / 2 - this.ratio * this.roadWidth,
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];
},
drowBorderLines() {
const stake = this.transformStake(this.startStake);
for (let i = 0; i <= 10; i++) {
const startx = this.ratio * 10 * i;
const starty = this.boxHeight / 2 - this.ratio * this.roadWidth;
const endx = this.ratio * 10 * (i + 10);
this.drowLine({
startx: startx,
starty: starty,
endx: endx,
endy: starty,
lineWidth: 1,
strokeStyle: "#000",
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,
],
],
});
this.drowLine({
startx: startx,
starty: starty,
endx: startx,
endy: this.boxHeight / 2 - this.ratio * this.roadWidth - 10,
lineWidth: 1,
strokeStyle: "#000",
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,
],
],
});
if (i == 0) {
this.drowText({
startx: startx,
starty: this.boxHeight / 2 - this.ratio * this.roadWidth - 15,
fillText: this.transformStakeString(stake + i * 10),
fillStyle: "#000",
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,
});
} else if (i == 10) {
this.drowText({
startx: startx - 45,
starty: this.boxHeight / 2 - this.ratio * this.roadWidth - 15,
fillText: this.transformStakeString(stake + i * 10),
fillStyle: "#000",
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 {
this.drowText({
startx: startx - 5,
starty: this.boxHeight / 2 - this.ratio * this.roadWidth - 15,
fillText: this.transformStakeString(stake + i * 10),
fillStyle: "#000",
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,
});
}
}
},
drowCenterLine() {
this.drowDashedLine({
startx: 0,
starty: this.boxHeight / 2,
endx: this.boxWidth,
endy: this.boxHeight / 2,
lineWidth: 1,
strokeStyle: "#c0392b",
});
this.drowText({
startx: 10,
starty: this.boxHeight / 2 + 5,
fillText: "中心线",
fillStyle: "#000",
});
},
drowDashedLine(dashedLine) {
const {
startx,
starty,
endx,
endy,
lineWidth = 1,
strokeStyle = "#000",
} = dashedLine;
this.ctx.save();
this.ctx.beginPath();
this.ctx.lineWidth = lineWidth;
this.ctx.strokeStyle = strokeStyle;
this.ctx.setLineDash([15, 12]);
this.ctx.moveTo(startx, starty);
this.ctx.lineTo(endx, endy);
this.ctx.stroke();
this.ctx.closePath();
},
drowLine(line) {
const {
startx,
starty,
endx,
endy,
lineWidth = 1,
strokeStyle = "#000",
} = line;
this.ctx.save();
this.ctx.setLineDash([]);
this.ctx.beginPath();
this.ctx.moveTo(startx, starty);
this.ctx.lineTo(endx, endy);
this.ctx.lineWidth = lineWidth;
this.ctx.strokeStyle = strokeStyle;
this.ctx.stroke();
this.ctx.closePath();
},
drowRect(rect) {
const { startx, starty, width, height, strokeStyle } = rect;
this.ctx.beginPath();
this.ctx.strokeStyle = strokeStyle;
this.ctx.lineWidth = "1";
this.ctx.rect(startx, starty, width, height);
this.ctx.stroke();
this.ctx.closePath();
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
);
},
drowFillRect(rect) {
const { startx, starty, width, height, fillStyle = "#000" } = rect;
this.ctx.beginPath();
this.ctx.fillStyle = fillStyle;
this.ctx.fillRect(startx, starty, width, height);
this.ctx.closePath();
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);
}
},
drowText(text) {
const { startx, starty, fillText, fillStyle } = text;
let textInner = this.ctx.measureText(fillText);
this.ctx.font = "12px 微软雅黑";
this.ctx.fillStyle = fillStyle;
this.ctx.fillText(fillText, startx, starty, textInner.width);
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(
......@@ -180,43 +351,8 @@ export default {
transformStakeString(stake) {
let stakeString = "K" + stake;
let l = stakeString.length - 3;
// "k2710".slice(0, 2) + "+" + "k2710".slice(2)
return stakeString.slice(0, l) + "+" + stakeString.slice(l);
},
drawWithArrowheads(line) {
const { startx, starty, endx, endy } = line;
// arbitrary styling
this.ctx.strokeStyle = "#000";
this.ctx.fillStyle = "#000";
this.ctx.lineWidth = 1;
// draw the line
this.ctx.beginPath();
this.ctx.moveTo(startx, starty);
this.ctx.lineTo(endx, endy);
this.ctx.stroke();
// draw the starting arrowhead
var startradians = Math.atan((endy - starty) / (endx - startx));
startradians += ((endx > startx ? 90 : -90) * Math.PI) / 180;
this.drawArrowhead(startx, starty, startradians);
// draw the ending arrowhead
var endradians = Math.atan((endy - starty) / (endx - startx));
endradians += ((endx > startx ? -90 : 90) * Math.PI) / 180;
this.drawArrowhead(endx, endy, endradians);
},
drawArrowhead(endx, endy, radians) {
this.ctx.save();
this.ctx.beginPath();
this.ctx.translate(endx, endy);
this.ctx.rotate(radians);
this.ctx.moveTo(0, 0);
this.ctx.lineTo(5, 20);
this.ctx.lineTo(-5, 20);
this.ctx.closePath();
this.ctx.restore();
this.ctx.fill();
},
},
};
</script>
......@@ -224,8 +360,6 @@ export default {
<style>
#app {
display: flex;
flex-direction: column;
align-items: center;
}
.canvas {
display: block;
......@@ -234,8 +368,8 @@ export default {
}
.plan {
background: #fff;
width: 100%;
width: 400px;
box-sizing: border-box;
padding: 20px;
padding: 10px;
}
</style>
yarn.lock
浏览文件 @ e2fdf136
......@@ -6057,6 +6057,11 @@ pako@~1.0.5:
resolved "https://registry.nlark.com/pako/download/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
integrity sha1-bJWZ00DVTf05RjgCUqNXBaa5kr8=
paper@^0.12.15:
version "0.12.15"
resolved "https://registry.yarnpkg.com/paper/-/paper-0.12.15.tgz#28b5e5ce0f7a99a851e980f6715f376881dfbc84"
integrity sha512-9qqtcY+V0Sd2RTLZKh7rTfWDbhfitOrtq3kzgOufhGpuYpCUXM+3UIK61au14tI0F9NA4xSttDYfk376O50aPA==
parallel-transform@^1.1.0:
version "1.2.0"
resolved "https://registry.nlark.com/parallel-transform/download/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论