search

gaoding-inc / stateshot

💾 Non-aggressive history state management with structure sharing.
192 stars 11 forks source link

请教一下大佬关于图片撤销重做用你们这个库怎么实现？ #23

Open dragonwarrior95 opened 3 years ago

dragonwarrior95 commented 3 years ago

1、看了你们这个库的实现原理分析，大致理解是你们这个库应该是快照式撤销重做类库？ 2、图片处理涉及到distructive 和 non-destructive操作，还有添加图层类操作，图层与原图一起变换操作等一系列操作，那么用你们这个库怎么实现？或者你们有类似的示例吗？

doodlewind commented 3 years ago

你好

  1. StateShot 是基于快照（深拷贝）的历史记录库，而不是基于命令（记录操作步骤并回放）的。
  2. 对于涉及图片等大体积资源的状态管理，你可以在图片体积较小时，通过 base64 来直接全量存储它。这时建议为相应节点配置规则，从而在图像节点其他轻量字段改变时，避免生成新的大 chunk。你也可以将图像转为 blob，这样只需存储轻量的 URL 式字段即可。但如果应用重度依赖对大体积图像的操作，且在命令之间切换的成本够低（如连续修改滤镜强度，就很容易快速渲染完成），那么基于命令的状态管理会更理想。

发自我的iPhone

------------------ 原始邮件 ------------------ 发件人: dragonwarrior95 <notifications@github.com> 发送时间: 2020年12月12日 11:14 收件人: gaoding-inc/stateshot <stateshot@noreply.github.com> 抄送: Subscribed <subscribed@noreply.github.com> 主题: 回复：[gaoding-inc/stateshot] 请教一下大佬关于图片撤销重做用你们这个库怎么实现？ (#23)

1、看了你们这个库的实现原理分析，大致理解是你们这个库应该是快照式撤销重做类库？ 2、图片处理涉及到distructive 和 non-destructive操作，还有添加图层类操作，图层与原图一起变换操作等一系列操作，那么用你们这个库怎么实现？或者你们有类似的示例吗？

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

dragonwarrior95 commented 3 years ago

你好 1. StateShot 是基于快照（深拷贝）的历史记录库，而不是基于命令（记录操作步骤并回放）的。 2. 对于涉及图片等大体积资源的状态管理，你可以在图片体积较小时，通过 base64 来直接全量存储它。这时建议为相应节点配置规则，从而在图像节点其他轻量字段改变时，避免生成新的大 chunk。你也可以将图像转为 blob，这样只需存储轻量的 URL 式字段即可。但如果应用重度依赖对大体积图像的操作，且在命令之间切换的成本够低（如连续修改滤镜强度，就很容易快速渲染完成），那么基于命令的状态管理会更理想。 发自我的iPhone … ------------------ 原始邮件 ------------------ 发件人: dragonwarrior95 <notifications@github.com> 发送时间: 2020年12月12日 11:14 收件人: gaoding-inc/stateshot <stateshot@noreply.github.com> 抄送: Subscribed <subscribed@noreply.github.com> 主题: 回复：[gaoding-inc/stateshot] 请教一下大佬关于图片撤销重做用你们这个库怎么实现？ (#23) 1、看了你们这个库的实现原理分析，大致理解是你们这个库应该是快照式撤销重做类库？ 2、图片处理涉及到distructive 和 non-destructive操作，还有添加图层类操作，图层与原图一起变换操作等一系列操作，那么用你们这个库怎么实现？或者你们有类似的示例吗？ — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

hello大佬 首先感谢大佬回复。 可能是我没把问题描述清楚，我的问题是用StateShot怎么运用于图片处理的撤销重做？ 假设图片处理流程如下： 1、图片执行滤镜特效； 2、图片上添加文字图层； 3、移动上一步添加的文字图层； 4、图片上执行裁剪图片功能； 这几个步骤如何用StateShot去串起来？如果这几个步骤每次执行完都转成blob再去存储，小图的话估计还是可以，但是现在手机上出来的图片基本都是五六千的宽高，那么这样大的图片还每次去转blob存储的话速度是否会慢了些？ PS：StateShot是否有图片处理类撤销重做的示例，类似我上述说的处理流程的撤销重做，如果方便的话是否可以出个示例？ 再次感谢大佬

doodlewind commented 3 years ago

你描述的这个过程中，似乎并不需要改变原图？这样的话你可以维持原图的 URL 不变，用 StateShot 存储图层位置、裁剪框等业务状态，在状态变更（撤销重做）时重新渲染即可。滤镜特效的渲染显然会比对图片的序列化更高效。

另一种设计是存储每次操作的命令（如修改滤镜强度 +50，向左移动 40px 等），然后回放这些命令。如果你的编辑器更接近 PS（重图像处理）的话，这种方式可能更合适些。

dragonwarrior95 commented 3 years ago

我不太理解你这波所说的改变原图是指改变原图的URL还是改变原图的数据内容？我的理解是滤镜就已经改变原图了，裁剪也是会破坏原图数据的，然后我的编辑器处理的也是比较类似PS，但是PS的撤销重做个人认为不是命令式，毕竟图片处理很多处理方式是不可逆的，另外PS要是处理大图的话，那撤销重做花费的时间代价也比较大，因此命令式撤销重做感觉不太适合PS类编辑器