|
|
|
|
公众号矩阵

从微信小程序到鸿蒙JS开发-canvas&stack&2048

文章由鸿蒙社区产出,想要了解更多内容请前往:51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com

作者:Chris来源:鸿蒙社区|2021-02-23 12:23

想了解更多内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

春节在家回看了张荣超老师的“从零开发鸿蒙小游戏APP“直播课(https://harmonyos.51cto.com/activity/17),听完后在手机设备上完善了功能并实现了一个简单的2048小游戏。这其中涉及到canvas和stack组件,在此做一些笔记。效果图:

1、canvas组件

画布组件,微信小程序也有,可以在其中动态绘制图形和文字等。在2048游戏中,不同的数字对应的背景颜色都不同,如果使用动态样式,判断和渲染对性能的要求会很高。

  1. <canvas class="content" id="canvas" onswipe="swipeGrids"></canvas> 

1.1 获取绘图上下文

组件给定id或者ref,即可在js中获取组件绘图上下文,通过获取的CanvasRenderingContext2D对象进行绘图。官方文档提及获取绘图上下文的操作不支持在onInit和onReady中进行调用,经实验如在onInit()中执行应用将白屏,在onReady()中执行画布中的内容将无法被绘制,故需写在onShow()中。

  1. // 绘图对象 
  2. var canvas; 
  3.  
  4. export default { 
  5.     data: { 
  6.     ... 
  7.     }, 
  8.     onShow() { 
  9.         canvas = this.$element("canvas").getContext("2d"); 
  10.         // 绘图 
  11.         this.drawGrids(); 
  12.     }, 
  13. ... 

对于会在多个方法之内使用的全局变量,可以写在data中,也可以写在export之外。对于无需在页面中绑定的数据,写在export外或许可以提高一点性能。

1.2 监听滑动事件

在画布中滑动的事件绑定是通过onswipe属性,这个在官方文档中没有说明,但是IDE是有提示的。对于方法的入参,打日志后看出结构如下:

event.direction有四种取值:up/down/left/right,可用于判断滑动方向。

1.3 绘制矩形

  1. canvas.fillStyle = "#ffffff"

获取绘图上下文对象后,将其fillStyle属性设置为十六进制颜色即可设置本次绘图的颜色。也可使用createLinearGradient()给定渐变色,createPattern()创建填充模版。

  1. canvas.fillRect(leftTopX, leftTopY, gridWidth, gridWidth); 

fillRect()方法用于绘制矩形,四个参数分别为左上角X坐标,左上角Y坐标,宽度,高度。

1.4 绘制文字

  1. canvas.font = "70px HYQiHei-65S"
  2. canvas.fillStyle = gridTxColors[gridVal]; 

font属性指定文字的大小和字体,fillStyle指定文字的颜色。

  1. canvas.fillText(text, leftBottomX, leftBottomY); 

fillText()方法用于绘制文字,三个参数分别为文字内容,左下角X坐标,左下角Y坐标。这里后两个参数是左下角,和微信小程序以及刚才提到的fillRect()不同。

绘制2048格子及文字的方法:

  1. // 绘制格子 grids:存储数字的二维数组; gridBgColors:存储格子背景色的对象; gridTxColors:存储文字颜色的对象 
  2.     drawGrids() { 
  3.         for (let r = 0; r < 4; r++) { 
  4.             for (let c = 0; c < 4; c++) { 
  5.                 let gridVal = grids[r][c].toString(); 
  6.                 // 绘制背景 
  7.                 canvas.fillStyle = gridBgColors[gridVal]; 
  8.                 let leftTopX = c * (gridWidth + gridMargin) + gridMargin; 
  9.                 let leftTopY = r * (gridWidth + gridMargin) + gridMargin; 
  10.                 // 左上角x 左上角y 宽度 高度 
  11.                 canvas.fillRect(leftTopX, leftTopY, gridWidth, gridWidth); 
  12.                 // 绘制文字 
  13.                 canvas.font = "70px HYQiHei-65S"
  14.                 if (gridVal != "0") { 
  15.                     if (gridVal == "2" || gridVal == "4") { 
  16.                         canvas.fillStyle = gridTxColors[gridVal]; 
  17.                     } else { 
  18.                         canvas.fillStyle = gridTxColors["others"]; 
  19.                     } 
  20.                     let offsetX = (4 - gridVal.length) * (gridWidth / 8); 
  21.                     let offsetY = (gridWidth - fontSize) / 2; 
  22.                     // 文字 左下角x 左下角y 
  23.                     canvas.fillText(gridVal, leftTopX + offsetX, leftTopY + offsetY + fontSize - 5); 
  24.                 } 
  25.             } 
  26.         } 
  27.     }, 

每次数字改变后,调用以上方法即可将2048的效果绘制出。

2、stack组件

这个组件很有意思,在stack中的子元素会顺序入栈,实现堆叠效果。一般都是通过z-index的样式实现,而鸿蒙这里的实现将数据结构的栈与页面层级相结合,非常巧妙。

在游戏结束时,提示文字将覆盖格子区域:

  1. <stack class="content"
  2.       <canvas class="content" id="canvas" onswipe="swipeGrids"></canvas> 
  3.       <div show="{{ isEnd }}"
  4.           <text> 
  5.               游戏结束 
  6.           </text> 
  7.       </div> 
  8.   </stack> 

事实上,鸿蒙js组件是不支持z-index样式的。

想了解更多内容,请访问:

51CTO和华为官方战略合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

【编辑推荐】

  1. 为什么你总是学不会Python,入门Python的4大陷阱
  2. 厌倦了默认系统字体?这是在Windows 10上进行更改的方法
  3. 5G手机热销之前,要先解决这些问题
  4. 手把手教你用Python爬取百度搜索结果并保存
  5. 揭秘登上2021春晚舞台的黑科技-XR技术
【责任编辑:jianghua TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

数据湖与数据仓库的分析实践攻略

数据湖与数据仓库的分析实践攻略

助力现代化数据管理:数据湖与数据仓库的分析实践攻略
共3章 | 创世达人

6人订阅学习

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

34人订阅学习

数据中心和VPDN网络建设案例

数据中心和VPDN网络建设案例

漫画+案例
共20章 | 捷哥CCIE

221人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微