当前位置：首页 > news >正文

vue canvas绘制信令图二、

news 来源：原创 2024/9/28 17:34:26

需求：根据信令图标题的每2个区域之间有无内容来给宽度，无内容区域的间隔要小一些。有内容区域的间隔大一些。

先上效果图：

从上面的效果图可以看出无内容区域的间隔宽度变小了很多。

1、先设置一个最先间隔的宽度：minGapX: 200,

2、然后设置一个存放有计算后的间隔数据： titleAttrArr: []

3、测算出坐标点离最左边的距离

this.titleAttrArr = []
let offsetLeft = 0

4、标题title没有向右数据, 还得判断它的下一级有没有向左数据

let index = this.resultData.findIndex((item) => item.startDataDir == v && item.dataDirStr === "上行");

if (index === -1) {// title没有向右数据, 还得判断他的下一级有没有向左数据let index2 = this.resultData.findIndex((item) =>item.startDataDir == this.showTitleArr[i + 1] && item.dataDirStr === "下行");if (index2 === -1) {trueGap = this.minGapX;} else {trueGap = this.gapX;}} else {// 有向右数据说明是正常gaptrueGap = this.gapX;}

5、画虚线和标题以及对应方法里面的调整

 this.paintText(context, v, i, offsetLeft);this.drawDashed(context, i, offsetLeft);

6、画箭头的处理

        let kOffsetLeft = 0,jOffsetLeft = 0;this.titleAttrArr.map((item) => {if (v.startDataDir === item.titleName) {kOffsetLeft = item.offsetLeft;}if (v.endDataDir === item.titleName) {jOffsetLeft = item.offsetLeft;}});// 箭头this.paintArr(v,[kOffsetLeft + this.paddingLeft, height],[jOffsetLeft + this.paddingLeft, height],kOffsetLeft < jOffsetLeft ? "right" : "left",context);

7、全部代码如下：

<template><vxe-modal v-model="sigModal" :title="titles" ref="vxeModal2" :width="modalWidth > 1200 ? modalWidth : 1200" min-width="1200" :height="dialogHeight" :position="{ top: '3vh'}" @close="closeEvent" resize destroy-on-close><div ref="screen" class="canvasContain"><canvas id="myCanvas">你的浏览器还不支持canvas</canvas></div><!-- 倒计时提示 message --><div id="message-container" v-if="showMess"><div class="message move-in"><span class="icon icon-success"> </span><div class="text"> 信令图上传成功，<span style="font-weight: bold;">{{ `${ this.count } ` }}</span>  秒后自动关闭 </div><div class="close"><el-button type="text" @click="closeMessage">取消</el-button></div></div></div></vxe-modal>
</template><script>
import html2canvas from 'html2canvas'
import { DownLoadFromTime } from '@/utils/times.js'
import { get_signallInfo } from '@/api/c3/offlineImportant.js'
import axios from 'axios'
export default {data() {return {showMess: false,count: 3,timer: null,uploadId: '',			titles: '生成信令图',dialogWidth: '90%',dialogHeight: '92%',sigModal: false,// 'ATP'-----'MT'------------ 'BTS'-------'BSC'----'MSC'------ 'RBC'//   Igsmr-R   Um_AMS/Um_BMS      Abis           A      PRIresultTitle: [], // 后台返回的随机顺序titleresultTitleTypeArr: ['ATP', 'MT', 'BTS', 'BSC', 'MSC', 'RBC'],showTitleArr: []