支持大佬重写

[wozhizhizhi]

支持大佬重写，第一个版本代码看的有点痛苦😊

[lwlizhe]

额，我尽快，现在在忙提桶跑路的事~~~~

目前设想是搞一个基于listView这块的； 让阅读页基于widget而非以前的canvas，动画这块对RenderObject本身来做处理，使其跟Widget完全隔离，专注于动画层面； 不过分页逻辑这些改动应该不大~

[beyondbkcy]

@lwlizhe 可以做成插件吗

[lwlizhe]

@lwlizhe 可以做成插件吗

额……只能说，这个项目基于的listView的这块能做成插件，这也是我本来的目的； 其他地方就是业务涉及的部分，有很大的自定义性质，做成插件了反而不好自定义了%……总不能所有人都跟我用一个布局和样式吧~

[beyondbkcy]

@lwlizhe 我说仿真翻页那个效果，我现在要做一个图片加文字的pageview页面，切换效果就需要用到这个效果

[lwlizhe]

@lwlizhe 我说仿真翻页那个效果，我现在要做一个图片加文字的pageview页面，切换效果就需要用到这个效果

啊，这个啊，你直接复制 animation_page_simulation_turn.dart 文件，自己改改应该就行了，记得传入触摸事件的触摸点位置就可以了。当然别忘了触发其中的onDraw方法让绘制结果展示出来

[beyondbkcy]

@lwlizhe 还是不懂呀

[beyondbkcy]

@lwlizhe 你有时间能帮我弄弄吗

[wozhizhizhi]

大佬追书神器的接口好像不能用了，这个api还可以用，你可以试试https://easydoc.xyz/doc/45910076/WP3yrgI7/qiNSgnu3

[lwlizhe]

@lwlizhe 你有时间能帮我弄弄吗

额，这个其实不难的，你静下心来好好看一下，别那么急躁，分分钟就会用了； 我简单的跟你说下怎么弄；

如果你只是单纯想要翻页动画，那么步骤这样的： 1、拦截手势并调用onTouchEvent 传入； 2、触发绘制（比如说我这里就是用的markNeedsPaint 方法），并调用onDraw方法； 3、完事~~

涉及代码有widget_reader_content第63行的RawGestureDetector 部分；widget_reader_painter 的 20行 paint 方法；剩下的就是animation_page_simulation_turn 方法里面的部分，不过这块你也不用关心，高度内聚，只要传入手势和坐标参数，调用绘制方法就给你绘制到指定canvas上了

[lwlizhe]

大佬追书神器的接口好像不能用了，这个api还可以用，你可以试试https://easydoc.xyz/doc/45910076/WP3yrgI7/qiNSgnu3

okok，非常感谢，只是最近比较忙~几个面试在走，工作上也还没彻底离职；所以最近一段时间可能时间并不多；

考虑到这个项目只是学习性质，主要功能还真不是看小说那帮（好像这玩意最近打击蛮大的，搞不好还真可能进去了）；所以我计划是随重写部分、flutter2.0升级 一起完成，另外可能采用假数据啊，甚至是像网易云音乐那种本地代理方式来做小说内容部分处理，不过要是这个api比较稳定可靠，那换成这个倒也没问题；

[lwlizhe]

大佬追书神器的接口好像不能用了，这个api还可以用，你可以试试https://easydoc.xyz/doc/45910076/WP3yrgI7/qiNSgnu3

唉卧槽，这接口可以啊，还有漫画和视频，NB了唉； 粗略试了下漫画和视频，巨人这种也有；就是视频这块返回的是一个m3u8……没太搞懂怎么用

不过小说这块听全乎的，搜了下差不多都有……NB了

[beyondbkcy]

@lwlizhe你有时间能帮我弄弄吗

额，这个其实不难的，你静下心来好好看一下，别那么急躁，分分钟就会用了； 我简单的跟你说下怎么弄；

如果您 只是单纯的想要翻页动画，那么步骤这样的：1，拦截手势并在onTouchEvent上调用； 2，触发切换（称为说我这里就是用的markNeedsPaint方法），并在onDraw方法上调用； 3，完事〜 〜

涉及代码有widget_reader_content第63行的RawGestureDetector部分； widget_reader_painter的20行paint方法；剩下的就是animation_page_simulation_turn方法里面的部分，不过这块你也不用担心，高度内聚，只要用手势和坐标参数，应该注意方法就给你重新定位到指定画布上了

呜呜

[beyondbkcy]

@lwlizhe你有时间能帮我弄弄吗

额，这个其实不难的，你静下心来好好看一下，别那么急躁，分分钟就会用了； 我简单的跟你说下怎么弄；

如果您 只是单纯的想要翻页动画，那么步骤这样的：1，拦截手势并在onTouchEvent上调用； 2，触发切换（称为说我这里就是用的markNeedsPaint方法），并在onDraw方法上调用； 3，完事〜 〜

涉及代码有widget_reader_content第63行的RawGestureDetector部分； widget_reader_painter的20行paint方法；剩下的就是animation_page_simulation_turn方法里面的部分，不过这块你也不用担心，高度内聚，只要用手势和坐标参数，应该注意方法就给你重新定位到指定画布上了

看了好久都没看懂

[lwlizhe]

@lwlizhe你有时间能帮我弄弄吗

额，这个其实不难的，你静下心来好好看一下，别那么急躁，分分钟就会用了； 我简单的跟你说下怎么弄； 如果您 只是单纯的想要翻页动画，那么步骤这样的：1，拦截手势并在onTouchEvent上调用； 2，触发切换（称为说我这里就是用的markNeedsPaint方法），并在onDraw方法上调用； 3，完事〜 〜 涉及代码有widget_reader_content第63行的RawGestureDetector部分； widget_reader_painter的20行paint方法；剩下的就是animation_page_simulation_turn方法里面的部分，不过这块你也不用担心，高度内聚，只要用手势和坐标参数，应该注意方法就给你重新定位到指定画布上了

看了好久都没看懂

额，这样吧，你看下这个BookPage，他那还附有文字教程，这样比较好理解；我这个也不过是在上面稍微做了一丁点的优化，差别不大

[beyondbkcy]

@lwlizhe你有时间能帮我弄弄吗

额，这个其实不难的，你静下心来好好看一下，别那么急躁，分分钟就会用了； 我简单的跟你说下怎么弄； 如果您 只是单纯的想要翻页动画，那么步骤这样的：1，拦截手势并在onTouchEvent上调用； 2，触发切换（称为说我这里就是用的markNeedsPaint方法），并在onDraw方法上调用； 3，完事〜 直到涉及到代码有小部件_reader_content第63行的RawGestureDetector部分； widget_reader_painter的20行绘画方法；剩下的就是animation_page_simulation_turn方法里面的部分，不过这块你也不用担心，高度内聚，只要用手势和坐标参数，应该注意方法就给你重新定位到指定画布上了

看了好久都没看懂

额，这样吧，你看下这个书页，他那还附有文字教程，这样比较好理解；我这个也不过是在上面稍微做了一丁点的优化，分解不大

原生的我更加懵

[lwlizhe]

@lwlizhe你有时间能帮我弄弄吗

额，这个其实不难的，你静下心来好好看一下，别那么急躁，分分钟就会用了； 我简单的跟你说下怎么弄； 如果您 只是单纯的想要翻页动画，那么步骤这样的：1，拦截手势并在onTouchEvent上调用； 2，触发切换（称为说我这里就是用的markNeedsPaint方法），并在onDraw方法上调用； 3，完事〜 直到涉及到代码有小部件_reader_content第63行的RawGestureDetector部分； widget_reader_painter的20行绘画方法；剩下的就是animation_page_simulation_turn方法里面的部分，不过这块你也不用担心，高度内聚，只要用手势和坐标参数，应该注意方法就给你重新定位到指定画布上了

看了好久都没看懂

额，这样吧，你看下这个书页，他那还附有文字教程，这样比较好理解；我这个也不过是在上面稍微做了一丁点的优化，分解不大

原生的我更加懵

额……如果你看的比较困难，那先跟着他那教程来，自己走一遍，我当初也是看不懂最初的Android小说阅读器，后来这个大佬出了这个教程，跟着走一遍就明白了

[beyondbkcy]

@lwlizhe你有时间能帮我弄弄吗

额，这个其实不难的，你静下心来好好看一下，别那么急躁，分分钟就会用了； 我简单的跟你说下怎么弄； 如果您 只是单纯的想要翻页动画，那么步骤这样的：1，拦截手势并在onTouchEvent上调用； 2，触发切换（称为说我这里就是用的markNeedsPaint方法），并在onDraw方法上调用； 3，完事 直到直到涉及到代码有小部件_reader_content第63行的RawGestureDetector部分； widget_reader_painter的20行绘画方法；剩下的就是animation_page_simulation_turn方法里面的部分，不过这块你也不用担心，高度内聚，只要用手势和坐标参数，应该注意方法就给你重新定位到指定画布上了

看了好久都没看懂

额，这样吧，你看下这个书页，他那还附有文字教程，这样比较好理解；我这个也不过是在上面稍微做了一丁点的优化，分解不大

原生的我更加懵

额……如果你看的比较困难，那先跟着他那教程来，自己走一遍，我当初也是看不懂最初的Android小说阅读器，后来这个大佬出了这个教程，跟着走一遍就明白了

你能帮帮我吗，要多少¥

[wozhizhizhi]

好的大佬，这个不急，第一个版本我也还没完全搞懂，在摸索学习中

[lwlizhe]

@lwlizhe你有时间能帮我弄弄吗

额，这个其实不难的，你静下心来好好看一下，别那么急躁，分分钟就会用了； 我简单的跟你说下怎么弄； 如果您 只是单纯的想要翻页动画，那么步骤这样的：1，拦截手势并在onTouchEvent上调用； 2，触发切换（称为说我这里就是用的markNeedsPaint方法），并在onDraw方法上调用； 3，完事 直到直到涉及到代码有小部件_reader_content第63行的RawGestureDetector部分； widget_reader_painter的20行绘画方法；剩下的就是animation_page_simulation_turn方法里面的部分，不过这块你也不用担心，高度内聚，只要用手势和坐标参数，应该注意方法就给你重新定位到指定画布上了

看了好久都没看懂

额，这样吧，你看下这个书页，他那还附有文字教程，这样比较好理解；我这个也不过是在上面稍微做了一丁点的优化，分解不大

原生的我更加懵

额……如果你看的比较困难，那先跟着他那教程来，自己走一遍，我当初也是看不懂最初的Android小说阅读器，后来这个大佬出了这个教程，跟着走一遍就明白了

你能帮帮我吗，要多少¥

额，最近没时间~ 这个你可以加一下别的技术交流群问下

[superwei629]

支持大佬重写 ，实在看不懂

[lwlizhe]

支持大佬重写 ，实在看不懂

我的锅~~~~这回尽量做好注释和拆分~~

[mabDc]

来推销我的排版效果: 分栏 分页 两端对齐 高度对齐等效果

---

---

一个文本两端对齐和分页（可选底栏对齐）工具（处理一屏幕文字耗时约5ms）

https://github.com/mabDc/text_composition

[mabDc]

https://stackoverflow.com/questions/57802420/how-to-create-page-curl-effect

@lwlizhe 这个效果也很棒，而且他写的非常简单，大佬有空可以看看。

(…其实想不通你分页为啥那么慢。我两端对齐，上下对齐，加分页，300页的一卷小说也在2s之内。

[mabDc]

@beyondbkcy 这个文件单文件简单改成免继承或者继承CustomPainter的形式直接就能用 作者写的很棒 https://github.com/lwlizhe/flutter_novel/blob/master/lib/app/novel/widget/reader/content/helper/animation/animation_page_simulation_turn.dart

修改成免继承的形式 https://github.com/mabDc/text_composition/blob/main/test/lwlizhe.dart

---

@lwlizhe 实际上就是你的animation_page_simulation_turn放进一个跟随animation重绘的painter就可以了 主要实现类似 https://stackoverflow.com/questions/57802420/how-to-create-page-curl-effect

[beyondbkcy]

@beyondbkcy 这个文件单文件简单改成免继承或者继承CustomPainter的形式直接就能用 作者写的很棒 https://github.com/lwlizhe/flutter_novel/blob/master/lib/app/novel/widget/reader/content/helper/animation/animation_page_simulation_turn.dart

修改成免继承的形式 https://github.com/mabDc/text_composition/blob/main/test/lwlizhe.dart

那我应该怎么用呢

[mabDc]

先执行calcCornerXY(x, y, size)表示手指按下，比如calcCornerXY(size.width, size.height, size)是按了右下角。 然后执行下面两行就可以了。最简单就是放进一个继承至CustomPainter的class里，然后onpaint方法重绘就完事儿。

calBezierPoint(Offset(x, size.height), size);
onDraw(canvas, Offset(x, size.height), size, picture!);

---

比如这样

[beyondbkcy]

先执行calcCornerXY(x, y, size)表示手指按下，比如calcCornerXY(size.width, size.height, size)是按了右下角。 然后执行下面两行就可以了。最简单就是放进一个继承至CustomPainter的class里，然后onpaint方法重绘就完事儿。

calBezierPoint(Offset(x, size.height), size);
onDraw(canvas, Offset(x, size.height), size, picture!);

主要是我只知道在哪用，比如我现在有个pageview，老板说滑动效果太单调了，要换成翻页，请问这怎么换，pageview怎么和你那个文件结合

[mabDc]

看你要简单还是复杂 最简单就是只用从右往左的动画 那其他都不用画了 你只需要画当前页矩阵裁剪左边，下一页也用矩形裁剪右边 然后画背面和阴影 完事儿。我截图的效果就是最简单的

[lwlizhe]

https://stackoverflow.com/questions/57802420/how-to-create-page-curl-effect

@lwlizhe 这个效果也很棒，而且他写的非常简单，大佬有空可以看看。

(…其实想不通你分页为啥那么慢。我两端对齐，上下对齐，加分页，300页的一卷小说也在2s之内。

额，那你这块的实现方式是？

简单的来说， 我这用的textPainter来做的，所以因为textPainter.layout方法是个CPU密集型任务，所以在UI Isolate中调用会jank，因此我用native做桥梁，将其放到一个新的Flutter enginer中去做

好长时间前的东西了，也忘了具体分页效率咋样~~但是章节跳转那种，也就是重新计算分页的过程，从Gif图上来看，好像问题不大，前、后、当前三章加载完好像也是2-3秒的样子~

所以，你那块测试是特别慢么，flutter的版本是？具体的测试单元能提供一下么？

[mabDc]

我自己分页几百次也不到2s 你的项目跑起来 动画不卡 但是加载条特别久