主要实现一下效果
绘制上图中的线路方法
1.绘制整条线路需要确定各个点的坐标
1.各个线路端点的坐标又是有整个屏幕的宽高和几个part决定
可以通过window.width|height来获取宽高,这个线路图一共分为八f份,
根据三个数字来确定各个点的坐标
首先将两个坐标分为左边arr和右边arr1,
循环这个part
左边的:x轴坐标是一样的,y轴坐标是递增的
arr.push([1 / this.part * this.width, (i + 1) / this.part * this.height]);`
左边的点坐标的x轴是空了1 / this.part 宽度,y轴递增高度
右边的点坐标同理,x坐标是part-右边的*宽度,y轴递增
arr1.push([(this.part - 1) / this.part * this.width, (i + 1) / this.part * this.height])
最后再将左边的坐标揉进右边的坐标
根据一下规律
循环右边的坐标得到一个规律,左边的坐标是需要插入两个坐标,2二这两个坐标又是连续的:
var item = arr1[i * 2];
var itemnext = arr1[i * 2 + 1];
最后再将追加进去,得到所有坐标点
绘制上图中的元素
首先我们需要定一个初始变量oneLineShowNam,就是我们需要一行中展示几个元素,
通过整个的宽度除以这个(初始变量+1)为什么加一是因为前后有空格,计算出来的结果就是两两原属之间的宽度:xstep
然后得到一个多维数组,options.data就是在页面中需要展示的数据,slice是截取,为什么要截取是为了更好的区分行数
for (let i = 0; i < options.data.length; i += options.oneLineShowNam) {
_data.push(options.data.slice(i, i + options.oneLineShowNam))//得到元素展示需要几行,得到一个数组中里面包含几个数组,几个就是行数,数组里面就是一行需要展示的元素
}
最后再通过循环为每个坐标添加图像