修复相连的时间段绘制出来存在间隔的问题

wanglin2 · Jan 31, 2023 · 29d2ce7 · 29d2ce7
1 parent d353354
commit 29d2ce7
Show file tree

Hide file tree

Showing 9 changed files with 17 additions and 8 deletions.
diff --git a/dist/css/app.100dccbe.css → dist/css/app.7914b701.css b/dist/css/app.100dccbe.css → dist/css/app.7914b701.css
diff --git a/dist/js/app.f3ee5431.js → dist/js/app.5e235516.js b/dist/js/app.f3ee5431.js → dist/js/app.5e235516.js
diff --git a/dist/js/app.5e235516.js.map b/dist/js/app.5e235516.js.map
diff --git a/dist/js/app.f3ee5431.js.map b/dist/js/app.f3ee5431.js.map
diff --git a/dist/js/chunk-vendors.33d40f40.js → dist/js/chunk-vendors.590eac69.js b/dist/js/chunk-vendors.33d40f40.js → dist/js/chunk-vendors.590eac69.js
diff --git a/dist/js/chunk-vendors.33d40f40.js.map → dist/js/chunk-vendors.590eac69.js.map b/dist/js/chunk-vendors.33d40f40.js.map → dist/js/chunk-vendors.590eac69.js.map
diff --git a/index.html b/index.html
@@ -1 +1 @@
-<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="dist/favicon.ico"><title>demo</title><script defer="defer" src="dist/js/chunk-vendors.33d40f40.js"></script><script defer="defer" src="dist/js/app.f3ee5431.js"></script><link href="dist/css/chunk-vendors.4e2d36cb.css" rel="stylesheet"><link href="dist/css/app.100dccbe.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
+<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="dist/favicon.ico"><title>demo</title><script defer="defer" src="dist/js/chunk-vendors.590eac69.js"></script><script defer="defer" src="dist/js/app.5e235516.js"></script><link href="dist/css/chunk-vendors.4e2d36cb.css" rel="stylesheet"><link href="dist/css/app.7914b701.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
diff --git a/package/package.json b/package/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@wanglin1994/video-timeline",
- "version": "0.1.5",
+ "version": "0.1.6",
  "description": "一个基于Vue2的时间轴组件，一般用于监控视频的回放。",
  "main": "index.js",
  "scripts": {},

diff --git a/package/src/index.vue b/package/src/index.vue
@@ -176,6 +176,11 @@ export default {
  type: Number,
  default: 3
  },
+ // 绘制时间段时对计算出来的坐标进行四舍五入，可以防止相连的时间段绘制出来有间隔的问题
+ roundWidthTimeSegments: {
+ type: Boolean,
+ default: true
+ }
  },
  data() {
  return {
@@ -458,6 +463,10 @@ export default {
  }
  let heightStartRatio = item.startRatio === undefined ? 0.6 : item.startRatio
  let heightEndRatio = item.endRatio === undefined ? 0.9 : item.endRatio
+ if (this.roundWidthTimeSegments) {
+ x = Math.round(x)
+ w = Math.round(w)
+ }
  if (path) {
  this.ctx.rect(
  x,