Skip to content

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

第三次尝试

上级 d9573fb8
隐藏空白字符变更
内嵌 并排
正在显示 包含 319 行增加 和 179 行删除
package.json
浏览文件 @ e2fdf136
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"element-ui": "^2.15.6", "element-ui": "^2.15.6",
"paper": "^0.12.15",
"vue": "^2.6.11" "vue": "^2.6.11"
}, },
"devDependencies": { "devDependencies": {
......
src/App.vue
浏览文件 @ e2fdf136
<template> <template>
<div id="app"> <div id="app">
<div class="canvas"> <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>
<div class="plan"></div>
</div> </div>
</template> </template>
<script> <script>
import paper from "paper";
import { Point } from "paper/dist/paper-core";
export default { export default {
name: "App", name: "App",
props: {}, props: {},
data() { data() {
return { return {
ctx: null, areax: 30,
boxWidth: 1000, areay: 30,
boxHeight: 714, boxWidth: 1060,
boxHeight: 800,
circle_diameter: 50,
startStake: 1000,
x: 200,
y: 200,
ratioWidth: 10,
ratioHeight: 25,
roadWidth: 8.25, roadWidth: 8.25,
ratio: 10,
startStake: "K3+950",
}; };
}, },
mounted() { mounted() {
this.init(); this.updateDrawing();
}, },
methods: { methods: {
init() { updateDrawing() {
this.ctx = this.$refs.road.getContext("2d"); paper.setup(document.getElementById("main-canvas"));
this.drowRect({ // Now, draw your things based on component state.
startx: 0, // const point = new paper.Point(this.x, this.y);
starty: 0, // const circle = new paper.Path.Circle(point, this.circle_diameter);
width: this.boxWidth, // circle.fillColor = "#2ecc71";
height: this.boxHeight, // circle.strokeColor = "#2ecc71";
strokeStyle: "#000",
}); // 面板四周的边框
this.drowCenterLine(); this.drawCanvasBorder();
this.drowBorderLines(); // 标出有效位置
this.drowText({ // this.drawEffectiveArea();
startx: 10, // 画中心线
starty: this.boxHeight / 2 - (this.ratio * this.roadWidth) / 2, this.drawCenterLine();
fillText: "8.47", // 画边线
fillStyle: "#000", 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({ let path = new paper.Path.Rectangle(rectangle);
startx: 5, path.fillColor = "#e9e9ff";
starty: this.boxHeight / 2, },
endx: 5, drawCenterLine() {
endy: this.boxHeight / 2 - this.ratio * this.roadWidth, 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() { drawBorderLine() {
const stake = this.transformStake(this.startStake); for (let index = 0; index < 10; index++) {
for (let i = 0; i <= 10; i++) { // 刻画标尺，100米的实际长度，显示在1000px上，每100px显示一个刻度
const startx = this.ratio * 10 * i; // 上行
const starty = this.boxHeight / 2 - this.ratio * this.roadWidth; let borderLine = new paper.Path({
const endx = this.ratio * 10 * (i + 10); segments: [
this.drowLine({ [
startx: startx, this.areax + index * this.ratioWidth * 10,
starty: starty, this.boxHeight / 2 - this.roadWidth * this.ratioHeight + 10,
endx: endx, ],
endy: starty, [
lineWidth: 1, this.areax + index * this.ratioWidth * 10,
strokeStyle: "#000", 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({ borderLine.strokeColor = "#000";
startx: startx, borderLine.strokeWidth = 1;
starty: starty, borderLine = new paper.Path({
endx: startx, segments: [
endy: this.boxHeight / 2 - this.ratio * this.roadWidth - 10, [
lineWidth: 1, this.areax + index * this.ratioWidth * 10,
strokeStyle: "#000", 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) { borderLine.strokeColor = "#000";
this.drowText({ borderLine.strokeWidth = 1;
startx: startx, if (index == 9) {
starty: this.boxHeight / 2 - this.ratio * this.roadWidth - 15, new paper.PointText({
fillText: this.transformStakeString(stake + i * 10), point: [
fillStyle: "#000", 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) { new paper.PointText({
this.drowText({ point: [
startx: startx - 45, this.areax + (index + 1) * this.ratioWidth * 10 - 30,
starty: this.boxHeight / 2 - this.ratio * this.roadWidth - 15, this.boxHeight / 2 - this.roadWidth * this.ratioHeight + 10 - 15,
fillText: this.transformStakeString(stake + i * 10), ],
fillStyle: "#000", content: this.transformStakeString(
this.startStake + (index + 1) * 10
),
fillColor: "black",
fontFamily: "Courier New",
fontSize: 12,
}); });
} else { } else {
this.drowText({ new paper.PointText({
startx: startx - 5, point: [
starty: this.boxHeight / 2 - this.ratio * this.roadWidth - 15, this.areax + index * this.ratioWidth * 10 - 16,
fillText: this.transformStakeString(stake + i * 10), this.boxHeight / 2 - this.roadWidth * this.ratioHeight - 5,
fillStyle: "#000", ],
content: this.transformStakeString(this.startStake + index * 10),
fillColor: "black",
fontFamily: "Courier New",
fontSize: 12,
}); });
} }
} }
}, },
drowCenterLine() { drawDisease(stake, distance, width, height, direction, lineType) {
this.drowDashedLine({ const x = this.areax + (stake - this.startStake) * this.ratioWidth;
startx: 0, let y = 100;
starty: this.boxHeight / 2,
endx: this.boxWidth, if (direction === "下行") {
endy: this.boxHeight / 2, y = this.boxHeight / 2 + distance * this.ratioHeight;
lineWidth: 1, }
strokeStyle: "#c0392b", if (direction === "上行") {
}); y =
this.drowText({ this.boxHeight / 2 -
startx: 10, distance * this.ratioHeight -
starty: this.boxHeight / 2 + 5, width * this.ratioHeight;
fillText: "中心线", }
fillStyle: "#000",
}); this.drawRectangleLabel(
}, x,
drowDashedLine(dashedLine) { y,
const { height * this.ratioWidth,
startx, width * this.ratioHeight,
starty, distance,
endx, direction,
endy, lineType
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();
}, },
drowFillRect(rect) { drawInterferenceLine(rectangle, lineType) {
const { startx, starty, width, height, fillStyle = "#000" } = rect; console.log(rectangle, lineType);
this.ctx.beginPath(); if (lineType == 1) {
this.ctx.fillStyle = fillStyle; let myPath = new paper.Path();
this.ctx.fillRect(startx, starty, width, height); myPath.strokeColor = new paper.Color(0, 0, 0, 0.5);
this.ctx.closePath(); 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) { drawRectangleLabel(x, y, width, height, distance, direction, lineType) {
const { startx, starty, fillText, fillStyle } = text; let rectangle = new paper.Rectangle({
let textInner = this.ctx.measureText(fillText); x,
this.ctx.font = "12px 微软雅黑"; y,
this.ctx.fillStyle = fillStyle; width,
this.ctx.fillText(fillText, startx, starty, textInner.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) { transformStake(stake) {
return Number( return Number(
...@@ -180,43 +351,8 @@ export default { ...@@ -180,43 +351,8 @@ export default {
transformStakeString(stake) { transformStakeString(stake) {
let stakeString = "K" + stake; let stakeString = "K" + stake;
let l = stakeString.length - 3; let l = stakeString.length - 3;
// "k2710".slice(0, 2) + "+" + "k2710".slice(2)
return stakeString.slice(0, l) + "+" + stakeString.slice(l); 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> </script>
...@@ -224,8 +360,6 @@ export default { ...@@ -224,8 +360,6 @@ export default {
<style> <style>
#app { #app {
display: flex; display: flex;
flex-direction: column;
align-items: center;
} }
.canvas { .canvas {
display: block; display: block;
...@@ -234,8 +368,8 @@ export default { ...@@ -234,8 +368,8 @@ export default {
} }
.plan { .plan {
background: #fff; background: #fff;
width: 100%; width: 400px;
box-sizing: border-box; box-sizing: border-box;
padding: 20px; padding: 10px;
} }
</style> </style>
yarn.lock
浏览文件 @ e2fdf136
...@@ -6057,6 +6057,11 @@ pako@~1.0.5: ...@@ -6057,6 +6057,11 @@ pako@~1.0.5:
resolved "https://registry.nlark.com/pako/download/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf" resolved "https://registry.nlark.com/pako/download/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
integrity sha1-bJWZ00DVTf05RjgCUqNXBaa5kr8= 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: parallel-transform@^1.1.0:
version "1.2.0" version "1.2.0"
resolved "https://registry.nlark.com/parallel-transform/download/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc" resolved "https://registry.nlark.com/parallel-transform/download/parallel-transform-1.2.0.tgz#9049ca37d6cb2182c3b1d2c720be94d14a5814fc"
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论