• 使用canvas实现时间轴上滑块的各种常用操作（仅供参考）

    一、简介

    使用canvas，模拟绘制时间轴区域，有时间刻度标尺，时间轴区域上会有多行，每行都有一个滑块。

    1、时间刻度标尺可以拖动，会自动对齐整数点秒数，最小步数为0.1秒。

    2、滑块可以自由拖动，当滑块处于选中状态时，左右两边会出现可拖动的按钮，用于拉伸宽度。

    3、滑块之间可以自由拖动交换位置。

    4、滑块与滑块之间对齐时会出现对齐虚线，滑块与刻度标尺对齐时，刻度标尺会变色用于提醒用户此时已对齐。

    5、当滑块拉伸到最右侧区域时，右侧空间不足时，会自动增加右侧空间区域。而当做右侧滑块的位置往左移动时，如果出现右侧空间区域过大，则会自动减少右侧空间区域，始终保持右侧空间留白区域是预设的宽度。

    07c925f5a8664149b569f64b75e419cd.png

     

    二、案例代码

    1. <template>
    2. 	<div class="main-container" ref="tWrap" @scroll="tWrapScroll($event)">
    3. 		<canvas id="tl-canvas" ref="tl-canvas" width="700" height="300" @mousedown.stop.prevent="cMouseDown($event)"
    4. 			@mousemove.stop.prevent="cMouseMove($event)" @mouseup.stop.prevent="cMouseUp($event)"
    5. 			@mouseleave.stop.prevent="cMouseUp($event)">canvas>
    6. 		<div class="hidden-box" :style="{
    7. 			width: cMaxWidth + 'px',
    8. 			height: cMaxHeight + 'px'
    9. 		}">div>
    10. 	div>
    11. template>
    12.  
    13. <script>
    14.  
    15. export default {
    16. 	data() {
    17. 		return {
    18. 			tWrapScrollTop: 0,
    19. 			tWrapScrollLeft: 0,
    20. 			tWrapEle: null,
    21. 			tCanvas: null,
    22. 			ctx: null,
    23. 			minY: 50,
    24. 			maxY: 500,
    25. 			minX: 10, // 可拖动的x轴最左侧
    26. 			maxX: 700, // 可拖动的x轴最右侧
    27. 			rDistant: 300, // 画布右侧留白区域距离
    28. 			cWidth: 700, // 画布的宽度
    29. 			cHeight: 300, // 画布的高度
    30. 			cMaxWidth: 1000, // 实际画布需要的宽度
    31. 			cMaxHeight: 500, // 实际画布需要的高度
    32. 			btnWidth: 20, // 左右按钮宽度
    33. 			lineHeight: 50, // 滑块高度
    34.  
    35. 			moveItem: null, // 当前移动的滑块
    36. 			items: [
    37. 				{
    38. 					zIndex: 1,
    39. 					id: 1,
    40. 					active: false,
    41. 					tTop: 0,
    42. 					tLeft: 10,
    43. 					tWidth: 100,
    44. 					tHeight: 50
    45. 				},
    46. 				{
    47. 					zIndex: 2,
    48. 					id: 2,
    49. 					active: false,
    50. 					tTop: 0,
    51. 					tLeft: 10,
    52. 					tWidth: 150,
    53. 					tHeight: 50
    54. 				},
    55. 				{
    56. 					zIndex: 3,
    57. 					id: 3,
    58. 					active: false,
    59. 					tTop: 0,
    60. 					tLeft: 10,
    61. 					tWidth: 200,
    62. 					tHeight: 50
    63. 				},
    64. 			],
    65.  
    66. 			bcMoveAbled: false, // 刻度尺可移动的标识
    67. 			moveAbled: false, // 滑块可移动的标识
    68. 			dragLeftAbled: false, // 滑块可左拖的标识
    69. 			dragRightAbled: false, // 滑块可右拖的标识
    70. 			oldMouseX: 0,
    71. 			oldMouseY: 0,
    72.  
    73. 			alignLine: null, // 对齐虚线对象
    74. 			alignStaff: false, // 刻度尺对齐标识
    75.  
    76. 			currentTime: 10, // 刻度尺当前对齐的时间
    77. 		}
    78. 	},
    79.  
    80. 	mounted() {
    81.  
    82.  
    83. 		this.$nextTick(() => {
    84. 			this.tCanvas = document.getElementById('tl-canvas')
    85. 			this.ctx = this.tCanvas.getContext('2d')
    86.  
    87. 			let twrap = this.$refs['tWrap'].getBoundingClientRect()
    88. 			this.tWrapEle = twrap
    89.  
    90. 			this.updateCanvasDom()
    91.  
    92. 			this.doDrawTimeLine()
    93. 		})
    94. 	},
    95.  
    96. 	beforeUnmount() {
    97. 	
    98. 	},
    99.  
    100. 	methods: {
    101.  
    102. 		/**
    103. 		 * 监听滚动事件
    104. 		 * @param {*} e 
    105. 		 */
    106. 		tWrapScroll(e) {
    107. 			this.tWrapScrollTop = this.$refs['tWrap'].scrollTop
    108. 			this.tWrapScrollLeft = this.$refs['tWrap'].scrollLeft
    109. 			// console.log(this.$refs['tWrap'].scrollTop)
    110. 		},
    111.  
    112. 		/**
    113. 		 * 判断点是否在多边形内
    114. 		 * @param {*} p 
    115. 		 * @param {*} ptPolygon 
    116. 		 */
    117. 		isInPolygon(p, ptPolygon) {
    118. 			let ncross = 0;
    119. 			for (let i = 0; i < ptPolygon.length; i++) {
    120. 				let p1 = ptPolygon[i];
    121. 				let p2 = ptPolygon[(i + 1) % ptPolygon.length]; // 相邻两条边p1,p2
    122. 				if (p1.y == p2.y) {
    123. 					continue;
    124. 				}
    125. 				if (p.y < Math.min(p1.y, p2.y)) {
    126. 					continue;
    127. 				}
    128. 				if (p.y >= Math.max(p1.y, p2.y)) {
    129. 					continue;
    130. 				}
    131. 				let x = (p.y - p1.y) * (p2.x - p1.x) / (p2.y - p1.y) + p1.x;
    132. 				if (x > p.x) {
    133. 					ncross++; // 只统计单边交点
    134. 				}
    135. 			}
    136.  
    137. 			return (ncross % 2 == 1);
    138. 		},
    139.  
    140. 		/**
    141. 		 * 判断是否出现对齐虚线
    142. 		 */
    143. 		showAlignLine(item) {
    144.  
    145. 			let _n = 3
    146.  
    147. 			// 判断是否对齐刻度尺
    148. 			let _bcX = (this.currentTime*10+this.minX)
    149.  
    150. 			// 移动对齐标尺
    151. 			if(this.moveAbled) {
    152. 				if(Math.abs(item.tLeft - _bcX) <= _n) {
    153. 					this.alignStaff = true
    154. 					return {
    155. 						left: _bcX
    156. 					}
    157. 				} else if(Math.abs(item.tLeft+item.tWidth - _bcX) <= _n) {
    158. 					this.alignStaff = true
    159. 					return {
    160. 						left: _bcX - item.tWidth
    161. 					}
    162. 				} else {
    163. 					this.alignStaff = false
    164. 				}
    165. 			} 
    166. 			// 左拖对齐标尺
    167. 			else if(this.dragLeftAbled) {
    168. 				
    169. 				if(Math.abs(item.tLeft - _bcX) <= _n) {
    170. 					this.alignStaff = true
    171. 					return {
    172. 						n: item.tLeft - _bcX,
    173. 						left: _bcX
    174. 					}
    175. 				} else {
    176. 					this.alignStaff = false
    177. 				}
    178. 			} 
    179. 			// 右拖对齐标尺
    180. 			else if(this.dragRightAbled) {
    181. 		
    182. 				if(Math.abs(item.tLeft + item.tWidth - _bcX) <= _n) {
    183. 					this.alignStaff = true
    184. 					return {
    185. 						n: _bcX - (item.tLeft + item.tWidth)
    186. 					}
    187. 				} else {
    188. 					this.alignStaff = false
    189. 				}
    190. 			}
    191. 			
    192.  
    193. 			// 判断滑块之间的对齐
    194. 			for(let i=0; i < this.items.length; i++) {
    195. 				// 移动
    196. 				if(this.moveAbled && i !== this.moveItem.index) {
    197. 					if(Math.abs(item.tLeft - this.items[i].tLeft) <= _n) {
    198. 						this.alignLine = {
    199. 							top: 0,
    200. 							left: this.items[i].tLeft,
    201. 							height: this.cHeight
    202. 						}
    203. 						
    204. 						return {
    205. 							left: this.items[i].tLeft
    206. 						}
    207. 						break
    208. 					}
    209. 					else if(Math.abs(item.tLeft+item.tWidth - this.items[i].tLeft) <= _n ) {
    210. 						this.alignLine = {
    211. 							top: 0,
    212. 							left: this.items[i].tLeft,
    213. 							height: this.cHeight
    214. 						}
    215.  
    216. 						return {
    217. 							left: this.items[i].tLeft - item.tWidth
    218. 						}
    219. 						break
    220. 					} 
    221. 					else if(Math.abs(this.items[i].tLeft+this.items[i].tWidth - item.tLeft) <= _n) {
    222.  
    223. 						this.alignLine = {
    224. 							top: 0,
    225. 							left: this.items[i].tLeft+this.items[i].tWidth,
    226. 							height: this.cHeight
    227. 						}
    228.  
    229. 						return {
    230. 							left: this.items[i].tLeft+this.items[i].tWidth
    231. 						}
    232. 						break
    233.  
    234. 					} 
    235. 					else if(Math.abs(item.tLeft+item.tWidth - (this.items[i].tLeft+this.items[i].tWidth)) <= _n) {
    236. 						this.alignLine = {
    237. 							top: 0,
    238. 							left: this.items[i].tLeft+this.items[i].tWidth,
    239. 							height: this.cHeight
    240. 						}
    241.  
    242. 						return {
    243. 							left: this.items[i].tLeft+this.items[i].tWidth - item.tWidth
    244. 						}
    245. 						break
    246. 					}					
    247. 				}
    248. 				// 左拖
    249. 				else if(this.dragLeftAbled && i !== this.moveItem.index) {
    250. 					if(Math.abs(item.tLeft - this.items[i].tLeft) <= _n) {
    251. 						this.alignLine = {
    252. 							top: 0,
    253. 							left: this.items[i].tLeft,
    254. 							height: this.cHeight
    255. 						}
    256. 						
    257. 						return {
    258. 							n: item.tLeft - this.items[i].tLeft,
    259. 							left: this.items[i].tLeft
    260. 						}
    261. 						break
    262. 					} 
    263. 					else if(Math.abs(this.items[i].tLeft+this.items[i].tWidth - item.tLeft) <= _n) {
    264. 						this.alignLine = {
    265. 							top: 0,
    266. 							left: this.items[i].tLeft+this.items[i].tWidth,
    267. 							height: this.cHeight
    268. 						}
    269.  
    270. 						return {
    271. 							n: item.tLeft - (this.items[i].tLeft+this.items[i].tWidth),
    272. 							left: this.items[i].tLeft+this.items[i].tWidth
    273. 						}
    274. 						break
    275. 					}
    276. 				}
    277. 				// 右拖
    278. 				else if(this.dragRightAbled && i !== this.moveItem.index) {
    279. 					if(Math.abs(item.tLeft+item.tWidth - (this.items[i].tLeft+this.items[i].tWidth)) <= _n) {
    280. 						this.alignLine = {
    281. 							top: 0,
    282. 							left: this.items[i].tLeft+this.items[i].tWidth,
    283. 							height: this.cHeight
    284. 						}
    285.  
    286. 						return {
    287. 							n: this.items[i].tLeft+this.items[i].tWidth - (item.tLeft+item.tWidth),
    288. 							// left: this.items[i].tLeft+this.items[i].tWidth - item.tWidth
    289. 						}
    290. 						break
    291. 					} 
    292. 					else if(Math.abs(item.tLeft+item.tWidth - this.items[i].tLeft) <= _n) {
    293. 						this.alignLine = {
    294. 							top: 0,
    295. 							left: this.items[i].tLeft,
    296. 							height: this.cHeight
    297. 						}
    298.  
    299. 						return {
    300. 							n: this.items[i].tLeft - (item.tLeft+item.tWidth),
    301. 							// left: this.items[i].tLeft - item.tWidth
    302. 						}
    303. 						break
    304. 					}
    305. 				}
    306. 			}
    307.  
    308. 			// 没有对齐
    309. 			this.alignLine = null
    310. 			return false
    311. 		},
    312.  
    313. 		/**
    314. 		 * 检测当前滑块的最大长度和数量，随时更新画布的最大宽度和高度
    315. 		 */
    316. 		updateCanvasDom() {
    317.  
    318. 			let maxWidth = 0
    319.  
    320. 			// 按层级排序
    321. 			this.items.sort((a, b) => b.zIndex - a.zIndex)
    322. 	
    323. 			for (let i = 0; i < this.items.length; i++) {
    324. 				// 获取最大宽度
    325. 				maxWidth = this.items[i].tLeft + this.items[i].tWidth > maxWidth ? this.items[i].tLeft + this.items[i].tWidth : maxWidth
    326.  
    327. 				// 重新更新y坐标
    328. 				this.items[i].tTop = 5 + this.lineHeight * i + 5 * i + this.minY
    329. 				
    330. 			}
    331.  
    332. 			this.items = JSON.parse(JSON.stringify(this.items))
    333. 			
    334.  
    335. 			// 留白区域大于预设
    336. 			if (this.cMaxWidth - maxWidth > this.rDistant && this.cMaxWidth - this.rDistant > this.cWidth) {
    337. 				this.cMaxWidth = maxWidth + this.rDistant
    338. 				this.maxX = this.cMaxWidth - this.rDistant
    339. 			}
    340.  
    341. 			// 留白区域小于预设
    342. 			if (this.cMaxWidth - maxWidth < this.rDistant) {
    343. 				this.cMaxWidth += (this.rDistant - (this.cMaxWidth - maxWidth))
    344. 				this.maxX = this.cMaxWidth - this.rDistant
    345. 			}
    346.  
    347. 			this.cMaxHeight = this.items.length * 55 > this.maxY ? this.items.length * 55 : this.maxY
    348.  
    349. 		},
    350.  
    351. 		/**
    352. 		 * 鼠标点击
    353. 		 */
    354. 		cMouseDown(e) {
    355. 			// 判断是否点击到标尺
    356. 			let _bcX = this.minX + this.currentTime*10
    357. 			let _mX = e.clientX - this.tWrapEle.left + this.tWrapScrollLeft
    358. 			if(_mX >= _bcX - 2 && _mX <= _bcX+2) {
    359. 				console.log('点击标尺', this.currentTime)
    360. 				this.tCanvas.style.cursor = 'grab'
    361. 				this.bcMoveAbled = true
    362.  
    363. 				this.oldMouseX = e.clientX
    364. 				this.oldMouseY = e.clientY
    365.  
    366. 				return
    367. 			}
    368.  
    369. 			// 判断是否点击到滑块
    370. 			for (let i = 0; i < this.items.length; i++) {
    371. 				let item = JSON.parse(JSON.stringify(this.items[i]))
    372.  
    373. 				item.tLeft = item.tLeft - this.tWrapScrollLeft
    374. 				item.tTop = item.tTop - this.tWrapScrollTop
    375.  
    376. 				// 判断鼠标坐标是否在滑块上
    377. 				if (this.isInPolygon({
    378. 					x: e.clientX - this.tWrapEle.left,
    379. 					y: e.clientY - this.tWrapEle.top
    380. 				}, [
    381. 					{
    382. 						x: item.tLeft,
    383. 						y: item.tTop
    384. 					},
    385. 					{
    386. 						x: item.tLeft + item.tWidth,
    387. 						y: item.tTop
    388. 					},
    389. 					{
    390. 						x: item.tLeft + item.tWidth,
    391. 						y: item.tTop + item.tHeight
    392. 					},
    393. 					{
    394. 						x: item.tLeft,
    395. 						y: item.tTop + item.tHeight
    396. 					}
    397. 				])) {
    398. 					if (item.active) {
    399.  
    400. 						// 判断是否在右按钮上
    401. 						if (this.isInPolygon({
    402. 							x: e.clientX - this.tWrapEle.left,
    403. 							y: e.clientY - this.tWrapEle.top
    404. 						}, [
    405. 							{
    406. 								x: item.tLeft + item.tWidth - this.btnWidth,
    407. 								y: item.tTop
    408. 							},
    409. 							{
    410. 								x: item.tLeft + item.tWidth,
    411. 								y: item.tTop
    412. 							},
    413. 							{
    414. 								x: item.tLeft + item.tWidth,
    415. 								y: item.tTop + item.tHeight
    416. 							},
    417. 							{
    418. 								x: item.tLeft + item.tWidth - this.btnWidth,
    419. 								y: item.tTop + item.tHeight
    420. 							}
    421. 						])) {
    422.  
    423. 							this.dragRightAbled = true
    424. 							this.tCanvas.style.cursor = 'e-resize'
    425.  
    426. 						}
    427. 						// 判断是否在左按钮上
    428. 						else if (this.isInPolygon({
    429. 							x: e.clientX - this.tWrapEle.left,
    430. 							y: e.clientY - this.tWrapEle.top
    431. 						}, [
    432. 							{
    433. 								x: item.tLeft,
    434. 								y: item.tTop
    435. 							},
    436. 							{
    437. 								x: item.tLeft + this.btnWidth,
    438. 								y: item.tTop
    439. 							},
    440. 							{
    441. 								x: item.tLeft + this.btnWidth,
    442. 								y: item.tTop + item.tHeight
    443. 							},
    444. 							{
    445. 								x: item.tLeft,
    446. 								y: item.tTop + item.tHeight
    447. 							}
    448. 						])) {
    449.  
    450. 							this.dragLeftAbled = true
    451. 							this.tCanvas.style.cursor = 'w-resize'
    452.  
    453. 						}
    454. 						// 在滑块上
    455. 						else {
    456. 							this.moveAbled = true
    457. 							this.tCanvas.style.cursor = 'grab'
    458. 						}
    459. 					} else {
    460.  
    461. 						for (let i = 0; i < this.items.length; i++) {
    462. 							this.items[i].active = false
    463. 						}
    464.  
    465. 						// 在滑块上
    466. 						this.tCanvas.style.cursor = 'grab'
    467. 						this.moveAbled = true
    468. 						this.items[i].active = true
    469.  
    470. 					}
    471.  
    472. 					// 保存移动的item
    473. 					this.moveItem = JSON.parse(JSON.stringify(this.items[i]))
    474. 					this.moveItem.index = i
    475. 					console.log('点击', this.moveItem)
    476. 					
    477. 					this.oldMouseX = e.clientX
    478. 					this.oldMouseY = e.clientY
    479.  
    480. 					break
    481.  
    482. 				} else {
    483. 					this.tCanvas.style.cursor = 'auto'
    484. 					this.items[i].active = false
    485.  
    486. 					this.moveAbled = false
    487. 					this.dragLeftAbled = false
    488. 					this.dragRightAbled = false
    489.  
    490. 					this.oldMouseX = 0
    491. 					this.oldMouseY = 0
    492. 				}
    493. 			}
    494.  
    495. 		},
    496.  
    497. 		/**
    498. 		 * 鼠标移动
    499. 		 */
    500. 		cMouseMove(e) {
    501. 	
    502. 			// 刻度尺
    503. 			if(this.bcMoveAbled) {
    504. 				let _oldMouseX = e.clientX
    505. 				
    506. 				let _d = _oldMouseX - this.oldMouseX
    507.  
    508. 				this.oldMouseX = _oldMouseX
    509.  
    510. 				let _n = 0.3
    511.  
    512. 				let _time = this.currentTime + _d/10
    513. 				
    514. 				// 判断是否越界了
    515. 				if(_time < 0) {
    516. 					_time = 0
    517. 				}
    518. 				else if(_time * 10 + this.minX > this.maxX) {
    519. 					console.log('xxxx', this.maxX)
    520. 					_time = (this.maxX - this.minX)/10
    521. 				}
    522. 				// 判断是否移动到整数秒位置
    523. 				else if(Math.abs(Math.round(_time) - _time) <= _n) {
    524. 					this.oldMouseX += (Math.round(_time) - _time)*10
    525. 					_time = Math.round(_time)
    526. 					this.alignStaff = true
    527. 				} 
    528. 				else {
    529. 					this.alignStaff = false
    530. 				}
    531.  
    532.  
    533. 				this.currentTime = _time
    534.  
    535. 				console.log(this.currentTime)
    536. 			}
    537. 			else if (this.moveItem) {
    538. 				// 移动中
    539. 				if (this.moveAbled) {
    540. 					let item = JSON.parse(JSON.stringify(this.moveItem))
    541. 					// console.log(item)
    542.  
    543. 					let _oldMouseX = e.clientX
    544. 					let _oldMouseY = e.clientY
    545.  
    546. 					let _d = _oldMouseX - this.oldMouseX
    547. 					let _dy = _oldMouseY - this.oldMouseY
    548.  
    549. 					this.oldMouseX = _oldMouseX
    550. 					this.oldMouseY = _oldMouseY
    551.  
    552. 					// 最左侧/最右侧/最上侧/最底侧
    553. 					// if (item.tLeft + _d < this.minX || item.tLeft+item.tWidth + _d > this.maxX || item.tTop + _dy < this.minY || item.tTop + _dy + item.tHeight > this.maxY) {
    554. 					if (item.tLeft + _d < this.minX || item.tTop + _dy < this.minY || item.tTop + _dy + item.tHeight > this.maxY) {
    555. 						
    556. 						return
    557. 					}
    558.  
    559.  
    560. 					item.tLeft += _d
    561. 					item.tTop += _dy
    562.  
    563. 					// 判断是否对齐
    564. 					let _e = this.showAlignLine(item)
    565. 					if(_e) {
    566. 						item.tLeft = _e.left
    567. 					}
    568.  
    569. 					this.moveItem = JSON.parse(JSON.stringify(item))
    570.  
    571. 				} else {
    572. 					for (let i = 0; i < this.items.length; i++) {
    573.  
    574. 						if (this.moveItem.id == this.items[i].id) {
    575.  
    576. 							let item = JSON.parse(JSON.stringify(this.items[i]))
    577.  
    578. 							// 左拖中
    579. 							if (this.dragLeftAbled) {
    580. 								
    581. 								let _oldMouseX = e.clientX
    582. 								let _oldMouseY = e.clientY
    583.  
    584.  
    585. 								let _d = _oldMouseX - this.oldMouseX
    586.  
    587. 								this.oldMouseX = _oldMouseX
    588. 								this.oldMouseY = _oldMouseY
    589.  
    590. 								// 滑块最小宽度/最左侧
    591. 								if (item.tWidth - _d <= this.btnWidth || item.tLeft + _d < this.minX) {
    592. 									return
    593. 								}
    594.  
    595. 								item.tWidth -= _d
    596. 								item.tLeft += _d
    597.  
    598. 								// 判断是否对齐
    599. 								let _e = this.showAlignLine(item)
    600. 								if(_e) {
    601. 									this.oldMouseX += _e.n
    602. 									this.items[i].tWidth = item.tWidth + _e.n
    603. 									this.items[i].tLeft = _e.left
    604. 								} else {
    605. 									this.items[i] = JSON.parse(JSON.stringify(item))
    606. 								}
    607.  
    608. 							}
    609. 							// 右拖中
    610. 							else if (this.dragRightAbled) {
    611. 								
    612. 								let _oldMouseX = e.clientX
    613. 								let _oldMouseY = e.clientY
    614.  
    615. 								let _d = _oldMouseX - this.oldMouseX
    616.  
    617. 								this.oldMouseX = _oldMouseX
    618. 								this.oldMouseY = _oldMouseY
    619.  
    620. 								// 滑块最小宽度/最右侧
    621. 								// if (item.tWidth + _d <= this.btnWidth || item.tLeft + item.tWidth + _d > this.maxX) {
    622. 									if (item.tWidth + _d <= this.btnWidth) {
    623. 									return
    624. 								}
    625.  
    626. 								item.tWidth += _d
    627.  
    628. 								// 判断是否对齐
    629. 								let _e = this.showAlignLine(item)
    630. 								if(_e) {
    631. 									this.oldMouseX += _e.n
    632. 									this.items[i].tWidth = item.tWidth + _e.n
    633. 								} else {
    634. 									this.items[i] = JSON.parse(JSON.stringify(item))
    635. 								}
    636.  
    637. 								this.updateCanvasDom()
    638.  
    639. 							}
    640.  
    641. 							break
    642. 						}
    643.  
    644. 					}
    645. 				}
    646.  
    647. 			} 
    648. 			else {
    649.  
    650. 				// 判断是否点击到标尺
    651. 				let _mX = e.clientX - this.tWrapEle.left + this.tWrapScrollLeft
    652. 				let _bcX = this.minX + this.currentTime*10
    653. 				if(_mX >= _bcX - 2 && _mX <= _bcX + 2) {
    654. 					this.tCanvas.style.cursor = 'grab'
    655. 					return
    656. 				}
    657.  
    658. 				for (let i = 0; i < this.items.length; i++) {
    659.  
    660. 					let item = JSON.parse(JSON.stringify(this.items[i]))
    661.  
    662. 					item.tLeft = item.tLeft - this.tWrapScrollLeft
    663. 					item.tTop = item.tTop - this.tWrapScrollTop
    664.  
    665. 					// 判断鼠标坐标是否在滑块上
    666. 					if (this.isInPolygon({
    667. 						x: e.clientX - this.tWrapEle.left,
    668. 						y: e.clientY - this.tWrapEle.top
    669. 					}, [
    670. 						{
    671. 							x: item.tLeft,
    672. 							y: item.tTop
    673. 						},
    674. 						{
    675. 							x: item.tLeft + item.tWidth,
    676. 							y: item.tTop
    677. 						},
    678. 						{
    679. 							x: item.tLeft + item.tWidth,
    680. 							y: item.tTop + item.tHeight
    681. 						},
    682. 						{
    683. 							x: item.tLeft,
    684. 							y: item.tTop + item.tHeight
    685. 						}
    686. 					])) {
    687. 						if (item.active) {
    688. 							// 判断是否在左按钮上
    689. 							if (this.isInPolygon({
    690. 								x: e.clientX - this.tWrapEle.left,
    691. 								y: e.clientY - this.tWrapEle.top
    692. 							}, [
    693. 								{
    694. 									x: item.tLeft,
    695. 									y: item.tTop
    696. 								},
    697. 								{
    698. 									x: item.tLeft + this.btnWidth,
    699. 									y: item.tTop
    700. 								},
    701. 								{
    702. 									x: item.tLeft + this.btnWidth,
    703. 									y: item.tTop + item.tHeight
    704. 								},
    705. 								{
    706. 									x: item.tLeft,
    707. 									y: item.tTop + item.tHeight
    708. 								}
    709. 							])) {
    710. 								this.tCanvas.style.cursor = 'w-resize'
    711. 							}
    712. 							// 判断是否在右按钮上
    713. 							else if (this.isInPolygon({
    714. 								x: e.clientX - this.tWrapEle.left,
    715. 								y: e.clientY - this.tWrapEle.top
    716. 							}, [
    717. 								{
    718. 									x: item.tLeft + item.tWidth - this.btnWidth,
    719. 									y: item.tTop
    720. 								},
    721. 								{
    722. 									x: item.tLeft + item.tWidth,
    723. 									y: item.tTop
    724. 								},
    725. 								{
    726. 									x: item.tLeft + item.tWidth,
    727. 									y: item.tTop + item.tHeight
    728. 								},
    729. 								{
    730. 									x: item.tLeft + item.tWidth - this.btnWidth,
    731. 									y: item.tTop + item.tHeight
    732. 								}
    733. 							])) {
    734. 								this.tCanvas.style.cursor = 'e-resize'
    735.  
    736. 							} else {
    737. 								this.tCanvas.style.cursor = 'grab'
    738. 							}
    739. 						} else {
    740. 							this.tCanvas.style.cursor = 'grab'
    741. 						}
    742. 						break
    743. 					} else {
    744. 						this.tCanvas.style.cursor = 'auto'
    745. 					}
    746. 				}
    747. 			}
    748.  
    749. 		},
    750.  
    751. 		/**
    752. 		 * 鼠标松开
    753. 		 * @param {*} e 
    754. 		 */
    755. 		cMouseUp(e) {
    756.  
    757. 			if (this.moveAbled && this.moveItem) {
    758.  
    759. 				for (let i = 0; i < this.items.length; i++) {
    760. 	
    761. 					// 判断中点是否在行内
    762. 					// let _cx = this.moveItem.tLeft + this.moveItem.tWidth / 2 + this.minX
    763. 					let _cy = this.moveItem.tTop + this.moveItem.tHeight / 2
    764.  
    765. 					if (_cy > this.items[i].tTop && _cy < this.items[i].tTop + this.items[i].tHeight) {
    766. 						// console.log('在'+i+'行内')
    767.  
    768. 						if (this.items[i].id !== this.moveItem.id) {
    769. 							let _oZindex = this.moveItem.zIndex
    770. 							let _nZindex = this.items[i].zIndex
    771.  
    772. 							this.items[this.moveItem.index].zIndex = _nZindex
    773. 							this.items[this.moveItem.index].tLeft = this.moveItem.tLeft
    774.  
    775. 							this.items[i].zIndex = _oZindex
    776. 						} else {
    777. 							this.items[i].tLeft = this.moveItem.tLeft
    778. 						}
    779.  
    780. 						break
    781. 					}
    782. 				}
    783.  
    784. 			}
    785.  
    786. 			this.bcMoveAbled = false
    787. 			this.moveAbled = false
    788. 			this.dragLeftAbled = false
    789. 			this.dragRightAbled = false
    790.  
    791. 			this.oldMouseX = 0
    792. 			this.oldMouseY = 0
    793.  
    794. 			this.moveItem = null
    795. 			this.alignLine = null
    796. 			this.alignStaff = false
    797.  
    798. 			this.updateCanvasDom()
    799. 		},
    800.  
    801. 		doDrawTimeLine() {
    802. 			cancelAnimationFrame(this.requestAnimationFrameId)
    803.  
    804. 			this.drawTimeLine()
    805.  
    806. 			this.requestAnimationFrameId = requestAnimationFrame(this.doDrawTimeLine)
    807. 		},
    808.  
    809. 		/**
    810. 		 * 绘制时间轴
    811. 		 */
    812. 		drawTimeLine() {
    813.  
    814. 			// this.ctx.reset()
    815. 			this.ctx.clearRect(0, 0, this.cWidth, this.cHeight)
    816.  
    817. 			// 绘制行数
    818. 			this.drawLine()
    819.  
    820. 			// 绘制最右侧线条
    821. 			this.ctx.beginPath()
    822. 			this.ctx.moveTo(this.maxX - this.tWrapScrollLeft, 0)
    823. 			this.ctx.lineTo(this.maxX- this.tWrapScrollLeft, this.maxY)
    824. 			this.ctx.stroke()
    825.  
    826. 			// 滑块绘制
    827. 			for (let i = 0; i < this.items.length; i++) {
    828.  
    829. 				let item = JSON.parse(JSON.stringify(this.items[i]))
    830.  
    831. 				item.tLeft = item.tLeft - this.tWrapScrollLeft
    832. 				item.tTop = item.tTop - this.tWrapScrollTop
    833.  
    834. 				this.drawHk(item)
    835.  
    836. 				if (this.moveAbled && this.moveItem) {
    837.  
    838. 					let _item = JSON.parse(JSON.stringify(this.moveItem))
    839.  
    840. 					_item.tLeft = _item.tLeft - this.tWrapScrollLeft
    841. 					_item.tTop = _item.tTop - this.tWrapScrollTop
    842.  
    843. 					this.ctx.save()
    844. 					this.ctx.globalAlpha = 0.3
    845. 					this.drawHk(_item)
    846. 					this.ctx.restore()
    847.  
    848. 				}
    849.  
    850. 			}
    851.  
    852. 			if(this.alignLine) {
    853. 				// 绘制对齐虚线
    854. 				this.ctx.save()
    855. 				this.ctx.strokeStyle = 'white'
    856. 				this.ctx.setLineDash([5,5])
    857. 				this.ctx.lineWidth = 2
    858. 				this.ctx.beginPath()
    859. 				this.ctx.moveTo(this.alignLine.left - this.tWrapScrollLeft, this.alignLine.top)
    860. 				this.ctx.lineTo(this.alignLine.left - + this.tWrapScrollLeft, this.alignLine.top+this.alignLine.height)
    861. 				this.ctx.stroke()
    862. 				this.ctx.restore()
    863. 			}
    864.  
    865. 			// 绘制标尺
    866. 			this.drawStaff()
    867.  
    868. 		},
    869.  
    870. 		/**
    871. 		 * 标尺绘制
    872. 		 */
    873. 		drawStaff() {
    874. 			this.ctx.save()
    875. 			if(this.alignStaff) {
    876. 				this.ctx.fillStyle = 'pink'
    877. 			} else {
    878. 				this.ctx.fillStyle = 'white'
    879. 			}
    880. 			
    881. 			this.ctx.fillRect(this.minX + this.currentTime * 10 - 1 - this.tWrapScrollLeft, 0, 2, this.cHeight)
    882. 			this.ctx.restore()
    883. 		},
    884.  
    885. 		/**
    886. 		 * 行数绘制
    887. 		 */
    888. 		drawLine() {
    889.  
    890. 			for (let i = 0; i < this.items.length; i++) {
    891. 				this.ctx.save()
    892. 				this.ctx.beginPath()
    893. 				this.ctx.fillStyle = 'yellow'
    894. 				this.ctx.fillRect(this.minX - this.tWrapScrollLeft, this.minY + 5 + this.lineHeight * i + 5 * i - this.tWrapScrollTop, this.cMaxWidth, this.lineHeight)
    895. 				this.ctx.fill()
    896. 				this.ctx.restore()
    897. 			}
    898.  
    899. 		},
    900.  
    901. 		/**
    902. 		 * 滑块绘制
    903. 		 */
    904. 		drawHk(item) {
    905. 			// 绘制滑块
    906. 			this.ctx.save()
    907. 			this.ctx.fillStyle = 'red'
    908.  
    909. 			this.ctx.beginPath()
    910. 			this.ctx.roundRect(item.tLeft, item.tTop, item.tWidth, item.tHeight, 3)
    911. 			// this.ctx.fillRect(item.tLeft, item.tTop, item.tWidth, item.tHeight)
    912. 			this.ctx.fill()
    913. 			this.ctx.restore()
    914.  
    915. 			if (item.active) {
    916. 				// 绘制编辑框
    917. 				this.ctx.save()
    918.  
    919. 				// 左按钮
    920. 				this.ctx.beginPath()
    921. 				this.ctx.roundRect(item.tLeft, item.tTop, this.btnWidth, item.tHeight, [3, 0, 0, 3])
    922. 				this.ctx.fillStyle = 'gray'
    923. 				this.ctx.fill()
    924.  
    925. 				let _w = 2
    926. 				let _h = 12
    927. 				this.ctx.fillStyle = 'white'
    928. 				this.ctx.fillRect(item.tLeft + (this.btnWidth - _w * 3) / 2, item.tTop + (item.tHeight - _h) / 2, _w, _h)
    929. 				this.ctx.fillRect(item.tLeft + (this.btnWidth - _w * 3) / 2 + _w * 2, item.tTop + (item.tHeight - _h) / 2, _w, _h)
    930.  
    931.  
    932. 				// 右按钮
    933. 				this.ctx.beginPath()
    934. 				this.ctx.roundRect(item.tLeft + item.tWidth - this.btnWidth, item.tTop, this.btnWidth, item.tHeight, [0, 3, 3, 0])
    935.  
    936. 				this.ctx.fillStyle = 'gray'
    937. 				this.ctx.fill()
    938.  
    939. 				this.ctx.fillStyle = 'white'
    940. 				this.ctx.fillRect(item.tLeft + item.tWidth - this.btnWidth + (this.btnWidth - _w * 3) / 2, item.tTop + (item.tHeight - _h) / 2, _w, _h)
    941. 				this.ctx.fillRect(item.tLeft + item.tWidth - this.btnWidth + (this.btnWidth - _w * 3) / 2 + _w * 2, item.tTop + (item.tHeight - _h) / 2, _w, _h)
    942.  
    943. 				// 外边框
    944. 				this.ctx.beginPath()
    945. 				this.ctx.strokeStyle = "black"
    946. 				this.ctx.lineWidth = 1
    947. 				this.ctx.roundRect(item.tLeft+1, item.tTop+1, item.tWidth-2, item.tHeight-2, 3)
    948. 				this.ctx.stroke()
    949.  
    950. 				// 文本
    951. 				this.ctx.fillStyle = 'white'
    952. 				this.ctx.font = "20px serif"
    953. 				this.ctx.textBaseline = 'middle'
    954. 				this.ctx.fillText('测试文本sssssswqwqwqwqwqwq', item.tLeft + this.btnWidth + 10, item.tTop + item.tHeight / 2, item.tWidth - this.btnWidth * 2 - 20)
    955.  
    956. 				this.ctx.restore()
    957. 			} else {
    958. 				// 文本
    959. 				this.ctx.fillStyle = 'white'
    960. 				this.ctx.font = "20px serif"
    961. 				this.ctx.textBaseline = 'middle'
    962. 				this.ctx.fillText('测试文本sssssswqwqwqwqwqwq', item.tLeft + this.btnWidth + 10, item.tTop + item.tHeight / 2, item.tWidth - this.btnWidth * 2 - 20)
    963. 			}
    964. 		}
    965. 	}
    966. }
    967.  
    968. script>
    969.  
    970. <style lang="scss" scoped>
    971. .main-container {
    972. 	margin: 50px;
    973. 	position: relative;
    974. 	width: 700px;
    975. 	height: 300px;
    976. 	background-color: green;
    977. 	overflow: auto;
    978.  
    979. 	#tl-canvas {
    980. 		z-index: 11;
    981. 		position: sticky;
    982. 		top: 0;
    983. 		left: 0;
    984. 		width: 700px;
    985. 		height: 300px;
    986. 	}
    987.  
    988. 	.hidden-box {
    989. 		position: absolute;
    990. 		top: 0;
    991. 		left: 0;
    992. 		z-index: -1;
    993. 		opacity: 0;
    994. 		width: 1000px;
    995. 		height: 500px;
    996. 	}
    997. }
    998. style>
    999.  
    1000.  
    1001.  
    1002.

     

     

  • 相关阅读:
    板卡的分级调试经验
    vue-admin-template改变接口地址
    【OpenVINO】量化流程
    微信小程序——CSS3渐变
    如何使用环境变量运行bat脚本（开启数据库db）
    竞赛选题 深度学习验证码识别 - 机器视觉 python opencv
    核密度分析
    蓝桥杯模拟赛：最远滑行距离 ← dfs
    Harmony Codelab 样例—弹窗基本使用
    【LRUCache】Python缓存装饰器
  • 原文地址：https://blog.csdn.net/qq_31851435/article/details/134039029