demo.gif

实现这个小游戏, 需要哪些知识点了？

一. 加载图片

Future<ui.Image> getImage(String path) async { ByteData data = await rootBundle.load(path); ui.Codec codec = await ui.instantiateImageCodec(data.buffer.asUint8List()); FrameInfo frameInfo = await codec.getNextFrame(); image = frameInfo.image; return image; } 

二. 绘图api

在flutter中有着跟android近乎一样的canvas API. 但是也有些差异

1. Android中的Rect.offset/Rect.offsetTo直接生效, 对应flutter中的React.shift, 结果在返回值里.
2. Android中的画布通过bitmap构建canvas, 接着直接调用canvas绘制, 绘制的内容就跑到bitmap上了, 而在flutter里需要这样

PictureRecorder recorder = PictureRecorder(); Canvas canvas = Canvas(recorder, Rect.fromLTWH(0.0, 0.0, width, height)); canvas.drawXXX(); ... Image image = canvas.endRecording().toImage(saveWidth, saveHeight); //保存 image.toByteData(format: ImageByteFormat.png).then((data) { File file = File(path); file.writeAsBytes(data.buffer.asUint8List()); }) 

3. Android里绘制文字比较直观, 通过paint设置蚕食, 然后直接canvas.drawText, flutter里第一次用有点周折

ParagraphBuilder pb = ParagraphBuilder(ParagraphStyle( textAlign: TextAlign.center, fontWeight: FontWeight.w300, fontStyle: FontStyle.normal, fontSize: hitNode == node ? 20.0 : 15.0, )); pb.pushStyle(ui.TextStyle(color: Color(0xff00ff00))); pb.addText('${node.index + 1}');ParagraphConstraints pc = ParagraphConstraints(width: node.rect.width); //这里需要先layout, 后面才能获取到文字高度 Paragraph paragraph = pb.build()..layout(pc); //文字居中显示 Offset offset = Offset(node.rect.width * (node.curIndex%level), node.rect.width * ((node.curIndex/level).floor() + 0.5) - paragraph.height/2); canvas.drawParagraph(paragraph, offset); 

三. 动画

Android里有属性动画, Flutter也有对应的动画, 但是多了个AnimationController.dispose调用

AnimationController controller = AnimationController( vsync: this, duration: const Duration(milliseconds: 1000), ); ani = IntTween(begin: 0, end: 100).animate(controller); ani.addListener(() { print(ani.value); }) controller.forward(); //释放资源 controller.dispose(); 

四. 实现差异

Android里可以直接在自定义View里写完所有代码(绘制和交互逻辑), 调用上层完全不需要关心内部如何实现. 状态变更直接View.invalidate.
而在flutter里需要实现CustomPainter, 它只负责显示(绘制). 而状态变更和交互逻辑则写在StateWidget里. 这也符合flutter通过状态管理的理念.
只不过要传递大量参数到下层, 稍显麻烦, 仅仅只是为了一个draw(显示).

五. 游戏可解性

可以通过计算这个排列的逆序数个数加空格位置的坐标, 最终得到的数的奇偶性判断, 如果不ok, 再继续生成直到ok.

github传送

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://www.dengtar.com/17663.html