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]
            }));
相关推荐
打不着的大喇叭8 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui8 小时前
uniapp启动图被拉伸问题
uni-app
iOS阿玮10 小时前
AppStore教你一招免备案的骚操作!
uni-app·app·apple
ModyQyW1 天前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
耶啵奶膘2 天前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘2 天前
uniapp——地图路线绘制map
uni-app
shadouqi2 天前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩2 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
不写八个2 天前
PixiJS教程(004):点击事件交互
canvas·pixijs
菌菇汤2 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app