Skip to content

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

第二次尝试

上级 20d12ccd
显示空白字符变更
内嵌 并排
正在显示 包含 574 行增加 和 333 行删除
src/App copy.vue 0 → 100644
浏览文件 @ d9573fb8
<template>
<div id="app">
<div class="canvas">
<canvas ref="road" :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"
label-width="150px"
class="demo-ruleForm"
size="mini"
>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="单车道宽度" prop="lineHeightm">
<el-input v-model="lineHeightm"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="起点桩号" prop="startStake">
<el-input v-model="startStake"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="界面长度" prop="roadLength">
<el-select v-model="roadLength" placeholder="界面长度">
<el-option label="50" value="50"></el-option>
<el-option label="100" value="100"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="横宽比" prop="ratio">
<el-input-number
v-model="ratio"
@change="handleRatioChange"
:min="5"
:max="50"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="车道数（双向）" prop="lineNumber">
<el-select
v-model="lineNumber"
placeholder="车道数"
@change="changeLineNumber"
>
<el-option label="2车道" value="2"></el-option>
<el-option label="4车道" value="4"></el-option>
<el-option label="6车道" value="6"></el-option>
<el-option label="8车道" value="8"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="16">
<el-form-item>
<el-button type="primary" @click="submitForm()"
>立即创建</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-divider></el-divider>
<el-table :data="tableData" style="width: 100%">
<el-table-column fixed prop="dataType" label="类型">
</el-table-column>
<el-table-column prop="startStake" label="起点桩号">
</el-table-column>
<el-table-column prop="startStakeCenter" label="中心线">
</el-table-column>
<el-table-column prop="endStake" label="终点桩号"> </el-table-column>
<el-table-column prop="endStakeCenter" label="中心线">
</el-table-column>
<el-table-column prop="dataHeight" label="高度"> </el-table-column>
<el-table-column prop="dataWidth" label="宽度"> </el-table-column>
</el-table>
</el-card>
</div>
</div>
</template>
<script>
export default {
name: "App",
props: {},
data() {
return {
ctx: null,
boxWidth: 1200,
boxHeight: 714,
center: 357,
lineHeightm: 3.75,
lineHeight: 18.75,
lineNumber: 6,
startStake: 236000,
ratio: 18,
roadLength: 50,
step: 0,
tableData: [
{
dataType: "裂缝",
startStake: "236012",
startStakeCenter: "10",
endStake: "236022",
endStakeCenter: "5",
dataHeight: "10",
dataWidth: "0",
},
{
dataType: "坑洞",
startStake: "236010",
startStakeCenter: "1",
endStake: "",
endStakeCenter: "",
dataHeight: "1",
dataWidth: "3.75",
},
{
dataType: "坑洞",
startStake: "236020",
startStakeCenter: "3.75",
endStake: "",
endStakeCenter: "",
dataHeight: "3.8",
dataWidth: "1",
},
{
dataType: "坑洞",
startStake: "236040",
startStakeCenter: "7.5",
endStake: "",
endStakeCenter: "",
dataHeight: "2",
dataWidth: "2",
},
{
dataType: "坑洞",
startStake: "236030",
startStakeCenter: "1",
endStake: "",
endStakeCenter: "",
dataHeight: "0.5",
dataWidth: "1.2",
},
],
};
},
mounted() {
// 重新计算一下车道宽
this.lineHeight = this.lineHeightm * this.ratio;
this.init();
},
watch: {
lineHeightm(val) {
this.lineHeight = val * this.ratio;
},
},
computed: {
endStake() {
return Number(this.startStake) + Number(this.roadLength);
},
boxStartx() {
return this.boxWidth / 2 - (this.roadLength * this.ratio) / 2;
},
boxEndx() {
return this.boxWidth / 2 + (this.roadLength * this.ratio) / 2;
},
},
methods: {
updateCanvas() {
this.ctx.clearRect(0, 0, this.boxWidth, this.boxHeight);
this.ctx.save();
this.init();
},
handleRatioChange() {
this.lineHeight = this.lineHeightm * this.ratio;
},
changeLineNumber() {},
init() {
this.ctx = this.$refs.road.getContext("2d");
this.drowFillRect({
startx: 0,
starty: 0,
width: this.boxWidth,
height: this.boxHeight,
fillStyle: "#fff",
});
this.drowCenterLine();
let upCounter = 1;
let downCounter = 1;
for (let i = 0; i < this.lineNumber - 2; i++) {
if (i % 2 == 0) {
this.drowDashedLine({
startx: this.boxStartx,
starty: this.center - this.lineHeight * upCounter,
endx: this.boxEndx,
endy: this.center - this.lineHeight * upCounter,
lineWidth: 1,
strokeStyle: "#000",
});
upCounter++;
} else {
this.drowDashedLine({
startx: this.boxStartx,
starty: this.center + this.lineHeight * downCounter,
endx: this.boxEndx,
endy: this.center + this.lineHeight * downCounter,
lineWidth: 1,
strokeStyle: "#000",
});
downCounter++;
}
}
this.drowLine({
startx: this.boxStartx,
starty: this.center - this.lineHeight * (this.lineNumber / 2),
endx: this.boxEndx,
endy: this.center - this.lineHeight * (this.lineNumber / 2),
lineWidth: 1,
strokeStyle: "#000",
});
this.drowLine({
startx: this.boxStartx,
starty: this.center + this.lineHeight * (this.lineNumber / 2),
endx: this.boxEndx,
endy: this.center + this.lineHeight * (this.lineNumber / 2),
lineWidth: 1,
strokeStyle: "#000",
});
this.drowText();
this.tableData.forEach((data) => {
if (data.dataType === "坑洞") {
const startx =
this.boxStartx +
(data.startStake - this.startStake - data.dataHeight / 2) *
this.ratio;
const starty =
this.center -
(Number(data.startStakeCenter) + Number(data.dataWidth)) *
this.ratio;
const width = data.dataHeight * this.ratio;
const height = data.dataWidth * this.ratio;
const fillStyle = this.getRandomColor();
this.drowFillRect({
startx,
starty,
width,
height,
fillStyle,
});
// this.drowRect({
// startx,
// starty,
// width,
// height,
// strokeStyle,
// });
} else if (data.dataType === "裂缝") {
const startx =
this.boxStartx + (data.startStake - this.startStake) * this.ratio;
const starty = this.center - data.startStakeCenter * this.ratio;
const endx =
this.boxStartx + (data.endStake - this.startStake) * this.ratio;
const endy = this.center - data.endStakeCenter * this.ratio;
this.drowLine({
startx: startx,
starty: starty,
endx: endx,
endy: endy,
lineWidth: 1,
strokeStyle: "#000",
});
}
});
},
drowCenterLine() {
if (this.lineNumber == 2) {
this.drowDashedLine({
startx: this.boxWidth / 2 - (this.roadLength * this.ratio) / 2,
starty: this.center,
endx: this.boxWidth / 2 + (this.roadLength * this.ratio) / 2,
endy: this.center,
lineWidth: 2,
strokeStyle: "#000",
});
} else {
this.drowLine({
startx: this.boxWidth / 2 - (this.roadLength * this.ratio) / 2,
starty: this.center,
endx: this.boxWidth / 2 + (this.roadLength * this.ratio) / 2,
endy: this.center,
lineWidth: 2,
strokeStyle: "#000",
});
}
},
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) {
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();
},
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();
},
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();
},
drowGap(gap) {
const { startx, starty, endx, endy } = gap;
this.ctx.save();
this.ctx.setLineDash([]);
this.ctx.beginPath();
this.ctx.moveTo(startx, starty);
console.log(startx, starty);
// console.log(this.getRandom(startx, endx));
console.log(endx, endy);
// console.log(this.getRandom(starty, endy));
// this.ctx.lineTo(endx, endy);
for (var i = 0; i < 1; i++) {
this.ctx.quadraticCurveTo(
this.getRandom(startx, endx),
this.getRandom(starty, endy),
this.getRandom(startx, endx),
this.getRandom(starty, endy)
);
}
this.ctx.quadraticCurveTo(537, 236, endx, endy);
this.ctx.lineWidth = 4;
this.ctx.strokeStyle = "#000";
this.ctx.stroke();
this.ctx.closePath();
},
drowText() {
this.ctx.font = "12px 微软雅黑";
this.ctx.fillStyle = "#000";
this.ctx.fillText(
this.startStake,
this.boxStartx,
this.center - this.lineHeight * (this.lineNumber / 2) - 2
);
this.ctx.fillText(
this.endStake,
this.boxEndx - 40,
this.center - this.lineHeight * (this.lineNumber / 2) - 2
);
},
submitForm() {
this.updateCanvas();
},
getRandomColor() {
const r = Math.floor(Math.random() * 255);
const g = Math.floor(Math.random() * 255);
const b = Math.floor(Math.random() * 255);
return "rgba(" + r + "," + g + "," + b + ",0.8)";
},
getRandom(min, max) {
return Math.floor(Math.random() * (max - min)) === min
? min + 1
: Math.floor(Math.random() * (max - min)) + min;
},
},
};
</script>
<style>
#app {
display: flex;
flex-direction: column;
align-items: center;
}
.canvas {
display: block;
box-sizing: border-box;
padding: 10px;
}
.plan {
background: #fff;
width: 100%;
box-sizing: border-box;
padding: 20px;
}
</style>
src/App.vue
浏览文件 @ d9573fb8
...@@ -3,91 +3,7 @@ ...@@ -3,91 +3,7 @@
<div class="canvas"> <div class="canvas">
<canvas ref="road" :width="boxWidth" :height="boxHeight"></canvas> <canvas ref="road" :width="boxWidth" :height="boxHeight"></canvas>
</div> </div>
<div class="plan"> <div class="plan"></div>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>施工日志</span>
</div>
<el-form
ref="ruleForm"
label-width="150px"
class="demo-ruleForm"
size="mini"
>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="单车道宽度" prop="lineHeightm">
<el-input v-model="lineHeightm"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="起点桩号" prop="startStake">
<el-input v-model="startStake"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="界面长度" prop="roadLength">
<el-select v-model="roadLength" placeholder="界面长度">
<el-option label="50" value="50"></el-option>
<el-option label="100" value="100"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="横宽比" prop="ratio">
<el-input-number
v-model="ratio"
@change="handleRatioChange"
:min="5"
:max="50"
></el-input-number>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="车道数（双向）" prop="lineNumber">
<el-select
v-model="lineNumber"
placeholder="车道数"
@change="changeLineNumber"
>
<el-option label="2车道" value="2"></el-option>
<el-option label="4车道" value="4"></el-option>
<el-option label="6车道" value="6"></el-option>
<el-option label="8车道" value="8"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="16">
<el-form-item>
<el-button type="primary" @click="submitForm()"
>立即创建</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-divider></el-divider>
<el-table :data="tableData" style="width: 100%">
<el-table-column fixed prop="dataType" label="类型">
</el-table-column>
<el-table-column prop="startStake" label="起点桩号">
</el-table-column>
<el-table-column prop="startStakeCenter" label="中心线">
</el-table-column>
<el-table-column prop="endStake" label="终点桩号"> </el-table-column>
<el-table-column prop="endStakeCenter" label="中心线">
</el-table-column>
<el-table-column prop="dataHeight" label="高度"> </el-table-column>
<el-table-column prop="dataWidth" label="宽度"> </el-table-column>
</el-table>
</el-card>
</div>
</div> </div>
</template> </template>
...@@ -98,234 +14,104 @@ export default { ...@@ -98,234 +14,104 @@ export default {
data() { data() {
return { return {
ctx: null, ctx: null,
boxWidth: 1200, boxWidth: 1000,
boxHeight: 714, boxHeight: 714,
center: 357, roadWidth: 8.25,
lineHeightm: 3.75, ratio: 10,
lineHeight: 18.75, startStake: "K3+950",
lineNumber: 6,
startStake: 236000,
ratio: 18,
roadLength: 50,
step: 0,
tableData: [
{
dataType: "裂缝",
startStake: "236012",
startStakeCenter: "10",
endStake: "236022",
endStakeCenter: "5",
dataHeight: "10",
dataWidth: "0",
},
{
dataType: "坑洞",
startStake: "236010",
startStakeCenter: "1",
endStake: "",
endStakeCenter: "",
dataHeight: "1",
dataWidth: "3.75",
},
{
dataType: "坑洞",
startStake: "236020",
startStakeCenter: "3.75",
endStake: "",
endStakeCenter: "",
dataHeight: "3.8",
dataWidth: "1",
},
{
dataType: "坑洞",
startStake: "236040",
startStakeCenter: "7.5",
endStake: "",
endStakeCenter: "",
dataHeight: "2",
dataWidth: "2",
},
{
dataType: "坑洞",
startStake: "236030",
startStakeCenter: "1",
endStake: "",
endStakeCenter: "",
dataHeight: "0.5",
dataWidth: "1.2",
},
],
}; };
}, },
mounted() { mounted() {
// 重新计算一下车道宽
this.lineHeight = this.lineHeightm * this.ratio;
this.init(); this.init();
}, },
watch: {
lineHeightm(val) {
this.lineHeight = val * this.ratio;
},
},
computed: {
endStake() {
return Number(this.startStake) + Number(this.roadLength);
},
boxStartx() {
return this.boxWidth / 2 - (this.roadLength * this.ratio) / 2;
},
boxEndx() {
return this.boxWidth / 2 + (this.roadLength * this.ratio) / 2;
},
},
methods: { methods: {
updateCanvas() {
this.ctx.clearRect(0, 0, this.boxWidth, this.boxHeight);
this.ctx.save();
this.init();
},
handleRatioChange() {
this.lineHeight = this.lineHeightm * this.ratio;
},
changeLineNumber() {},
init() { init() {
this.ctx = this.$refs.road.getContext("2d"); this.ctx = this.$refs.road.getContext("2d");
this.drowFillRect({ this.drowRect({
startx: 0, startx: 0,
starty: 0, starty: 0,
width: this.boxWidth, width: this.boxWidth,
height: this.boxHeight, height: this.boxHeight,
fillStyle: "#fff",
});
this.drowCenterLine();
let upCounter = 1;
let downCounter = 1;
for (let i = 0; i < this.lineNumber - 2; i++) {
if (i % 2 == 0) {
this.drowDashedLine({
startx: this.boxStartx,
starty: this.center - this.lineHeight * upCounter,
endx: this.boxEndx,
endy: this.center - this.lineHeight * upCounter,
lineWidth: 1,
strokeStyle: "#000", strokeStyle: "#000",
}); });
upCounter++; this.drowCenterLine();
} else { this.drowBorderLines();
this.drowDashedLine({ this.drowText({
startx: this.boxStartx, startx: 10,
starty: this.center + this.lineHeight * downCounter, starty: this.boxHeight / 2 - (this.ratio * this.roadWidth) / 2,
endx: this.boxEndx, fillText: "8.47",
endy: this.center + this.lineHeight * downCounter, fillStyle: "#000",
lineWidth: 1,
strokeStyle: "#000",
}); });
downCounter++; this.drawWithArrowheads({
} startx: 5,
} starty: this.boxHeight / 2,
endx: 5,
this.drowLine({ endy: this.boxHeight / 2 - this.ratio * this.roadWidth,
startx: this.boxStartx,
starty: this.center - this.lineHeight * (this.lineNumber / 2),
endx: this.boxEndx,
endy: this.center - this.lineHeight * (this.lineNumber / 2),
lineWidth: 1,
strokeStyle: "#000",
}); });
},
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({ this.drowLine({
startx: this.boxStartx, startx: startx,
starty: this.center + this.lineHeight * (this.lineNumber / 2), starty: starty,
endx: this.boxEndx, endx: endx,
endy: this.center + this.lineHeight * (this.lineNumber / 2), endy: starty,
lineWidth: 1, lineWidth: 1,
strokeStyle: "#000", strokeStyle: "#000",
}); });
this.drowText();
this.tableData.forEach((data) => {
if (data.dataType === "坑洞") {
const startx =
this.boxStartx +
(data.startStake - this.startStake - data.dataHeight / 2) *
this.ratio;
const starty =
this.center -
(Number(data.startStakeCenter) + Number(data.dataWidth)) *
this.ratio;
const width = data.dataHeight * this.ratio;
const height = data.dataWidth * this.ratio;
const fillStyle = this.getRandomColor();
this.drowFillRect({
startx,
starty,
width,
height,
fillStyle,
});
// this.drowRect({
// startx,
// starty,
// width,
// height,
// strokeStyle,
// });
} else if (data.dataType === "裂缝") {
const startx =
this.boxStartx + (data.startStake - this.startStake) * this.ratio;
const starty = this.center - data.startStakeCenter * this.ratio;
const endx =
this.boxStartx + (data.endStake - this.startStake) * this.ratio;
const endy = this.center - data.endStakeCenter * this.ratio;
this.drowLine({ this.drowLine({
startx: startx, startx: startx,
starty: starty, starty: starty,
endx: endx, endx: startx,
endy: endy, endy: this.boxHeight / 2 - this.ratio * this.roadWidth - 10,
lineWidth: 1, lineWidth: 1,
strokeStyle: "#000", strokeStyle: "#000",
}); });
} if (i == 0) {
this.drowText({
startx: startx,
starty: this.boxHeight / 2 - this.ratio * this.roadWidth - 15,
fillText: this.transformStakeString(stake + i * 10),
fillStyle: "#000",
}); });
}, } else if (i == 10) {
drowCenterLine() { this.drowText({
if (this.lineNumber == 2) { startx: startx - 45,
this.drowDashedLine({ starty: this.boxHeight / 2 - this.ratio * this.roadWidth - 15,
startx: this.boxWidth / 2 - (this.roadLength * this.ratio) / 2, fillText: this.transformStakeString(stake + i * 10),
starty: this.center, fillStyle: "#000",
endx: this.boxWidth / 2 + (this.roadLength * this.ratio) / 2,
endy: this.center,
lineWidth: 2,
strokeStyle: "#000",
}); });
} else { } else {
this.drowLine({ this.drowText({
startx: this.boxWidth / 2 - (this.roadLength * this.ratio) / 2, startx: startx - 5,
starty: this.center, starty: this.boxHeight / 2 - this.ratio * this.roadWidth - 15,
endx: this.boxWidth / 2 + (this.roadLength * this.ratio) / 2, fillText: this.transformStakeString(stake + i * 10),
endy: this.center, fillStyle: "#000",
lineWidth: 2,
strokeStyle: "#000",
}); });
} }
}
}, },
drowRect(rect) { drowCenterLine() {
const { startx, starty, width, height, strokeStyle } = rect; this.drowDashedLine({
this.ctx.beginPath(); startx: 0,
this.ctx.strokeStyle = strokeStyle; starty: this.boxHeight / 2,
this.ctx.lineWidth = "1"; endx: this.boxWidth,
this.ctx.rect(startx, starty, width, height); endy: this.boxHeight / 2,
this.ctx.stroke(); lineWidth: 1,
this.ctx.closePath(); strokeStyle: "#c0392b",
}, });
drowFillRect(rect) { this.drowText({
const { startx, starty, width, height, fillStyle = "#000" } = rect; startx: 10,
this.ctx.beginPath(); starty: this.boxHeight / 2 + 5,
this.ctx.fillStyle = fillStyle; fillText: "中心线",
this.ctx.fillRect(startx, starty, width, height); fillStyle: "#000",
this.ctx.closePath(); });
}, },
drowLine(line) { drowDashedLine(dashedLine) {
const { const {
startx, startx,
starty, starty,
...@@ -333,18 +119,18 @@ export default { ...@@ -333,18 +119,18 @@ export default {
endy, endy,
lineWidth = 1, lineWidth = 1,
strokeStyle = "#000", strokeStyle = "#000",
} = line; } = dashedLine;
this.ctx.save(); this.ctx.save();
this.ctx.setLineDash([]);
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.moveTo(startx, starty);
this.ctx.lineTo(endx, endy);
this.ctx.lineWidth = lineWidth; this.ctx.lineWidth = lineWidth;
this.ctx.strokeStyle = strokeStyle; this.ctx.strokeStyle = strokeStyle;
this.ctx.setLineDash([15, 12]);
this.ctx.moveTo(startx, starty);
this.ctx.lineTo(endx, endy);
this.ctx.stroke(); this.ctx.stroke();
this.ctx.closePath(); this.ctx.closePath();
}, },
drowDashedLine(dashedLine) { drowLine(line) {
const { const {
startx, startx,
starty, starty,
...@@ -352,70 +138,84 @@ export default { ...@@ -352,70 +138,84 @@ export default {
endy, endy,
lineWidth = 1, lineWidth = 1,
strokeStyle = "#000", strokeStyle = "#000",
} = dashedLine; } = line;
this.ctx.save(); this.ctx.save();
this.ctx.setLineDash([]);
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.lineWidth = lineWidth;
this.ctx.strokeStyle = strokeStyle;
this.ctx.setLineDash([15, 12]);
this.ctx.moveTo(startx, starty); this.ctx.moveTo(startx, starty);
this.ctx.lineTo(endx, endy); this.ctx.lineTo(endx, endy);
this.ctx.lineWidth = lineWidth;
this.ctx.strokeStyle = strokeStyle;
this.ctx.stroke(); this.ctx.stroke();
this.ctx.closePath(); this.ctx.closePath();
}, },
drowGap(gap) { drowRect(rect) {
const { startx, starty, endx, endy } = gap; const { startx, starty, width, height, strokeStyle } = rect;
this.ctx.save();
this.ctx.setLineDash([]);
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.moveTo(startx, starty); this.ctx.strokeStyle = strokeStyle;
console.log(startx, starty); this.ctx.lineWidth = "1";
// console.log(this.getRandom(startx, endx)); this.ctx.rect(startx, starty, width, height);
console.log(endx, endy);
// console.log(this.getRandom(starty, endy));
// this.ctx.lineTo(endx, endy);
for (var i = 0; i < 1; i++) {
this.ctx.quadraticCurveTo(
this.getRandom(startx, endx),
this.getRandom(starty, endy),
this.getRandom(startx, endx),
this.getRandom(starty, endy)
);
}
this.ctx.quadraticCurveTo(537, 236, endx, endy);
this.ctx.lineWidth = 4;
this.ctx.strokeStyle = "#000";
this.ctx.stroke(); this.ctx.stroke();
this.ctx.closePath(); this.ctx.closePath();
}, },
drowText() { 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();
},
drowText(text) {
const { startx, starty, fillText, fillStyle } = text;
let textInner = this.ctx.measureText(fillText);
this.ctx.font = "12px 微软雅黑"; this.ctx.font = "12px 微软雅黑";
this.ctx.fillStyle = "#000"; this.ctx.fillStyle = fillStyle;
this.ctx.fillText( this.ctx.fillText(fillText, startx, starty, textInner.width);
this.startStake,
this.boxStartx,
this.center - this.lineHeight * (this.lineNumber / 2) - 2
);
this.ctx.fillText(
this.endStake,
this.boxEndx - 40,
this.center - this.lineHeight * (this.lineNumber / 2) - 2
);
}, },
submitForm() { transformStake(stake) {
this.updateCanvas(); return Number(
stake.toLocaleLowerCase().replace("k", "").replace("+", "")
);
}, },
getRandomColor() { transformStakeString(stake) {
const r = Math.floor(Math.random() * 255); let stakeString = "K" + stake;
const g = Math.floor(Math.random() * 255); let l = stakeString.length - 3;
const b = Math.floor(Math.random() * 255); // "k2710".slice(0, 2) + "+" + "k2710".slice(2)
return "rgba(" + r + "," + g + "," + b + ",0.8)"; return stakeString.slice(0, l) + "+" + stakeString.slice(l);
}, },
getRandom(min, max) { drawWithArrowheads(line) {
return Math.floor(Math.random() * (max - min)) === min const { startx, starty, endx, endy } = line;
? min + 1 // arbitrary styling
: Math.floor(Math.random() * (max - min)) + min; 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();
}, },
}, },
}; };
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论