自适应坐标轴

hans · hans · commit eedc985b82b7 · 2019-08-15T22:33:31.000+08:00
diff --git a/canvas/chart/index.html b/canvas/chart/index.html
@@ -39,16 +39,22 @@
     { text: 'userK', user: 'userK', time: 1565785250705 - 80000, like: 100 },
   ]
   
-  let { offsetWidth: w, offsetHeight: h } = canvas
-  let scene = new Scene(ctx, w, h)
+  let { offsetWidth: width, offsetHeight: height } = canvas
+  let scene = new Scene(data, {
+    ctx,
+    width,
+    height
+  })
   $('.btn').addEventListener('click', _=> {
     let num = rand(1, 15)
     console.log('添加了' + num);
     scene.add(new Tile(scene, num))
   })
 
+
   function rand(min, max, decimal=0) {
     return +((max-min) * Math.random() + min).toFixed(decimal)
   }
+
 </script>
 </html>
diff --git a/canvas/chart/scene.js b/canvas/chart/scene.js
@@ -1,5 +1,5 @@
 class Scene {
-  static ruler = 20
+  static range = 10
   constructor(ctx, width, height) {
     this.ctx = ctx
     this.width = width
@@ -9,20 +9,44 @@ class Scene {
   }
   init() {
     this.tiles = []
+    this.cd = 50
+    this.tiles.push(new Tile(this, 3))
+    this.tiles.push(new Tile(this, 1))
+    this.tiles.push(new Tile(this, 2))
+    this.tiles.push(new Tile(this, 5))
+    this.tiles.push(new Tile(this, 4))
+    this.mark = new Date()
     this.update()
   }
+  canChange() {
+    return Date.now() - this.mark >= this.cd
+  }
   sort() {
     this.tiles.sort((a, b) => b.value - a.value)
   }
   add(tile) {
     this.tiles.push(tile)
   }
+  updateRuler() {
+    let maxObj = this.tiles[0]
+    if (!maxObj) return
+    let max = maxObj.value
+    let dv = 10 ** ((~~max).toString().length) * 0.2
+    let newRng = Math.ceil(max / dv) * dv
+    if (Scene.range !== newRng) {
+      this.filling = true
+    }
+    Scene.range = newRng
+  }
   update() {
     this.ctx.clearRect(0, 0, this.width, this.height)
     this.sort()
+    this.updateRuler()
     this.tiles.slice(0, this.count).forEach((e, i) => {
+      this.filling && (e.filling = true)
       e.update(i)
     })
+    this.filling = false
     requestAnimationFrame(this.update.bind(this))
   }
 }
@@ -42,19 +66,25 @@ class Tile {
     this.width = 0
     this.currVal = 0
     this.filled = false
-    this.W = this.value * width / Scene.ruler
+    this.W = this.value * width / Scene.range
     this.posX = 0
     this.posY = this.order * Tile.TOTAL_HEIGHT
     this.segment = 50
     this.dw = this.W / this.segment
     this.dv = this.value / this.segment
     this.dy = 0
+    this.index = 0
+    this.filling = true
+  }
+  getWidth() {
+    let { width } = this.scene
+    return this.value * width / Scene.range
   }
   render() {
     let { ctx } = this.scene
     ctx.fillRect(this.posX, this.posY, this.width, this.height)
     ctx.font = '16px 黑体'
-    ctx.fillText(this.currVal, this.width + 16, this.posY + (14 + Tile.BAR_HEIGHT) / 2)
+    ctx.fillText(this.value, this.width + 16, this.posY + (14 + Tile.BAR_HEIGHT) / 2)
   }
   exchange(i) {
     let Y = i * Tile.TOTAL_HEIGHT
@@ -66,19 +96,22 @@ class Tile {
     if (this.dy > 0) this.posY = Math.min(this.posY, Y)
     if (this.dy < 0) this.posY = Math.max(this.posY, Y)
   }
-  filling() {
-    if (!this.filled) {
-      this.width += this.dw
-      this.currVal += this.dv
-      this.currVal = +this.currVal.toFixed(2)
+  stretch() {
+    if (this.index === 0) {
+      let W = this.getWidth()
+      this.dw = (W - this.width) / this.segment
+      this.index = 0
     }
-    if (this.width >= this.W) {
-      this.filled = true
+    if (this.index++ === this.segment) {
+      this.filling = false
+      this.index = 0
+      return
     }
+    this.width += this.dw
   }
   update(i) {
-    this.filling()
     this.exchange(i)
+    this.filling && this.stretch()
     this.render()
   }
 }
