uniapp中使用leaferui使用Canvas绘制复杂异形表格的实现方法

需求:

如下图,要实现左图的样式,先实现框架,文字到时候 往里填就行了,原来的解决方案是想用css,html来实现,发现实现起来蛮麻烦的。我也没找到合适的实现方法,最后换使用canvas来实现,使用的js库是leaferui

1.安装:用game是因为有一些交互,反正体积也不大

npm install leafer-game

2.wxml

html 复制代码
    <canvas
            :style="'width:'+cabox.width+'px;height:'+cabox.height+'px;'"
            id="leafer"
            type="2d"
            :width="cabox.width"
            :height="cabox.height"
            catchtouchstart="receiveEvent"
            catchtouchmove="receiveEvent"
            catchtouchend="receiveEvent"
            catchtouchcancel="receiveEvent"
    ></canvas>

3.javascript

javascript 复制代码
  lf = new Leafer({view: window, width: that.cabox.width, height: that.cabox.height})
            lf.add(Rect.one(0,0,that.cabox.width,that.cabox.height));
            lf.add(Rect.one({width: that.cabox.width, height: that.cabox.height, strokeWidth: 2, stroke: "black",}));
            lf.add(Rect.one({
                strokeWidth: 2,
                stroke: "black",
                width: (that.cabox.perBox * 11.5),
                height: (that.cabox.perBox * 11.5),
                x: that.cabox.perBox * 1.75,
                y: that.cabox.perBox * 1.75
            }));
            lf.add(Rect.one({
                strokeWidth: 2,
                stroke: "black",
                width: (that.cabox.perBox * 9),
                height: (that.cabox.perBox * 9),
                x: that.cabox.perBox * 3,
                y: that.cabox.perBox * 3
            }));
            lf.add(Line.one({
                stroke: "black",
                strokeWidth: 2,
                points: [0, 0, that.cabox.perBox * 3, that.cabox.perBox * 3]
            }));
            lf.add(Line.one({
                stroke: "black",
                strokeWidth: 2,
                points: [that.cabox.width, 0, that.cabox.perBox * 12, that.cabox.perBox * 3]
            }));
            lf.add(Line.one({
                stroke: "black",
                strokeWidth: 2,
                points: [that.cabox.width, that.cabox.height, that.cabox.perBox * 12, that.cabox.perBox * 12]
            }));
            lf.add(Line.one({
                stroke: "black",
                strokeWidth: 2,
                points: [0, that.cabox.height, that.cabox.perBox * 3, that.cabox.perBox * 12]
            }));
            lf.add(Line.one({
                stroke: "black",
                strokeWidth: 2,
                points: [that.cabox.perBox*6, 0, that.cabox.perBox*6, that.cabox.height]
            }));
            lf.add(Line.one({
                stroke: "black",
                strokeWidth: 2,
                points: [that.cabox.perBox*9, 0, that.cabox.perBox*9, that.cabox.height]
            }));
            lf.add(Line.one({
                stroke: "black",
                strokeWidth: 2,
                points: [0, that.cabox.perBox*6, that.cabox.width, that.cabox.perBox*6]
            }));
            lf.add(Line.one({
                stroke: "black",
                strokeWidth: 2,
                points: [0, that.cabox.perBox*9, that.cabox.width, that.cabox.perBox*9]
            }));
相关推荐
web_Hsir3 小时前
uniapp 微信小程序项目中 地图 map组件 滑动面板
微信小程序·uni-app·notepad++
平凡的阿泽6 小时前
uniapp编译的app在ios上内存泄漏了
uni-app
大叔_爱编程7 小时前
wx203基于ssm+vue+uniapp的教学辅助小程序
vue.js·小程序·uni-app·毕业设计·ssm·源码·课程设计
咸虾米_17 小时前
uniapp微信小程序获取用户手机号uniCloud云开发版
微信小程序·小程序·uni-app·unicloud·获取手机号
伊泽瑞尔.1 天前
uniapp自定义目录tree(支持多选、单选、父子联动、全选、取消、目录树过滤、异步懒加载节点、v-model)vue版本
uni-app
lyz2468591 天前
uniapp uni-swipe-action滑动内容排版改造
uni-app
IT19951 天前
uniapp笔记-自定义分类组件
前端·笔记·uni-app
MaCa .BaKa1 天前
27-衣橱管理系统(小程序)
java·vue.js·spring boot·小程序·架构·uni-app·maven
Json____1 天前
使用uni-app框架 写电商商城前端h5静态网站模板项目-手机端-前端项目练习
前端·uni-app·h5电商·手机端商城·前端手机端商城·静态商城
耶啵奶膘1 天前
uniapp-小程序地图展示
javascript·小程序·uni-app