当前位置：首页 > wzjs >正文

河南省财政厅经济建设网站数字化展厅设计方案

wzjs 2025/9/15 5:33:58

河南省财政厅经济建设网站,数字化展厅设计方案,短链接恢复长连接,网站开发和编程的联系需求： 如下图，要实现左图的样式，先实现框架，文字到时候往里填就行了，原来的解决方案是想用css,html来实现，发现实现起来蛮麻烦的。我也没找到合适的实现方法，最后换使用canvas来实现&#xff…

需求：

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

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

npm install leafer-game

2.wxml

    <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

  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]}));