分段显示一天的报警进度条javascript
点击报警区域弹出报警的开始时间与结束时间java
显示区域的数据格式(如下伪代码,就是个说明):git
List<String> list,{2020-09-01 00:00:00,2020-09-01 02:00:00}
list[0]=2020-09-01 00:00:00; //开始时间
list[1]=2020-09-01 02:00:00; //结束
复制代码
每秒像素点px是多少 = 测量到的自定义组件长度 / 24 x 60 x 60github
须要一个起始长度,也就是天天零点的时间戳是多少,参数:mStartSection算法
绘制算法:每个报警显示的分段都有开始的时间与结束的时间,经过开始与结束的时间戳与天天零点的时间戳相减既可得出每个报警分段:canvas
int startSection = (int) ((timeShaftItem.getStartSection() - mStartSection) / mConvertUnit);
int endSection = (int) ((timeShaftItem.getEndSection() - mStartSection) / mConvertUnit);
复制代码
mConvertUnit是转换单位,这里是1000毫秒,即1秒。最后经过startSection与endSection计算每一个分段要显示的报警区域的x坐标:缓存
int startX = (int) (startSection * mPixelsPer);
int endX = (int) (endSection * mPixelsPer);
复制代码
最后经过画笔cavas绘制出,咱们须要的区块:markdown
canvas.drawRect(startX, 0, endX, getHeight(), mRegionPaint);
复制代码
点击区域的算法要怎么搞呢,聪明的同窗应该想到了吧,哈哈~oop
不扯了,算法以下:spa
ShaftRegionItem timeShaftItem = mShaftItems.get(i);
int startSection = (int) ((timeShaftItem.getStartSection() - mStartSection) / mConvertUnit);
int endSection = (int) ((timeShaftItem.getEndSection() - mStartSection) / mConvertUnit);
int startX = (int) (startSection * mPixelsPer);
int endX = (int) (endSection * mPixelsPer);
//存下坐标,给点击判断用;
timeShaftItem.setStartX(startSection * mPixelsPer);
timeShaftItem.setEndX(endSection * mPixelsPer);
mShaftItems.set(i, timeShaftItem);
复制代码
for (ShaftRegionItem item : mShaftItems) {
if (x >= item.getStartX() && x <= item.getEndX()) {
Log.e(TAG, "ACTION_UP + " + item.toString());
if (clickSectionListener != null) {
clickSectionListener.clickBar(item, viewY);
}
break;
}
}
复制代码
public boolean onTouchEvent(MotionEvent event) {
int actionType = event.getActionMasked();
switch (actionType) {
case MotionEvent.ACTION_UP:
clickBar(event.getX(), getBottom());
break;
}
return true;
}
复制代码
看到了没哟,是否是很简单,没啥难度,就是看到你在点击的时候,判断你点击的x轴坐标是否在咱们缓存好的每一个显示区域开始与结束的X坐标区间内,是的话就弹咯~
其实里面还有个问题是弹出框的定位与显示问题,没找到合适的弹出方式,就先这样了~