精华内容
下载资源
问答
  • html 时间轴线

    2021-05-21 11:11:35
    纯手工制作时间轴,暂展示固定的时间 提示:以下是本篇文章正文内容,下面案例可供参考 一、使用的的外部库 jquery 二、代码 1.html 代码如下(示例): <!DOCTYPE html> <html...

    参考文章: https://blog.csdn.net/weixin_40687883/article/details/80388420

     


    前言

    纯手工制作时间轴,暂展示固定的时间


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、使用的的外部库

    jquery

    二、代码

    1.html

    代码如下(示例):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>制作时间线</title>
        <link rel="stylesheet" type="text/css" href="../css/createTimeLine.css"/>
        <script type="text/javascript" src="../../3dLib/jquery-3.4.1.js"></script>
        <script type="text/javascript" src="../js/createTimeLine.js"></script>
    </head>
    <body>
        <div class="nf-container-layout">
            <div class="track-rcol">
                <div class="track-list">
                    <ul>
                        <li class="first">
                            <i class="node-icon"></i>
                            <span class="time">2021</span>
                        </li>
                        <li>
                            <i class="node-icon"></i>
                            <span class="time">2020</span>
                        </li>
                        <li>
                            <i class="node-icon"></i>
                            <span class="time">2019</span>
                        </li>
                        <li>
                            <i class="node-icon"></i>
                            <span class="time">2018</span>
                        </li>
                        <li>
                            <i class="node-icon"></i>
                            <span class="time">2017</span>
                        </li>
                        <li>
                            <i class="node-icon"></i>
                            <span class="time">2016</span>
                        </li>
                        <li>
                            <i class="node-icon"></i>
                            <span class="time">2015</span>
                        </li>
                        <li>
                            <i class="node-icon"></i>
                            <span class="time">2014</span>
                        </li>
                        <li class="last">
                            <i class="node-icon"></i>
                            <span class="time">2013</span>
                        </li>
                    </ul>
                </div>
    
            </div>
    
        </div>
        
    </body>
    </html>

     

    2.css

    代码如下(示例):

    
    .nf-container-layout{
        float: left;
        margin-top: 15px;
        /* width: 100px; */
        
    }
    
    .track-rcol {
        /* width: 100%; */
        /* border: 1px solid #eee;
         */
         width: 100px;
    }
    
    .track-list {
        /* margin: 20px; */
        padding-left: 5px;
        position: relative;
    }
    
    .track-list li {
        list-style: none;/*去掉li 自带的伪元素 ::marker;*/
        position: relative;
        height: 80px;
        padding: 0px 0 0 25px;
        line-height: 18px;
        border-left: 1px solid #4a665a; /* 设置线的颜色*/
        color: #999;
    }
    
    
    .track-list li.first {
        /* color: red; */
        padding-top: 0;
        /* border-left-color: #fff; */
    }
    
    .track-list li.last {
        /* color: red; */
        padding-top: 0;
        border-left: none;
    }
    
    .track-list li .node-icon {
        position: absolute;
        left: -6px;
        /* top: 50%; */
        width: 10px;
        height: 10px;
        /* background: url(img/trank.png) -21px -72px no-repeat; */
        background: #b9ffe1;
        border-radius: 5px;
    }
    
    .track-list li .node-icon.selected {
        position: absolute;
        left: -10px;
        /* top: 50%; */
        width: 20px;
        height: 20px;
        background: #00fe92;
        border-radius: 10px;
    }
    
    .track-list li.first .node-icon {
        background-position: 0 -72px;
    }
    
    .track-list li .time {
        margin-right: 20px;
        position: relative;
        top: -5px;
        display: inline-block;
        vertical-align: middle;
        
    }
    
    .track-list li .time.selected {
        margin-right: 20px;
        position: relative;
        top: -5px;
        display: inline-block;
        vertical-align: middle;
        color: #00fe92;
    }
    
    .track-list li .txt {
        position: relative;
        top: 4px;
        display: inline-block;
        vertical-align: middle;
    }
    
    .track-list-selected-txt{
        color: #000000;
        width: 10px;
        padding: 3px;
    }
    
    .track-list li.first .time {
        margin-right: 20px;
    }
    
    .track-list li.first .txt {
        max-width: 600px;
    }

    3.js

    $(function(){
    
    
        //时间轴选中状态
        $(".track-list li").off("click").on("click", function(evt){
            var $target = evt.currentTarget;
            var currTxt = $target.innerText;
            var elemList = $target.parentElement.children;
            for(var i= 0; i< elemList.length; i++)
            {
                if(elemList[i].innerText == currTxt)
                {
                    $(elemList[i]).children("i").addClass("selected");
                    $(elemList[i]).children("i").empty();
                    $(elemList[i]).children("i").append("<span class='track-list-selected-txt'>V</span>");
                    $(elemList[i]).children("span").addClass("selected");
                }
                else
                {
                    $(elemList[i]).children("i").removeClass("selected");
                    $(elemList[i]).children("i").empty();
                    $(elemList[i]).children("span").removeClass("selected");
                }
            }
    
        });
    
    });

    4.效果

    未选中状态

    选中状态:

     

    展开全文
  • 蛇形时间轴线图绘制         本人在之前的项目中(vue项目),由于业务需求根据设计图自行利用css样式绘制了一个简单的时间轴线图,可自适应收缩并且左右来回循环,在某些...

    蛇形时间轴线图绘制

            本人在之前的项目中(vue项目),由于业务需求根据设计图自行利用css样式绘制了一个简单的时间轴线图,可自适应收缩并且左右来回循环,在某些方面可满足大部分的需求,并且添加了图例,特此分享。如有需要,大家可自行复制代码应用到自己的项目之中,并且根据自己的业务需求加以调整。

    1. 效果图展示

    在这里插入图片描述

    2、代码呈现(代码全部粘贴应用之后即可呈现除小汽车图片之外的上图效果)

    • HTML
    <template>
    	<div class="only-content">
            <!--图例显示-->
            <div class="legend-block">
                <div class="every-legend" v-for="item in cloneLegend" @click="clickLegend(item)" :style="item.statusName === '无计划' ? 'cursor: default;' : ''">
                    <span class="color-block" :style="'background:' + item.background"></span>
                    <span class="name-block">{{item.statusName}}</span>
                </div>
                <div class="clear"></div>
            </div>
            <!--时间轴线显示-->
            <div class="time-line">
                <div class="every-block" v-for="(item,index) in cloneTimeDatas"
                     :style="item.type === 0 ? 'float: left;' + 'width:' + item.width + '%;' : item.type === 1 ? 'float: right;' + 'width:' + item.width : item.type === 2 ? 'float: right;' + 'width:' + item.width + '%;' : 'float: left;' + 'width:' + item.width + '%;'" style="height: 100px;">
                    <div class="identical to-right" v-if="item.type === 0">
                        <!--分类名称-->
                        <div class="class-name" :style="item.status === 2 ? 'color: #6078AB;' : 'color: #000;'">
                            <span :title="item.className">{{item.className}}</span>
                        </div>
                        <!--进行中小车图标-->
                        <span class="small-car" v-if="item.status === 2">
                                <img src="/static/images/carPlan1.png" alt="">
                            </span>
                        <!--时间线-->
                        <div class="class-line" :style="item.className !== null && item.className !== '' ? 'background:' + item.background : 'background:' + item.background + ';cursor: default;'"></div>
                        <!--开始时间-->
                        <span class="start-time" v-if="index === 0">{{item.startTime}}</span>
                        <!--结束时间-->
                        <span class="end-time" v-if="!(cloneTimeDatas[index+1] && cloneTimeDatas[index+1].type === 1)">
                                <span v-if="cloneTimeDatas.length == (index + 1)">{{item.endTime}}</span>
                                <span v-else>{{item.nextTime}}</span>
                            </span>
                        <!--结束箭头-->
                        <div class="end-arrow" v-if="cloneTimeDatas.length === (index + 1)" :style="'border-color: transparent transparent transparent' + item.background"></div>
                        <!--方向箭头-->
                        <div class="small-arrow-left" v-if="cloneTimeDatas.length !== (index + 1)"></div>
                        <div class="small-arrow-right" v-if="cloneTimeDatas.length !== (index + 1)"></div>
                    </div>
                    <!--右回转空心半圆环-->
                    <div class="right-box"  v-if="item.type === 1">
                        <div class="big-circular" :style="item.className !== null && item.className !== '' ? 'background:' + item.background : 'background:' + item.background + ';cursor: default;'">
                            <div class="small-circular"></div>
                            <!--结束时间-->
                            <span class="end-time" v-if="cloneTimeDatas.length == (index + 1)">{{item.endTime}}</span>
                            <span class="end-time" v-else>{{item.nextTime}}</span>
                        </div>
                        <!--结束箭头-->
                        <div class="end-arrow" v-if="cloneTimeDatas.length === (index + 1)" :style="'border-color: transparent' + ' ' + item.background + ' ' + 'transparent transparent'"></div>
                    </div>
                    <div class="identical to-left" v-if="item.type === 2">
                        <!--分类名称-->
                        <div class="class-name" :style="item.status === 2 ? 'color: #6078AB;' : 'color: #000;'">
                            <span :title="item.className">{{item.className}}</span>
                        </div>
                        <!--进行中小车图标-->
                        <span class="small-car" v-if="item.status === 2">
                                <img src="/static/images/carPlan.png" alt="">
                            </span>
                        <!--时间线-->
                        <div class="class-line" :style="item.className !== null && item.className !== '' ? 'background:' + item.background : 'background:' + item.background + ';cursor: default;'"></div>
                        <!--开始时间-->
                        <span class="start-time" v-if="index === 0">{{item.startTime}}</span>
                        <!--结束时间-->
                        <span class="end-time" v-if="!(cloneTimeDatas[index+1] && cloneTimeDatas[index+1].type === 3)">
                                <span v-if="cloneTimeDatas.length == (index + 1)">{{item.endTime}}</span>
                                <span v-else>{{item.nextTime}}</span>
                            </span>
                        <!--结束箭头-->
                        <div class="end-arrow" v-if="cloneTimeDatas.length === (index + 1)" :style="'border-color: transparent' + ' ' + item.background + ' ' + 'transparent transparent'"></div>
                        <!--反向箭头-->
                        <div class="small-arrow-left" v-if="cloneTimeDatas.length !== (index + 1)"></div>
                        <div class="small-arrow-right" v-if="cloneTimeDatas.length !== (index + 1)"></div>
                    </div>
                    <!--左回转空心半圆环-->
                    <div class="left-box" v-if="item.type === 3">
                        <div class="big-circular" :style="item.className !== null && item.className !== '' ? 'background:' + item.background : 'background:' + item.background + ';cursor: default;'">
                            <div class="small-circular"></div>
                            <!--结束时间-->
                            <span class="end-time" v-if="cloneTimeDatas.length == (index + 1)">{{item.endTime}}</span>
                            <span class="end-time" v-else>{{item.nextTime}}</span>
                        </div>
                        <!--结束箭头-->
                        <div class="end-arrow" v-if="cloneTimeDatas.length === (index + 1)" :style="'border-color: transparent transparent transparent' + item.background"></div>
                    </div>
                </div>
                <div class="clear"></div>
            </div>
        </div>
    </template>
    
    • 定义参数
    data() {
       return {
            // 所有分类节点数据
            allTimeListDatas: [],
            // 深克隆后的数据
            cloneTimeDatas: [],
            // 所有计划目前状态集合
            planLegend: [
                {"statusName": "已完成","background": "#4ECB74","status": 3,"bool": true,},
                {"statusName": "进行中","background": "#F6AF80","status": 2,"bool": true,},
                {"statusName": "未开始","background": "#A8C7FC","status": 1,"bool": true,},
                {"statusName": "无计划","background": "#E4E4E4","status": 0,"bool": false,},
            ],
            // 深克隆后的图例数据
            cloneLegend: [],
        }
    },
    
    • JS
      注:克隆数据是为了操作数据后不影响原数据
    methods: {
      // 点击图例显示隐藏
      clickLegend(item){
          item.bool = !item.bool;
          if (item.statusName !== '无计划') {
              this.cloneTimeDatas.forEach( value => {
                  if (value.status === item.status) {
                      if (item.bool) {
                          this.planLegend.forEach( cloneItem => {
                              if (cloneItem.status === item.status) {
                                  value.background = cloneItem.background;
                                  item.background = cloneItem.background;
                              }
                          });
                      } else {
                          value.background = '#E4E4E4';
                          item.background = '#E4E4E4';
                      }
                  }
              })
          }
      },
      // 获取计划分类数据
      getPlanClassData(){
          //调取接口————————可根据自己的业务需求在此调接口获取展示数据
          let data = [
              {className: "单车计划",status: 1,day: 60,startTime: "2019-01-01",endTime: "2019-01-31",nextTime: "2019-02-01",},
              {className: "整车计划",status: 2,day: 120,startTime: "2019-02-01",endTime: "2019-03-31",nextTime: "2019-04-01",},
              {className: "修复计划",status: 3,day: 120,startTime: "2019-04-01",endTime: "2019-05-31",nextTime: "2019-06-01",},
              {className: "空闲",status: 0,day: 60,startTime: "2019-06-01",endTime: "2019-06-30",nextTime: "2019-07-01",},
              {className: "拆解计划",status: 2,day: 150,startTime: "2019-07-01",endTime: "2019-09-30",nextTime: "2019-10-01",},
              {className: "组装计划",status: 3,day: 180,startTime: "2019-10-01",endTime: "2019-12-31",nextTime: "2020-01-01",},
              {className: "检测计划",status: 2,day: 100,startTime: "2020-01-01",endTime: "2020-06-30",nextTime: "2020-07-01",},
              {className: "保养计划",status: 3,day: 100,startTime: "2020-07-01",endTime: "2020-12-31",nextTime: "2020-12-31",},
          ];
          let allPlanClass = $.extend(true,[],data); // 所有的计划分类数据
          let typeIndex = 0; //类型标记
          let addLength = 0;  // 计划分类赋值前叠加的总长度
          let otherLength = 0; // 计划分类赋值后叠加的总长度
          let moreThanPlan = []; // 每行结尾多于出的计划分类集合
          allPlanClass.forEach( (value,index) => {
              // 根据计划分类状态值显示不同的颜色条(1—未开始;2—进行中;3—已完成;0—无计划)
              if (value.status === 1) {
                  value.background = '#A8C7FC';
              } else if (value.status === 2) {
                  value.background = '#F6AF80';
              } else if (value.status === 3) {
                  value.background = '#4ECB74';
              } else if (value.status === 0) {
                  value.background = '#E4E4E4';
              }
              let moreThan = {}; // 每行结尾多于出的计划分类
              // 根据计划周期(天数)计算显示长度(最短为10%)
              // 计算每一段计划分类的长度
              let thisWidth = 0;
              if (value.day < 30) {  // width的数字代表百分比
                  thisWidth = 10;
              } else if (value.day%30 < 15) {
                  thisWidth = parseInt(value.day/30) * 10
              } else if (value.day%30 >= 15) {
                  thisWidth = (parseInt(value.day/30) + 1) * 10
              }
              // 叠加每个计划分类的长度
              addLength = addLength + thisWidth;
              if (value.day == 375) {
                  console.log(addLength,otherLength,typeIndex,thisWidth,"时间呢?????");
              }
              // 根据总的长度来判断是否大于100%
              if (addLength < 100) {
                  value.width = thisWidth;  // 每段计划分类的长度
                  value.type = typeIndex; // 每段计划分类的类型(1—从左往右;2—右半圆弧;3—从右往左;4—左半圆弧)
                  otherLength = otherLength + value.width;
              } else {
                  value.width = 100 - otherLength;
                  value.type = typeIndex;
                  typeIndex++;
                  // 处理每行结尾多于出长度的计划分类
                  moreThan = $.extend(true,{},value);
                  moreThan.width = 0;
                  moreThan.type = typeIndex;
                  moreThanPlan.push(moreThan);
                  typeIndex++;
                  if (typeIndex === 4) {
                      typeIndex = 0;
                  }
                  addLength = 0;
                  otherLength = 0;
              }
          });
          // 处理后的计划分类数据集合
          this.allTimeListDatas = this.sorts(allPlanClass,moreThanPlan);
          // 深克隆计划分类数据
          this.cloneTimeDatas = $.extend(true,[],this.allTimeListDatas);
          // 深克隆图例(计划状态)数据
          this.cloneLegend = $.extend(true,[],this.planLegend);
          if (this.cloneTimeDatas.length > 0 && (this.cloneTimeDatas[this.cloneTimeDatas.length - 1].type === 1 || this.cloneTimeDatas[this.cloneTimeDatas.length - 1].type === 3)) {
              $('.only-content').attr('style',"padding-bottom: 50px;")
          } else {
              $('.only-content').removeAttr('style',"padding-bottom")
          }
      },
      // 循环排序(将每行多于长度的计划分类插入原数组)
      sorts(initArr,insertArr){
          let arr = initArr.concat();    //拷贝数组
          initArr.forEach((value,index) => {
              insertArr.forEach((val,ind) => {
                  if(value.startTime == val.startTime){   //判断值相同  插入
                      let idx =[];
                      arr.forEach((data,tt) => {
                          if(data.startTime == val.startTime){
                              idx.push(tt);   // 获取所有相同值得下标数组
                          }
                      });
                      arr.splice(idx[idx.length-1] + 1,0,val);    //取最后相同值插入数据
                  }
              })
          });
          return arr
      },
    },
    created () {
      this.getPlanClassData();
    },
    
    • CSS
    <style scoped lang="less">
    	.only-content{
    		width: 100%;
    		height: 100%;
    		font-size: 12px;
            background-color: #fff;
            .clear{
                clear: both;
            }
            /*图例样式*/
            .legend-block{
                padding: 15px 20px 0 20px;
                .every-legend{
                    float: left;
                    margin-right: 30px;
                    cursor: pointer;
                    user-select: none;
                    span{
                        display: inline-block;
                    }
                    .color-block{
                        width: 23px;
                        height: 11px;
                    }
                }
    
            }
            /*计划分类蛇形道样式*/
            .time-line{
                padding: 20px 100px;
                .every-block{
                    position: relative;
                    cursor: default;
                    .identical{
                        position: relative;
                    }
                    // 从左向右的方向直线样式
                    .to-right{
                        position: relative;
                        /*分类名称样式*/
                        .class-name{
                            width: 100%;
                            height: 20px;
                            text-align: center;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            span{
                                cursor: pointer;
                            }
                        }
                        // 小车样式
                        .small-car{
                            position: absolute;
                            top: -18px;
                            left: calc(50% - 20px);
                            z-index: 200;
                        }
                        /*分类颜色线样式*/
                        .class-line{
                            width: 100%;
                            height: 18px;
                            border-right: 1px solid #ccc;
                            cursor: pointer;
                        }
                        /*开始时间*/
                        .start-time{
                            z-index: 200;
                            position: absolute;
                            bottom: -24px;
                            left: -32px;
                            color: #000;
                        }
                        /*结束时间*/
                        .end-time{
                            z-index: 200;
                            position: absolute;
                            bottom: -24px;
                            right: -30px;
                            color: #000;
                        }
                        /*结束箭头样式*/
                        .end-arrow{
                            position: absolute;
                            bottom: -9px;
                            right: -36px;
                            width: 0;
                            height: 0;
                            border: 18px solid;
                        }
                        /*方向箭头样式*/
                        .small-arrow-left{
                            z-index: 20;
                            position: absolute;
                            bottom: 7px;
                            right: 0;
                            float: left;
                            width: 8px;
                            height: 4px;
                            background-color: #fff;
                        }
                        .small-arrow-right{
                            z-index: 20;
                            position: absolute;
                            bottom: 3px;
                            right: -12px;
                            float: left;
                            width: 0;
                            height: 0;
                            border: 6px solid;
                            border-color: transparent transparent transparent #fff;
                        }
                    }
                    // 从右向左的方向直线样式
                    .to-left{
                        position: relative;
                        /*分类名称样式*/
                        .class-name{
                            width: 100%;
                            height: 20px;
                            text-align: center;
                        }
                        // 小车样式
                        .small-car{
                            position: absolute;
                            top: -18px;
                            left: calc(50% - 20px);
                            z-index: 200;
                        }
                        /*分类颜色线样式*/
                        .class-line{
                            height: 18px;
                            border-right: 1px solid #ccc;
                            position: relative;
                            cursor: pointer;
                        }
                        /*开始时间*/
                        .start-time{
                            z-index: 200;
                            position: absolute;
                            bottom: -24px;
                            right: -32px;
                            color: #000;
                        }
                        /*结束时间*/
                        .end-time{
                            z-index: 200;
                            position: absolute;
                            bottom: -24px;
                            left: -30px;
                            color: #000;
                        }
                        /*结束箭头样式*/
                        .end-arrow{
                            position: absolute;
                            bottom: -9px;
                            left: -36px;
                            width: 0;
                            height: 0;
                            border: 18px solid;
                        }
                        /*方向箭头样式*/
                        .small-arrow-left{
                            z-index: 20;
                            position: absolute;
                            bottom: 7px;
                            left: 0;
                            float: left;
                            width: 8px;
                            height: 4px;
                            background-color: #fff;
                        }
                        .small-arrow-right{
                            z-index: 20;
                            position: absolute;
                            bottom: 3px;
                            left: -12px;
                            float: left;
                            width: 0;
                            height: 0;
                            border: 6px solid;
                            border-color: transparent #fff transparent transparent ;
                        }
                    }
                    // 左空心半圆样式
                    .left-box{
                        position: relative;
                        top: 20px;
                        left: -60px;
                        .big-circular {
                            float: left;
                            width: 60px;
                            height: 118px;
                            cursor: pointer;
                            -webkit-border-radius: 118px 0 0 118px;
                            position: relative;
                            .small-circular {
                                width: 42px;
                                height: 82px;
                                background-color: #fff;
                                -webkit-border-radius: 82px 0 0 82px;
                                position: absolute;
                                left: 18px;
                                top: 18px;
                            }
                            /*结束时间*/
                            .end-time{
                                z-index: 200;
                                position: absolute;
                                bottom: -24px;
                                left: 30px;
                                white-space: nowrap;
                                color: #000;
                            }
                        }
                        /*结束箭头样式*/
                        .end-arrow{
                            position: absolute;
                            bottom: -128px;
                            right: -96px;
                            width: 0;
                            height: 0;
                            border: 18px solid;
                        }
                    }
                    // 右空心半圆样式
                    .right-box{
                        position: relative;
                        top: 20px;
                        right: -60px;
                        .big-circular {
                            float: right;
                            width: 60px;
                            height: 118px;
                            cursor: pointer;
                            -webkit-border-radius: 0 118px 118px 0;
                            position: relative;
                            .small-circular {
                                width: 42px;
                                height: 82px;
                                background-color: #fff;
                                -webkit-border-radius: 0 82px 82px 0;
                                position: absolute;
                                left: 0;
                                top: 18px;
                            }
                            /*结束时间*/
                            .end-time{
                                z-index: 200;
                                position: absolute;
                                bottom: -24px;
                                left: -30px;
                                white-space: nowrap;
                                color: #000;
                            }
                        }
                        /*结束箭头样式*/
                        .end-arrow{
                            position: absolute;
                            bottom: -128px;
                            left: -96px;
                            width: 0;
                            height: 0;
                            border: 18px solid;
                        }
                    }
                }
            }
        }
    </style>
    
    展开全文
  • 一、TimeLine时间轴线 勾选“User Last Keyframe”表示使用时间轴最后一个关键帧所在时间点作为结束时间,而不是使用设置的5秒作为结束时间点。 二、Lerp插值 Lerp插值一般与Timeline时间轴一起使用,Alpha...

     

    一、TimeLine时间轴线

    勾选“User Last Keyframe”表示使用时间轴最后一个关键帧所在时间点作为结束时间,而不是使用设置的5秒作为结束时间点。

    二、Lerp插值

    Lerp插值一般与Timeline时间轴一起使用,Alpha取值范围是浮点数0到1,当Alpha为0的时候返回的数值为A设置的值,当Alpha为1的时候,返回的数值为B设置的值。Alpha越靠近0返回值就越靠近A设置的值,Alpha越靠近1返回值就越靠近B设置的值。

     注意:在User Widget中是无法使用Time Line时间轴的,可以把要设置变化UI封装成一个函数由一般蓝图来使用Time Line调用。

    三、有多种类型的Lerp插值函数供使用

    四、Time Line时间轴是可以倒着播放的,可以利用这个特性来解决状态恢复。Direction是一个枚举变量,表示播放的方向。

      

     五、凡是右上角带有时钟图标的函数都不能在自定义函数中使用,只能在关卡蓝图中使用。

     

    转载于:https://www.cnblogs.com/timy/p/9848378.html

    展开全文
  • //轴线距离左侧的距离,单位pix。 private int marginLeft = 20; //轴线的宽度,单位pix。 private int lineSize = 10; private Paint mPaint; public RVItemDecoration(Context context) { mPaint = new ...
    package zhangphil.book;
    
    import android.content.Context;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Rect;
    import android.graphics.drawable.ColorDrawable;
    import android.graphics.drawable.Drawable;
    import android.os.Bundle;
    import android.support.annotation.NonNull;
    import android.support.v4.content.ContextCompat;
    import android.support.v7.app.AppCompatActivity;
    import android.support.v7.widget.LinearLayoutManager;
    import android.support.v7.widget.RecyclerView;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.TextView;
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            RecyclerView mRecyclerView = findViewById(R.id.recycler_view);
    
            LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getApplicationContext());
            linearLayoutManager.setOrientation(LinearLayoutManager.VERTICAL);
            mRecyclerView.setLayoutManager(linearLayoutManager);
    
            RecyclerViewAdapter adapter = new RecyclerViewAdapter();
            mRecyclerView.setAdapter(adapter);
    
            RVItemDecoration mRVItemDecoration = new RVItemDecoration(getApplicationContext());
            mRecyclerView.addItemDecoration(mRVItemDecoration);
        }
    
        private class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewHolder> {
            @NonNull
            @Override
            public RecyclerViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
                View view = LayoutInflater.from(getApplicationContext()).inflate(android.R.layout.simple_list_item_1, parent, false);
                RecyclerViewHolder holder = new RecyclerViewHolder(view);
                return holder;
            }
    
            @Override
            public void onBindViewHolder(@NonNull RecyclerViewHolder holder, int position) {
                holder.text1.setText(position + "");
            }
    
            @Override
            public int getItemCount() {
                return 10;
            }
        }
    
        private class RecyclerViewHolder extends RecyclerView.ViewHolder {
            public TextView text1;
    
            public RecyclerViewHolder(View itemView) {
                super(itemView);
                text1 = itemView.findViewById(android.R.id.text1);
            }
        }
    
        private class RVItemDecoration extends RecyclerView.ItemDecoration {
            private Drawable mDrawable;
    
            //轴线距离左侧的距离,单位pix。
            private int marginLeft = 20;
    
            //轴线的宽度,单位pix。
            private int lineSize = 10;
    
            private Paint mPaint;
    
            public RVItemDecoration(Context context) {
                mPaint = new Paint();
                mPaint.setAntiAlias(true);
                mPaint.setColor(Color.RED);
    
                mDrawable = new ColorDrawable(ContextCompat.getColor(getApplicationContext(), android.R.color.holo_blue_light));
            }
    
            @Override
            public void onDraw(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
                canvas.save();
    
                int childCount = parent.getChildCount();
                for (int i = 0; i < childCount; i++) {
                    View child = parent.getChildAt(i);
    
                    int pos = parent.getChildAdapterPosition(child);
                    if (pos == 0) {
                        //画一半长度的线。上半部缺失。
                        mDrawable.setBounds(marginLeft, (child.getTop() + child.getBottom()) / 2, marginLeft + lineSize, child.getBottom());
                        mDrawable.draw(canvas);
                    } else if (pos == parent.getAdapter().getItemCount() - 1) {
                        //画一半长度的线。下半部缺失。
                        mDrawable.setBounds(marginLeft, child.getTop(), marginLeft + lineSize, (child.getTop() + child.getBottom()) / 2);
                        mDrawable.draw(canvas);
                    } else {
                        //画普通的线。
                        mDrawable.setBounds(marginLeft, child.getTop(), marginLeft + lineSize, child.getBottom());
                        mDrawable.draw(canvas);
                    }
    
                    //后画覆盖在线上的圆球。
                    canvas.drawCircle(marginLeft + lineSize / 2, (child.getTop() + child.getBottom()) / 2, (lineSize + marginLeft) / 2, mPaint);
                }
    
                canvas.restore();
            }
    
            /**
             * outRect.set()函数相当于给RecyclerView的每一个item的View四周设置margin值。
             * 此处的margin值不同于onDraw里面的margin,onDraw里面给mDrawable设置的margin,仅仅是针对分割条而言。
             *
             * @param outRect
             * @param view
             * @param parent
             * @param state
             */
            @Override
            public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
                outRect.set((marginLeft + lineSize) * 2, 0, 0, 0);
    
                //测试。给RecyclerView的每一个item设置一个浅灰色背景。
                //便于观察绘制结果。
                view.setBackgroundColor(Color.LTGRAY);
            }
        }
    }

    so:

    展开全文
  • # coding=utf-8 from pyecharts import Pie,Timeline import random attr = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"...
  • 前面通过七篇文章基本构建了电影知识图谱,并且能显示选中节点相关联的边及属性,本文主要采用HTML和D3绘制时间轴线及显示实体名称。为了加深自己对知识图谱构建的认识,后续创建贵州旅游知识图谱打下基础,作者...
  • 之前所有的例子中,我们所生成图表中的X时间轴中的时间间隔,和Y轴中的数值样式是不可控制的,它是JFreechart根据数据点的对应的时间和数值自己设置的。如果我们就想让X轴中标签每隔一年或每隔3个月、Y轴中标签...
  • 一、问题 ...后期,改两条线合并一条。 网上找一个没有关于splitLine的设置,查找ECharts,发现一种方法:通过yAxis.axisLine轴线,及yAxis.max、yAxis.interval、yAxis.splitNumber手动控制...
  • lda时间过度算法

    2019-01-31 19:01:25
    基于python的时间过度算法模型,以时间为轴线,用lda底层对数据集进行主题分析
  • 如上图所示的条形图,配置y轴方向的grid分割线的时候,耗费了很多时间,结果,被一句show:true打败了~~~~ 官方文档如图: 此例option代码: option = { grid: { left: 0, //距离外层box的上下左右边距 right: '...
  • 管理以时间为轴线。多长时间完成多少任务,是管理者需要管理的内容。 从时间上将,一天8个小时,一周5天,一年54个周,共 8*5*54=2160 除去看病和带薪年假,一年能有多少个工作时间呢?2014年例,其中由周末...
  • 为了获得沿轴线冻结的斜井冻结温度场分布规律,采用一定几何缩比的物理模拟试验对斜井冻结温度场发展规律做了较全面系统的研究。通过在模型中布置热电偶,监测出直墙拱斜井拱部、侧墙、底板处的冻结温度场随冻结时间的...
  • 如果你关注近期发布的Android旗舰手机,不难发现新品大都开始主打一项名“横向线性马达”或“X轴线性马达”的设计。同时,微博上也曾展开过一轮“嗡嗡嗡”对“哒哒哒”的论战,为何马达的振动方式和效果会有...
  • 轴线设置② 浮动设置③ 多图表设置 1. 轴线标签设置 设置字符串 import numpy as np import pandas as pd import matplotlib.pyplot as plt % matplotlib inline import warnings warnings....
  • 同类型的内容太多,不知道怎么排版?活动会议的流程步骤不知道该怎么排列?历史事件整合不知道怎样...轴线样式在资源整合、内容串联、步骤整理这些方面有非常明显的优势,它可以在不影响版面美观的情况下让用户对内...
  • setLabelFormat(self, format):设置坐标轴创建标签时使用的格式字符串。 setMax(self, max):设置坐标轴的最大值。 setMin(self, min):设置坐标轴的最小值。 setRange(self, min, max):设置坐标轴值的范围。 ...
  • 近段时间以来,一款名联想拯救者电竞手机的产品频繁得到爆料,这也是今年来联想为数不多得到曝光手机。经过了相当长一段时间的预热,该机不久前正式得到了官宣,官方表示这款全新的拯救者电竞手机将...
  • /**轴线上圆点位置纵坐标,见图片line-point.png*/ function getLinePointY(i) { var length = colors.length; var y = 0; if (i ) { y = -i * 20; } else { y = -(i % length) * 20; } return y + "px"; }; /**第...
  • 注意:下面机械键盘轴的差别公认说法,但实际因个人习惯不同,使用起来感受也不一。 比方黑轴被觉得是游戏首选机械键盘轴,可是有人喜欢拿来打字。 黑轴:游戏首选 黑轴——cherry的夏天 玩游戏?选黑轴...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,877
精华内容 2,750
关键字:

以时间为轴线