feat: scroll-view支持x y方向同时滚动，性能优化

Gitjinfeiyang · Sep 9, 2020 · 52bd369 · 52bd369
1 parent e5cd6f8
commit 52bd369
Show file tree

Hide file tree

Showing 11 changed files with 293 additions and 119 deletions.
diff --git a/dist/easy-canvas.min.js b/dist/easy-canvas.min.js
diff --git a/example/draw.js b/example/draw.js
@@ -147,31 +147,29 @@ function drawListItem(h, tag) {
 }
 function drawButton(h, text = 'text', options = {}) {
   return h(
-    'view',
-    Object.assign({
-      styles: {
-        height: 20,
-        backgroundColor: '#ff6c79',
-        borderRadius: 10,
-        borderColor: '#fff',
-        margin: 2,
-        display: 'inline-block',
-        paddingLeft: 10,
-        paddingRight: 10,
-        verticalAlign: 'middle'
-      },
-      on: {
-        click(e) {
-          console.log(e)
-        }
+    'view', {
+    styles: {
+      height: 20,
+      backgroundColor: '#ff6c79',
+      borderRadius: 10,
+      borderColor: '#fff',
+      margin: 2,
+      display: 'inline-block',
+      paddingLeft: 10,
+      paddingRight: 10,
+      lineHeight: 16,
+    },
+    on: {
+      click(e) {
+        console.log(e)
       }
-    }, options),
+    }
+  },
     [
       h(
         'text',
         {
           styles: {
-            lineHeight: 16,
             color: options.color || '#fff',
             textAlign: 'center',
             fontSize: 11,
@@ -239,6 +237,7 @@ function drawInlineBlock(h) {
           paddingLeft: 10,
           paddingRight: 10,
           display: 'inline-block',
+          lineHeight: 16
         },
       },
       [
@@ -286,7 +285,7 @@ function drawCard(h) {
         borderStyle: 'dash',
         shadowColor: '#999',
         shadowBlur: 20,
-        shadowOffsetY:10,
+        shadowOffsetY: 10,
       },
     },
     [
@@ -523,7 +522,7 @@ function drawTicket(h) {
             color: '#fff'
           }
         }, [
-          h('text', {styles:{lineHeight: 24,}}, '领取')
+          h('text', { styles: { lineHeight: 24, } }, '领取')
         ])
       ])
     ]),
@@ -586,6 +585,68 @@ function Dialog(h, options) {
 }
 
 
+const data = {
+  date: '2016-05-02',
+  name: '王小虎',
+  province: '上海',
+  city: '普陀区',
+  address: '上海市普陀区金沙江路 1518 弄',
+  zip: 200333,
+}
+function getTableData(count = 100) {
+  let list = []
+  for (let i = 0; i < count; i++) {
+    list.push(data)
+  }
+  return list
+}
+function drawTable(h) {
+  const tableData = getTableData(1000)
+  const tr = {
+    width: 700,
+    display: 'flex',
+    borderBottomWidth: 0.5,
+    borderColor: '#999',
+    padding: [10, 0],
+  }
+  const td = {
+    flex: 1,
+    color: '#666',
+    padding: [0, 5],
+    display: 'block',
+    maxLine: 1,
+  }
+  const th = {
+    flex: 1,
+    padding: [0, 5],
+    display: 'block',
+    maxLine: 1,
+    color: '#333',
+    textAlign: 'center',
+  }
+  const tdFirst = {
+    ...td,
+    color: '#333',
+    textAlign: 'center',
+    fontWeight: 800
+  }
+  return [
+    h('view', {
+      styles: tr
+    }, ['序号', '日期', '姓名', '地区', '城市', '详细地址', '邮编'].map(item => h('text', { styles: th }, item))),
+    ...tableData.map((item, index) => h('view', { styles: tr }, [
+      h('text', { styles: tdFirst }, index + 1),
+      h('text', { styles: td }, item.date),
+      h('text', { styles: td }, item.name),
+      h('text', { styles: td }, item.province),
+      h('text', { styles: td }, item.city),
+      h('text', { styles: td }, item.address),
+      h('text', { styles: td }, item.zip),
+    ]))
+  ]
+}
+
+
 function setLayer(_layer) {
   layer = _layer
 }

diff --git a/example/table.html b/example/table.html
@@ -0,0 +1,74 @@
+<!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">
+    <script src="https://cdn.jsdelivr.net/npm/eruda"></script>
+    <script>eruda.init();</script>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+
+<body style="background:#fff;">
+    <canvas id="canvas" style="width:100%; height:100%;position:fixed;"></canvas>
+
+    <script src="../dist/easy-canvas.min.js"></script>
+    <script src="./draw.js"></script>
+    <script>
+        window.onload = function () {
+            main()
+
+        }
+        window.onresize = function () {
+            main()
+        }
+
+        function main() {
+            const canvas = document.querySelector('#canvas')
+
+            const ctx = canvas.getContext('2d')
+            const dpr = window.devicePixelRatio
+            const w = window.innerWidth
+            const h = window.innerHeight
+            canvas.width = w * dpr
+            canvas.height = h * dpr
+            ctx.scale(dpr, dpr)
+            layer = easyCanvas.createLayer(ctx, { dpr, width: w, height: h, debug: false })
+
+            const node = easyCanvas.createElement((h) => {
+                return h('scroll-view', {
+                    styles: {
+                        width: w,
+                        height: window.innerHeight,
+                        direction: 'xy'
+                    },
+                    attrs: {
+                        renderOnDemand: true
+                    }
+                },
+                    [
+                        ...drawTable(h)
+                    ]
+                )
+            })
+
+            console.log(node)
+            node.mount(layer)
+        }
+
+        // 注册全局组件
+        canvas.ontouchstart = ontouchstart
+        canvas.ontouchmove = ontouchmove
+        canvas.ontouchend = ontouchend
+        canvas.onclick = onClick
+
+    </script>
+</body>
+
+</html>
diff --git a/example/test.html b/example/test.html
@@ -39,18 +39,18 @@
             canvas.width = w * dpr
             canvas.height = h * dpr
             ctx.scale(dpr, dpr)
-            layer = easyCanvas.createLayer(ctx, { dpr, width: w, height: h,debug:false })
+            layer = easyCanvas.createLayer(ctx, { dpr, width: w, height: h, debug: false })
 
             const node = easyCanvas.createElement((h) => {
                 return h('view', { styles: { backgroundColor: '#fff' } }, [
                     // this.drawBox(h),
                     this.drawSimple(h),
                     this.drawInlineBlock(h),
-                    this.drawCard(h),
+                    this.drawTicket(h),
                     this.drawScrollViewX(h),
-                    this.drawScrollView(h),
+                    this.drawListItem(h),
                     this.drawAbsolute(h),
-                    h('view', { styles: { textAlign: 'left',lineHeight:20,padding:5 } }, [
+                    h('view', { styles: { textAlign: 'left', lineHeight: 20, padding: 5 } }, [
                         ...('如果需要在text中间增加inline-block元素，请使用split将text分割成每个文字一个text元素，这种模式下maxline不生效，如果在最前面，请使用textIndent配合绝对定位'.split('').map(w => h('text', {}, w))),
                         h('button', { styles: { backgroundColor: '#ffd8bf' } }, 'Inline Block'),
                         h('text', { styles: { textIndent: 10 } }, '支持textIndent')

diff --git a/lib/canvas-render.js b/lib/canvas-render.js
@@ -337,12 +337,7 @@ export default class CanvasRender {
   }
 
   _drawScroll(element) {
-    const { direction } = element.renderStyles
-    if (direction === 'y') {
-      this.getCtx().translate(0, element.currentScroll)
-    } else {
-      this.getCtx().translate(element.currentScroll, 0)
-    }
+    this.getCtx().translate(element.currentScrollX, element.currentScrollY)
   }
 
   /**

diff --git a/lib/complete-styles.js b/lib/complete-styles.js
@@ -126,9 +126,9 @@ function _completeFlex(element) {
         element.styles.flex = 1
       }
     } else {
-      if (element.parent.styles.flexDirection === 'column' && !isExact(element.styles.height)) {
+      if (element.parent.styles.flexDirection === 'column' && isExact(element.styles.flex)) {
         element.styles.height = 0
-      } else if (element.parent.styles.flexDirection === 'row' && !isExact(element.styles.width)) {
+      } else if (element.parent.styles.flexDirection === 'row' && isExact(element.styles.flex)) {
         element.styles.width = 0
       }
     }

diff --git a/lib/constants.js b/lib/constants.js
@@ -47,7 +47,7 @@ const DEFAULT_STYLES = {
   borderRadius: 0,
   lineCap: 'square',
   flexDirection: FLEX_DIRECTION.ROW,
-  verticalAlign: 'top',
+  verticalAlign: 'middle',
   textAlign: 'left',
   justifyContent: 'flex-start',
   alignItems: 'flex-start',

diff --git a/lib/layer.js b/lib/layer.js
@@ -34,6 +34,9 @@ export default class Layer {
   }
 
   initRender() {
+    // for 打印耗时
+    const startTime = Date.now()
+
     TreeNode.connectChildren(this.node)
     this.p2cList = this.getP2CList(this.node)
     this.c2pList = breadthFirstSearchRight(this.node).reverse()
@@ -47,6 +50,7 @@ export default class Layer {
 
     this.repaint()
 
+    console.log(`渲染${this.p2cList.length}个元素 耗时 ${(Date.now() - startTime)} ms`)
   }
 
   getP2CList(el) {