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 @@
<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 class="plan"></div>
</div>
</template>
......@@ -98,234 +14,104 @@ export default {
data() {
return {
ctx: null,
boxWidth: 1200,
boxWidth: 1000,
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",
},
],
roadWidth: 8.25,
ratio: 10,
startStake: "K3+950",
};
},
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({
this.drowRect({
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",
this.drowCenterLine();
this.drowBorderLines();
this.drowText({
startx: 10,
starty: this.boxHeight / 2 - (this.ratio * this.roadWidth) / 2,
fillText: "8.47",
fillStyle: "#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.drawWithArrowheads({
startx: 5,
starty: this.boxHeight / 2,
endx: 5,
endy: this.boxHeight / 2 - this.ratio * this.roadWidth,
});
},
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: this.boxStartx,
starty: this.center + this.lineHeight * (this.lineNumber / 2),
endx: this.boxEndx,
endy: this.center + this.lineHeight * (this.lineNumber / 2),
startx: startx,
starty: starty,
endx: endx,
endy: starty,
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,
endx: startx,
endy: this.boxHeight / 2 - this.ratio * this.roadWidth - 10,
lineWidth: 1,
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",
});
},
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 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",
});
} 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",
this.drowText({
startx: startx - 5,
starty: this.boxHeight / 2 - this.ratio * this.roadWidth - 15,
fillText: this.transformStakeString(stake + i * 10),
fillStyle: "#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();
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",
});
},
drowLine(line) {
drowDashedLine(dashedLine) {
const {
startx,
starty,
......@@ -333,18 +119,18 @@ export default {
endy,
lineWidth = 1,
strokeStyle = "#000",
} = line;
} = dashedLine;
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.setLineDash([15, 12]);
this.ctx.moveTo(startx, starty);
this.ctx.lineTo(endx, endy);
this.ctx.stroke();
this.ctx.closePath();
},
drowDashedLine(dashedLine) {
drowLine(line) {
const {
startx,
starty,
......@@ -352,70 +138,84 @@ export default {
endy,
lineWidth = 1,
strokeStyle = "#000",
} = dashedLine;
} = line;
this.ctx.save();
this.ctx.setLineDash([]);
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.lineWidth = lineWidth;
this.ctx.strokeStyle = strokeStyle;
this.ctx.stroke();
this.ctx.closePath();
},
drowGap(gap) {
const { startx, starty, endx, endy } = gap;
this.ctx.save();
this.ctx.setLineDash([]);
drowRect(rect) {
const { startx, starty, width, height, strokeStyle } = rect;
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.strokeStyle = strokeStyle;
this.ctx.lineWidth = "1";
this.ctx.rect(startx, starty, width, height);
this.ctx.stroke();
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.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
);
this.ctx.fillStyle = fillStyle;
this.ctx.fillText(fillText, startx, starty, textInner.width);
},
submitForm() {
this.updateCanvas();
transformStake(stake) {
return Number(
stake.toLocaleLowerCase().replace("k", "").replace("+", "")
);
},
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)";
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);
},
getRandom(min, max) {
return Math.floor(Math.random() * (max - min)) === min
? min + 1
: Math.floor(Math.random() * (max - min)) + min;
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();
},
},
};
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论