支持大佬重写 #14

wozhizhizhi · 2021-03-11T02:14:29Z

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

lwlizhe · 2021-03-11T02:23:30Z

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

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

beyondbkcy · 2021-03-11T11:31:57Z

@lwlizhe 可以做成插件吗

lwlizhe · 2021-03-11T11:46:33Z

@lwlizhe 可以做成插件吗

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

beyondbkcy · 2021-03-11T11:48:42Z

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

lwlizhe · 2021-03-11T11:54:52Z

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

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

beyondbkcy · 2021-03-12T01:27:43Z

@lwlizhe 还是不懂呀

beyondbkcy · 2021-03-12T07:40:31Z

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

wozhizhizhi · 2021-03-15T03:15:33Z

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

lwlizhe · 2021-03-15T03:27:10Z

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

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

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

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

lwlizhe · 2021-03-15T03:34:00Z

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

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

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

lwlizhe · 2021-03-15T03:47:23Z

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

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

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

beyondbkcy · 2021-03-15T09:23:07Z

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

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

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

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

呜呜

beyondbkcy · 2021-03-15T09:23:32Z

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

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

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

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

看了好久都没看懂

lwlizhe · 2021-03-15T09:27:31Z

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

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

看了好久都没看懂

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

beyondbkcy · 2021-03-15T09:28:23Z

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

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

看了好久都没看懂

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

原生的我更加懵

lwlizhe · 2021-03-15T09:31:20Z

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

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

看了好久都没看懂

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

原生的我更加懵

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

beyondbkcy · 2021-03-15T09:44:11Z

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

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

看了好久都没看懂

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

原生的我更加懵

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

你能帮帮我吗，要多少¥

wozhizhizhi · 2021-03-15T10:12:10Z

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

lwlizhe · 2021-03-15T10:20:07Z

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

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

看了好久都没看懂

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

原生的我更加懵

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

你能帮帮我吗，要多少¥

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

superwei629 · 2021-03-21T10:19:12Z

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

lwlizhe · 2021-03-22T09:45:54Z

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

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

mabDc · 2021-03-24T16:35:48Z

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

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

https://github.com/mabDc/text_composition

mabDc · 2021-03-24T16:41:06Z

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

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

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

mabDc · 2021-03-25T06:35:58Z

@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 · 2021-03-25T06:38:59Z

@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 · 2021-03-25T06:47:23Z

先执行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 · 2021-03-25T06:50:19Z

先执行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 · 2021-03-25T06:53:00Z

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

lwlizhe · 2021-03-25T07:10:45Z

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 · 2021-03-25T07:15:58Z

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

lwlizhe · 2021-03-25T07:21:38Z

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

额，进度条这块是从网络请求到最后分页、缓存完成后才消失的~

所以其实影响因素不少，比如说网络卡顿就会造成进度条特别长，毕竟那个api记得是早就挂了的……

那我这有空再看下~~就当入职新工作前复习flutter用了~

mabDc · 2021-03-25T07:23:04Z

比如一章第18页增加字号它重新分页就等太久了

lwlizhe · 2021-03-25T07:28:08Z

比如一章第18页增加字号它重新分页就等太久了

额，那你这块有什么好的方案么？我这确实也没想到除了重新分页以外的方法

mabDc · 2021-03-25T13:36:15Z

eso.2021-03-25.21-03-17_x264.mp4

用了大佬的代码改改就能行效果看录屏

https://github.com/lwlizhe/flutter_novel/blob/master/lib/app/novel/widget/reader/content/helper/animation/animation_page_simulation_turn.dart

(实际上我做成插件的形式

mabDc · 2021-04-06T05:31:19Z

比如一章第18页增加字号它重新分页就等太久了

额，那你这块有什么好的方案么？我这确实也没想到除了重新分页以外的方法

这样子呢。调整时看预览而不是全部排版。比如字号增加可能改几次，先预览再慢慢排版

lwlizhe · 2021-04-06T05:55:21Z

比如一章第18页增加字号它重新分页就等太久了

额，那你这块有什么好的方案么？我这确实也没想到除了重新分页以外的方法

这样子呢。调整时看预览而不是全部排版。比如字号增加可能改几次，先预览再慢慢排版

也行啊，交互这块主要看个人习惯什么的，这个由你决定；

我主要是想在不改交互的基础上有没有什么好的方案~
看了下你分页这块的代码，其实跟我的一样的……

所以我在想，真正导致分页慢的原因是不是其实不是分页这块，而是后面转成bitmap这块的处理~后续有空追踪下

mabDc · 2021-04-09T14:07:17Z

简易版仿真（不到40行。）

（还是比较喜欢全部能翻页的

beyondbkcy · 2021-04-10T03:42:19Z

简易版仿真（不到40行。）

（还是比较喜欢全部能翻页的

源码能发出来吗

mabDc · 2021-04-10T04:04:05Z

又加了双面翻页

$9Y_VUB%WQBSX6MQ6AN{VA$

mabDc · 2021-04-10T04:06:53Z

源码这里（搭配以下任一项目都可

项目 https://github.com/mabDc/text_composition
文件 https://github.com/mabDc/text_composition/blob/gh/lib/curl.dart

或者

项目 https://github.com/fluttercommunity/page_turn
文件 https://github.com/fluttercommunity/page_turn/blob/master/lib/src/effects/curl.dart

beyondbkcy · 2021-04-10T04:15:38Z

源码这里（搭配以下任一项目都可

项目 https://github.com/mabDc/text_composition
文件 https://github.com/mabDc/text_composition/blob/gh/lib/curl.dart

或者

项目 https://github.com/fluttercommunity/page_turn
文件 https://github.com/fluttercommunity/page_turn/blob/master/lib/src/effects/curl.dart

怎么运用在pageview上呢

wozhizhizhi · 2021-04-11T09:30:22Z

为何叫简易版仿真？

panhuiAipami · 2021-08-12T02:24:34Z

是有点过于难懂，代码量太大

superwei629 · 2021-09-03T10:02:47Z

三个月过去了。。

zhou-pro · 2023-08-02T12:58:15Z

eso.2021-03-25.21-03-17_x264.mp4
用了大佬的代码改改就能行效果看录屏

https://github.com/lwlizhe/flutter_novel/blob/master/lib/app/novel/widget/reader/content/helper/animation/animation_page_simulation_turn.dart

(实际上我做成插件的形式
对角翻页怎么没有了？

DouSN mentioned this issue Mar 17, 2022

dev2.0中往回翻页的时候存在一个BUG #22

Open

支持大佬重写 #14

支持大佬重写 #14

Comments

wozhizhizhi commented Mar 11, 2021

lwlizhe commented Mar 11, 2021

beyondbkcy commented Mar 11, 2021

lwlizhe commented Mar 11, 2021

beyondbkcy commented Mar 11, 2021

lwlizhe commented Mar 11, 2021 • edited Loading

beyondbkcy commented Mar 12, 2021

beyondbkcy commented Mar 12, 2021

wozhizhizhi commented Mar 15, 2021

lwlizhe commented Mar 15, 2021

lwlizhe commented Mar 15, 2021

lwlizhe commented Mar 15, 2021

beyondbkcy commented Mar 15, 2021

beyondbkcy commented Mar 15, 2021

lwlizhe commented Mar 15, 2021

beyondbkcy commented Mar 15, 2021

lwlizhe commented Mar 15, 2021

beyondbkcy commented Mar 15, 2021

wozhizhizhi commented Mar 15, 2021

lwlizhe commented Mar 15, 2021

superwei629 commented Mar 21, 2021

lwlizhe commented Mar 22, 2021

mabDc commented Mar 24, 2021

mabDc commented Mar 24, 2021 • edited Loading

mabDc commented Mar 25, 2021 • edited Loading

beyondbkcy commented Mar 25, 2021

mabDc commented Mar 25, 2021 • edited Loading

beyondbkcy commented Mar 25, 2021

mabDc commented Mar 25, 2021 • edited Loading

lwlizhe commented Mar 25, 2021

mabDc commented Mar 25, 2021

lwlizhe commented Mar 25, 2021 • edited Loading

mabDc commented Mar 25, 2021

lwlizhe commented Mar 25, 2021

mabDc commented Mar 25, 2021 • edited Loading

mabDc commented Apr 6, 2021

lwlizhe commented Apr 6, 2021

mabDc commented Apr 9, 2021 • edited Loading

beyondbkcy commented Apr 10, 2021

mabDc commented Apr 10, 2021

mabDc commented Apr 10, 2021

beyondbkcy commented Apr 10, 2021

wozhizhizhi commented Apr 11, 2021

panhuiAipami commented Aug 12, 2021

superwei629 commented Sep 3, 2021

zhou-pro commented Aug 2, 2023 • edited Loading

lwlizhe commented Mar 11, 2021 •

edited

Loading

mabDc commented Mar 24, 2021 •

edited

Loading

mabDc commented Mar 25, 2021 •

edited

Loading

mabDc commented Mar 25, 2021 •

edited

Loading

mabDc commented Mar 25, 2021 •

edited

Loading

lwlizhe commented Mar 25, 2021 •

edited

Loading

mabDc commented Mar 25, 2021 •

edited

Loading

mabDc commented Apr 9, 2021 •

edited

Loading

zhou-pro commented Aug 2, 2023 •

edited

Loading