├── README.md
├── src
    ├── pages
    │   ├── counter
    │   │   ├── main.js
    │   │   ├── store.js
    │   │   └── index.vue
    │   ├── index
    │   │   ├── main.js
    │   │   └── index.vue
    │   └── logs
    │   │   ├── main.js
    │   │   └── index.vue
    ├── components
    │   ├── itemList.vue
    │   ├── card.vue
    │   ├── timeLine.vue
    │   └── canvasBg.vue
    ├── main.js
    ├── App.vue
    └── utils
    │   └── index.js
├── package.json
└── LICENSE


/README.md:
--------------------------------------------------------------------------------
1 | # mpvue-component
2 | mpvue 的组件
3 | - timeLine时间轴组件
4 | 


--------------------------------------------------------------------------------
/src/pages/counter/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './index'
3 | 
4 | const app = new Vue(App)
5 | app.$mount()
6 | 


--------------------------------------------------------------------------------
/src/pages/index/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './index'
3 | 
4 | const app = new Vue(App)
5 | app.$mount()
6 | 


--------------------------------------------------------------------------------
/src/pages/logs/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './index'
 3 | 
 4 | const app = new Vue(App)
 5 | app.$mount()
 6 | 
 7 | export default {
 8 |   config: {
 9 |     navigationBarTitleText: '查看启动日志'
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/components/itemList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul>
 4 |       {{msg}}
 5 |       <li>
 6 |         <slot />
 7 |       </li>
 8 |     </ul>
 9 |   </div>
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   data(){
15 |     return {
16 |       msg: 'nihao'
17 |     }
18 |   },
19 |   props: ['text']
20 | }
21 | </script>
22 | 
23 | <style>
24 | .card {
25 |   padding: 10px;
26 | }
27 | </style>
28 | 


--------------------------------------------------------------------------------
/src/components/card.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p class="card">
 4 |       {{text}}-{{msg}}
 5 |         <p><slot />
 6 |           </p>
 7 |     </p>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   data(){
14 |     return {
15 |       msg: 'nihao'
16 |     }
17 |   },
18 |   props: ['text']
19 | }
20 | </script>
21 | 
22 | <style>
23 | .card {
24 |   padding: 10px;
25 | }
26 | </style>
27 | 


--------------------------------------------------------------------------------
/src/pages/counter/store.js:
--------------------------------------------------------------------------------
 1 | // https://vuex.vuejs.org/zh-cn/intro.html
 2 | // make sure to call Vue.use(Vuex) if using a module system
 3 | import Vue from 'vue'
 4 | import Vuex from 'vuex'
 5 | 
 6 | Vue.use(Vuex)
 7 | 
 8 | const store = new Vuex.Store({
 9 |   state: {
10 |     count: 0
11 |   },
12 |   mutations: {
13 |     increment: (state) => {
14 |       const obj = state
15 |       obj.count += 1
16 |     },
17 |     decrement: (state) => {
18 |       const obj = state
19 |       obj.count -= 1
20 |     }
21 |   }
22 | })
23 | 
24 | export default store
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mpvue-component",
 3 |   "version": "1.0.0",
 4 |   "description": "mpvue,component",
 5 |   "main": "main.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://github.com/calamus0427/mpvue-component.git"
12 |   },
13 |   "author": "calamus0427",
14 |   "license": "MIT",
15 |   "bugs": {
16 |     "url": "https://github.com/calamus0427/mpvue-component/issues"
17 |   },
18 |   "homepage": "https://github.com/calamus0427/mpvue-component#readme"
19 | }
20 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import App from './App'
 3 | import './utils/index.js'
 4 | 
 5 | Vue.config.productionTip = false
 6 | App.mpType = 'app'
 7 | 
 8 | 
 9 | const app = new Vue(App)
10 | app.$mount()
11 | 
12 | export default {
13 |   // 这个字段走 app.json
14 |   config: {
15 |     // 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去
16 |     pages: ['pages/logs/main', '^pages/index/main'],
17 |     window: {
18 |       backgroundTextStyle: 'light',
19 |       navigationBarBackgroundColor: '#fff',
20 |       navigationBarTitleText: 'WeChat',
21 |       navigationBarTextStyle: 'black'
22 |     }
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export default {
 3 |   created () {
 4 |     // 调用API从本地缓存中获取数据
 5 |     const logs = wx.getStorageSync('logs') || []
 6 |     logs.unshift(Date.now())
 7 |     wx.setStorageSync('logs', logs)
 8 | 
 9 |     console.log('app created and cache logs by setStorageSync')
10 |   }
11 | }
12 | </script>
13 | 
14 | <style>
15 | .container {
16 |   height: 100%;
17 |   display: flex;
18 |   flex-direction: column;
19 |   align-items: center;
20 |   justify-content: space-between;
21 |   padding: 200rpx 0;
22 |   box-sizing: border-box;
23 | }
24 | /* this rule will be remove */
25 | * {
26 |   transition: width 2s;
27 |   -moz-transition: width 2s;
28 |   -webkit-transition: width 2s;
29 |   -o-transition: width 2s;
30 | }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/src/pages/logs/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <ul class="container log-list">
 4 |       <li v-for="(log, index) in logs" :class="{ red: aa }" :key="index" class="log-item">
 5 |         <card :text="(index + 1) + ' . ' + log"></card>
 6 |       </li>
 7 |     </ul>
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import { formatTime } from '@/utils/index'
13 | import card from '@/components/card'
14 | 
15 | export default {
16 |   components: {
17 |     card
18 |   },
19 | 
20 |   data () {
21 |     return {
22 |       logs: []
23 |     }
24 |   },
25 | 
26 |   created () {
27 |     const logs = (wx.getStorageSync('logs') || [])
28 |     this.logs = logs.map(log => formatTime(new Date(log)))
29 |   }
30 | }
31 | </script>
32 | 
33 | <style>
34 | .log-list {
35 |   display: flex;
36 |   flex-direction: column;
37 |   padding: 40rpx;
38 | }
39 | 
40 | .log-item {
41 |   margin: 10rpx;
42 | }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/pages/counter/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="counter-warp">
 3 |     <p>Vuex counter：{{ count }}</p>
 4 |     <p>
 5 |       <button @click="increment">+</button>
 6 |       <button @click="decrement">-</button>
 7 |     </p>
 8 | 
 9 |     <a href="/pages/index/main" class="home">去往首页</a>
10 | 
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | // Use Vuex
16 | import store from './store'
17 | 
18 | 
19 | export default {
20 |   computed: {
21 |     count () {
22 |       return store.state.count
23 |     }
24 |   },
25 |   methods: {
26 |     increment () {
27 |       store.commit('increment')
28 |     },
29 |     decrement () {
30 |       store.commit('decrement')
31 |     }
32 |   }
33 | }
34 | 
35 | </script>
36 | <style>
37 | .counter-warp {
38 |   text-align: center;
39 |   margin-top: 100px;
40 | }
41 | .home {
42 |   display: inline-block;
43 |   margin: 100px auto;
44 |   padding: 5px 10px;
45 |   color: blue;
46 |   border: 1px solid blue;
47 | }
48 | 
49 | </style>
50 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/src/utils/index.js:
--------------------------------------------------------------------------------
 1 | function formatNumber (n) {
 2 |   const str = n.toString()
 3 |   return str[1] ? str : `0${str}`
 4 | }
 5 | 
 6 | export function formatTime (date) {
 7 |   const year = date.getFullYear()
 8 |   const month = date.getMonth() + 1
 9 |   const day = date.getDate()
10 | 
11 |   const hour = date.getHours()
12 |   const minute = date.getMinutes()
13 |   const second = date.getSeconds()
14 | 
15 |   const t1 = [year, month, day].map(formatNumber).join('/')
16 |   const t2 = [hour, minute, second].map(formatNumber).join(':')
17 | 
18 |   return `${t1} ${t2}`
19 | }
20 | 
21 | var comicData = [
22 |   {
23 |     'id': '1',
24 |     'name': '命运石之门',
25 |     'date': '2018-04-11',
26 |     'path': 'http://p3i10hjs7.bkt.clouddn.com/bg.jpg',
27 |     'description': '最爱'
28 |   }, {
29 |     'id': '2',
30 |     'name': '命运石之门',
31 |     'date': '2018-04-11',
32 |     'path': 'http://p3i10hjs7.bkt.clouddn.com/bg.jpg',
33 |     'description': '最爱'
34 |   }, {
35 |     'id': '3',
36 |     'name': '命运石之门',
37 |     'date': '2018-04-11',
38 |     'path': 'http://p3i10hjs7.bkt.clouddn.com/bg.jpg',
39 |     'description': '最爱'
40 |   }, {
41 |     'id': '4',
42 |     'name': '命运石之门',
43 |     'date': '2018-04-11',
44 |     'path': 'http://p3i10hjs7.bkt.clouddn.com/bg.jpg',
45 |     'description': '最爱'
46 |   }
47 | ]
48 | 
49 | 


--------------------------------------------------------------------------------
/src/pages/index/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="container" @click="clickHandle('test click', $event)">
  3 |   <canvas-bg></canvas-bg>
  4 |   <time-line :data="comicData"></time-line>
  5 |     <!-- <div class="userinfo" @click="bindViewTap">
  6 |       <img class="userinfo-avatar" v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" background-size="cover" />
  7 |       <div class="userinfo-nickname">
  8 |         <card :text="userInfo.nickName"></card>
  9 |       </div>
 10 |     </div> -->
 11 | 
 12 | 
 13 |     <!-- <a href="/pages/counter/main" class="counter">去往Vuex示例页面</a> -->
 14 | 
 15 |   </div>
 16 | </template>
 17 | 
 18 | <script>
 19 | import itemList from '@/components/itemList'
 20 | import timeLine from '@/components/timeLine'
 21 | import card from '@/components/card'
 22 | import canvasBg from '@/components/canvasBg'
 23 | 
 24 | export default {
 25 |   data () {
 26 |     return {
 27 |       motto: 'Hello World',
 28 |       cell: '111',
 29 |       userInfo: {},
 30 |       comicData:[
 31 |   {
 32 |     'id': '1',
 33 |     'name': '命运石之门0',
 34 |     'date': '2018-04-11',
 35 |     'path': 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3913842313,40473722&fm=27&gp=0.jpg',
 36 |     'description': '最爱'
 37 |   }, {
 38 |     'id': '2',
 39 |     'name': '纯金属狂潮 4',
 40 |     'date': '2018-04',
 41 |     'path': 'http://dmimg.5054399.com/allimg/171130/41_171130184805_1.jpg',
 42 |     'description': '最爱'
 43 |   }, {
 44 |     'id': '3',
 45 |     'name': '食戟之灵',
 46 |     'date': '2018-04',
 47 |     'path': 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=15596822,3055393332&fm=27&gp=0.jpg',
 48 |     'description': '最爱'
 49 |   }, {
 50 |     'id': '4',
 51 |     'name': '刀剑神域',
 52 |     'date': '2018-04',
 53 |     'path': 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2859500531,3225586698&fm=27&gp=0.jpg',
 54 |     'description': '最爱'
 55 |   },{
 56 |     'id': '4',
 57 |     'name': '东京食尸鬼：Re',
 58 |     'date': '2018-04',
 59 |     'path': 'http://dmimg.5054399.com/allimg/171216/41_171216121955_3.jpg',
 60 |     'description': '最爱'
 61 |   }
 62 | ]
 63 |     }
 64 |   },
 65 | 
 66 |   components: {
 67 |     card,
 68 |     itemList,
 69 |     timeLine
 70 |   },
 71 | 
 72 |   methods: {
 73 |     bindViewTap () {
 74 |       const url = '../logs/main'
 75 |       wx.navigateTo({ url })
 76 |     },
 77 |     getUserInfo () {
 78 |       // 调用登录接口
 79 |       wx.login({
 80 |         success: () => {
 81 |           wx.getUserInfo({
 82 |             success: (res) => {
 83 |               this.userInfo = res.userInfo
 84 |             }
 85 |           })
 86 |         }
 87 |       })
 88 |     },
 89 |     clickHandle (msg, ev) {
 90 |       console.log('clickHandle:', msg, ev)
 91 |     }
 92 |   },
 93 | 
 94 |   created () {
 95 |     // 调用应用实例的方法获取全局数据
 96 |     this.getUserInfo()
 97 |   }
 98 | }
 99 | </script>
100 | 
101 | <style scoped>
102 | .userinfo {
103 |   display: flex;
104 |   flex-direction: column;
105 |   align-items: center;
106 | }
107 | 
108 | .userinfo-avatar {
109 |   width: 128rpx;
110 |   height: 128rpx;
111 |   margin: 20rpx;
112 |   border-radius: 50%;
113 | }
114 | 
115 | .userinfo-nickname {
116 |   color: #aaa;
117 | }
118 | 
119 | .usermotto {
120 |   margin-top: 150px;
121 | }
122 | 
123 | .form-control {
124 |   display: block;
125 |   padding: 0 12px;
126 |   margin-bottom: 5px;
127 |   border: 1px solid #ccc;
128 | }
129 | 
130 | .counter {
131 |   display: inline-block;
132 |   margin: 10px auto;
133 |   padding: 5px 10px;
134 |   color: blue;
135 |   border: 1px solid blue;
136 | }
137 | </style>
138 | 


--------------------------------------------------------------------------------
/src/components/timeLine.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div>
  3 |     <div  class="timezone" v-for="(item,index) in data" :key='index'>
  4 |               <div @click="showDetail(item)" class="time" v-bind:style="{color:red}" >
  5 |                   <img :src="item.path" />
  6 |                   <div>
  7 |                       <p>{{item.name}}</p>
  8 |                       <ul>
  9 |                           <li class="date">{{item.date}}</li>
 10 |                       </ul>
 11 |                   </div>
 12 |               </div>
 13 |     </div>
 14 | </div>
 15 | </template>
 16 | 
 17 | <script>
 18 | export default {
 19 |   data(){
 20 |     return {
 21 |       msg: 'nihao'
 22 |     }
 23 |   },
 24 |   props: ['data'],
 25 |   computed: {
 26 |   },
 27 |   methods:{
 28 |     setDuration(){
 29 | 
 30 |     },
 31 |     showDetail(item){
 32 |       const url = '../logs/main'
 33 |       wx.navigateTo({ url })
 34 |     }
 35 |   }
 36 | }
 37 | </script>
 38 | 
 39 | <style>
 40 |             .timezone{
 41 |                 width:6px;
 42 |                 height: 100px;
 43 |                 background: lightblue;
 44 |                 margin-left:20px;
 45 |                 margin-top:0px;
 46 |                 border-radius: 3px;
 47 |                 position: relative;
 48 |                 -webkit-animation: heightSlide 2s linear;
 49 |             }
 50 |             @-webkit-keyframes heightSlide{
 51 |                 0%{
 52 |                     height: 0;
 53 |                 }
 54 |                 100%{
 55 |                     height: 100px;
 56 |                 }
 57 |             }
 58 |             .timezone:after{
 59 |                 content: '未完待续...';
 60 |                 width: 100px;
 61 |                 color:#fff;
 62 |                 position: absolute;
 63 |                 margin-left: -35px;
 64 |                 bottom: -30px;
 65 |                 -webkit-animation: showIn 4s ease;
 66 |             }
 67 |             .timezone .time,.timezone .timeLeft{
 68 |                 position: absolute;
 69 |                 margin-left: -10px;
 70 |                 margin-top:-10px;
 71 |                 width:20px;
 72 |                 height:20px;
 73 |                 border-radius: 50%;
 74 |                 border:4px solid rgba(255,255,255,0.5);
 75 |                 background: lightblue;
 76 |                 -webkit-transition: all 0.5s;
 77 |                 -webkit-animation: showIn ease;
 78 |             }
 79 | 
 80 |             @-webkit-keyframes showIn{
 81 |                 0%,70%{
 82 |                     opacity: 0;
 83 |                 }
 84 |                 100%{
 85 |                     opacity: 1;
 86 |                 }
 87 |             }
 88 |             .timezone .time img,.timezone .timeLeft img{
 89 |                 width:80px;
 90 |                 height:80px;
 91 |                 position: absolute;
 92 |                 margin-left: -120px;
 93 |                 margin-top: -30px;
 94 |                 color:#eee;
 95 |                 font-size: 14px;
 96 |                 cursor:pointer;
 97 |                 -webkit-animation: showIn 3s ease;
 98 |             }
 99 |             .timezone .time li,.timezone .timeLeft li{
100 |               color:#dcffff;
101 |               font-size:12px;
102 |             }
103 |             .timezone .timeLeft img{
104 |                 margin-left: 60px;
105 |             }
106 |             .timezone .time:hover,.timezone .timeLeft:hover{
107 |                 border:4px solid lightblue;
108 |                 background: lemonchiffon;
109 |                 box-shadow: 0 0 2px 2px rgba(255,255,255,0.4);
110 |             }
111 |             .timezone .time div,.timezone .timeLeft div{
112 |                 position: absolute;
113 |                 top:50%;
114 |                 margin-top: -25px;
115 |                 left:50px;
116 |                 width: 130px;
117 |                 min-height: 50px;
118 |                 background: lightblue;
119 |                 border:3px solid #eee;
120 |                 border-radius: 10px;
121 |                 z-index: 2;
122 |                 overflow: hidden;
123 |                 cursor:pointer;
124 |                 -webkit-animation: showIn 3s ease;
125 |                 -webkit-transition: all 0.5s;
126 |             }
127 |             .timezone .timeLeft div{
128 |                 left:-337px;
129 |             }
130 |             .timezone .time div:hover,.timezone .timeLeft div:hover{
131 |                 min-height: 10px;
132 |             }
133 |             .timezone .time div p,.timezone .timeLeft div p{
134 |                 color: #fff;
135 |                 font-weight: bold;
136 |                 text-align: center;
137 |             }
138 |             .timezone .time:before,.timezone .timeLeft:before{
139 |                 content: '';
140 |                 position: absolute;
141 |                 top:0px;
142 |                 left: 32px;
143 |                 width: 0px;
144 |                 height: 0px;
145 |                 border:10px solid transparent;
146 |                 border-right:10px solid #eee;
147 |                 z-index:-1;
148 |                 -webkit-animation: showIn 3s ease;
149 |             }
150 |             .timezone .timeLeft:before{
151 |                 left:-33px;
152 |             }
153 |             .timezone .time div ul,.timezone .timeLeft div ul{
154 |                 list-style: none;
155 |                 width:130px;
156 |                 padding:5px 0 0;
157 |                 border-top:2px solid #eee;
158 |                 color:#fff;
159 |                 text-align: center;
160 |             }
161 |             .timezone .time div li,.timezone .timeLeft div li{
162 |                 display: inline-block;
163 |                 height: 25px;
164 |                 line-height: 25px;
165 |             }
166 | </style>
167 | 


--------------------------------------------------------------------------------
/src/components/canvasBg.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <canvas id="canvas">
  3 |     </canvas>
  4 | </template>
  5 | <script>
  6 | export default {
  7 |     name:'CLCanvasBg',
  8 |     props: {
  9 |       //原点数量
 10 |         dotsNum: {
 11 |             type: Number,
 12 |             default: 50
 13 |         },
 14 |         //彩色还是黑白
 15 |         isColor: {
 16 |             type: Boolean,
 17 |             default: true
 18 |         },
 19 |         //圆的颜色
 20 |         roundColor: {
 21 |             type: String,
 22 |             default: "#999"
 23 |         },
 24 |         //直线颜色
 25 |         lineColor: {
 26 |             type: String,
 27 |             default: "#ccc"
 28 |         }
 29 |     },
 30 |     mounted() {
 31 |         const canvas = document.getElementById("canvas");
 32 |         const ctx = canvas.getContext("2d");
 33 |         const rndCl = () => Math.floor(Math.random() * 225);
 34 |         const width = window.innerWidth;
 35 |         const height = window.innerHeight;
 36 |         var base_list = [];
 37 |         canvas.width = width;
 38 |         canvas.height = height;
 39 |         // 绘制园
 40 |         const drawRounds = (obj, index) => {
 41 |             let { x, y, r, color } = obj;
 42 |             ctx.beginPath();
 43 |             ctx.arc(x, y, r, 0, 2 * Math.PI);
 44 |             if (this.isColor) {
 45 |                 ctx.fillStyle = color;
 46 |             } else {
 47 |                 ctx.fillStyle = this.roundColor
 48 |             }
 49 |             ctx.fill();
 50 |             ctx.closePath();
 51 |         }
 52 |         //判断移动方向
 53 |         const controlDirection = (obj) => {
 54 |             if (obj.x >= (width - obj.r)) {
 55 |                 obj.controlX = "left";
 56 |             } else if (obj.x <= parseInt(obj.r / 2)) {
 57 |                 obj.controlX = "right";
 58 |             }
 59 |             if (obj.y >= (height - obj.r)) {
 60 |                 obj.controlY = "bottom";
 61 |             } else if (obj.y <= parseInt(obj.r / 2)) {
 62 |                 obj.controlY = "top"
 63 |             }
 64 |             return obj
 65 |         }
 66 |         //划线
 67 |         const drawLine = (list) => {
 68 |             list.map((item, index) => {
 69 |                 ctx.beginPath();
 70 |                 ctx.moveTo(item.x1, item.y1);
 71 |                 ctx.lineTo(item.x2, item.y2);
 72 |                 ctx.LineWeight = 1;
 73 |                 if (this.isColor) {
 74 |                     ctx.strokeStyle = item.color;
 75 |                 } else {
 76 |                     ctx.strokeStyle = this.lineColor
 77 |                 }
 78 |                 ctx.stroke();
 79 |                 ctx.closePath();
 80 |             })
 81 |         }
 82 |         //绘制
 83 |         const draw = (list) => {
 84 |             let dots_arr = [];
 85 |             let line_arr = [];
 86 |             list.map((item, index) => {
 87 |                 let xy = controlDirection(item);
 88 |                 let obj = roundMove(xy);
 89 |                 dots_arr.push(obj);
 90 |             });
 91 |             dots_arr.map((item1, index1) => {
 92 |                 dots_arr.map((item2, index2) => {
 93 |                     if (item1 !== item2) {
 94 |                         let x = item1.x - item2.x;
 95 |                         let y = item1.y - item2.y;
 96 |                         if (Math.abs(x) < 150 && Math.abs(y) < 150) {
 97 |                             let obj = {
 98 |                                 x1: item1.x,
 99 |                                 y1: item1.y,
100 |                                 x2: item2.x,
101 |                                 y2: item2.y,
102 |                                 color: item1.color
103 |                             }
104 |                             line_arr.push(obj)
105 |                         }
106 |                     }
107 |                 })
108 |             })
109 |             drawLine(line_arr);
110 |             dots_arr.map((item, index) => {
111 |                 drawRounds(item, index)
112 |             })
113 |             base_list = dots_arr;
114 |             setTimeout(() => {
115 |                 // if(this.paused){
116 |                 reDraw()
117 |                 // }
118 |             }, 50)
119 |         }
120 |         const reDraw = () => {
121 |             ctx.clearRect(0, 0, width, height);
122 |             draw(base_list)
123 |         }
124 |         //移动
125 |         const roundMove = (obj) => {
126 |             switch (obj.controlX) {
127 |                 case "right":
128 |                     obj.x++;
129 |                     break;
130 |                 case "left":
131 |                     obj.x--;
132 |                     break;
133 |                 default:
134 |             }
135 |             switch (obj.controlY) {
136 |                 case "top":
137 |                     obj.y++;
138 |                     break;
139 |                 case "bottom":
140 |                     obj.y--;
141 |                     break;
142 |                 default:
143 |             }
144 |             return obj
145 |         }
146 |         //创造圆点
147 |         const creatDots = () => {
148 |             let arr = [];
149 |             for (let i = 0; i < this.dotsNum; i++) {
150 |                 let obj = {};
151 |                 obj.x = parseInt(Math.random() * width);
152 |                 obj.y = parseInt(Math.random() * height);
153 |                 obj.r = parseInt(Math.random() * 10);
154 |                 obj.controlX = parseInt(Math.random() * 10) > 5 ? "left" : "right"
155 |                 obj.controlY = parseInt(Math.random() * 10) > 5 ? "bottom" : "top"
156 |                 obj.color = `rgba(${rndCl()},${rndCl()},${rndCl()},.3)`
157 |                 arr.push(obj)
158 |             }
159 |             return arr
160 |         }
161 |         draw(creatDots())
162 |         //鼠标移动
163 |         const moveXY = (event) => {
164 |             let obj = {};
165 |             obj.x = event.clientX;
166 |             obj.y = event.clientY;
167 |             obj.r = 0;
168 |             base_list[0] = obj;
169 |             base_list[0]["r"] = 1;
170 |         }
171 |         //鼠标点击
172 |         const addXY = (event) => {
173 |             let obj = {};
174 |             obj.x = event.clientX;
175 |             obj.y = event.clientY;
176 |             obj.r = parseInt(Math.random() * 10);
177 |             obj.color = `rgba(${rndCl()},${rndCl()},${rndCl()},.3)`;
178 |             obj.controlX = parseInt(Math.random() * 10) > 5 ? 'left' : 'right'
179 |             obj.controlY = parseInt(Math.random() * 10) > 5 ? 'bottom' : 'top'
180 |             base_list.push(obj);
181 |         }
182 |         window.addEventListener("mousemove", moveXY);
183 |         window.addEventListener("click", addXY)
184 |     },
185 | }
186 | </script>
187 | <style>
188 |     #canvas{
189 |         position: fixed;
190 |         z-index: -1;
191 |         top: 0;
192 |         left: 0;
193 |     }
194 | </style>
195 | 


--------------------------------------------------------------------------------