feat: support custom render

Gitjinfeiyang · Mar 17, 2021 · f63260f · f63260f
1 parent 9656453
commit f63260f
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 5 deletions.
diff --git a/dist/easy-canvas.min.js b/dist/easy-canvas.min.js
diff --git a/dist/easy-canvas.min.js.map b/dist/easy-canvas.min.js.map
diff --git a/example/custom-render.html b/example/custom-render.html
@@ -0,0 +1,81 @@
+<!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 })
+
+            const node = easyCanvas.createElement((h) => {
+                return h('view', { styles: { backgroundColor: '#fff' } }, [
+                    this.drawTicket(h),
+                    h('view',{
+                        styles:{
+                            height:100,
+                            padding:10
+                        },
+                        render(ctx,canvas,target){
+                            const {x,y} = target
+                            console.log(target)
+                            const {contentWidth,contentHeight} = target.renderStyles
+                            ctx.beginPath()
+                            ctx.quadraticCurveTo(x+10,y+30,x+100,y+50)
+                            ctx.quadraticCurveTo(x+10,y+30,x+100,y+100)
+                            ctx.closePath()
+                            ctx.stroke()
+                        }
+                    },[
+                        h('text',{},'自定义render,支持操作ctx绘制，并且可以获取到布局信息。')
+                    ])
+                ])
+            })
+            node.mount(layer)
+            console.log(node)
+        }
+
+        // 注册全局组件
+        canvas.ontouchstart = ontouchstart
+        canvas.ontouchmove = ontouchmove
+        canvas.ontouchend = ontouchend
+        canvas.onmousedown = ontouchstart
+        canvas.onmousemove = ontouchmove
+        canvas.onmouseup = ontouchend
+    </script>
+</body>
+
+</html>
diff --git a/example/index.html b/example/index.html
@@ -51,8 +51,9 @@
             { title: 'Image 图片', desc: '图片缩放类型', url: 'image.html' },
             { title: 'Components 组件库', desc: 'UI组件库示例', url: 'ui.html' },
             { title: 'Event 事件', desc: '事件监听', url: 'event.html' },
+            { title: 'Custom render 自定义render', desc: '自定义render，操作ctx绘图', url: 'custom-render.html' },
+            { title: '"Dom" 操作element', desc: '类似修改dom的能力', url: 'change-element.html' },
             { title: 'Demo', desc: '展示了滚动、事件、flex布局、文本换行对齐等能力', url: 'test.html' },
-            { title: '操作element', desc: '类似修改dom的能力', url: 'change-element.html' },
             { title: 'Test', desc: '测试用', url: 'test1.html' },
         ]
 

diff --git a/lib/view.js b/lib/view.js
@@ -17,8 +17,12 @@ export default class View extends Element {
   }
 
   _paint() {
-    this.getRender()._drawBackground(this)
-    this.getRender()._drawBox(this)
+    if(this.options.render){
+      this.options.render(this.getRender().getCtx(),this.getRender().getCanvas(),this)
+    }else{
+      this.getRender()._drawBackground(this)
+      this.getRender()._drawBox(this)
+    }
   }