关于绘画 App 画完一幅画后能够重新播放整个绘画的过程

2016-03-06 20:40:47 +08:00
 arden

最近在 AppStore 上看到一个叫 涂手 的 App ,玩了一下感觉蛮有意思的,很想了解下这个 App 的一个技术问题,就是当自己画玩一幅画发布出去之后,这个平台可以让大家能够播放别人在画这幅画的整个流程,也就是能够自动播放这幅画的绘画流程,不知道这个技术是如何实现的,有人了解这个技术点吗?

5396 次点击
所在节点    程序员
36 条回复
linhua
2016-03-06 20:46:23 +08:00
1.录像 数据量大
2.重现用户的操作 数据量小
em70
2016-03-06 20:53:18 +08:00
Ctrl+z
Ctrl+y
JiShuTui
2016-03-06 20:57:58 +08:00
不懂 iOS 开发,我猜是否可以这样,每个笔划(或者每隔 N 秒)保存一个 png ,然后播放图片
arden
2016-03-06 21:09:09 +08:00
https://itunes.apple.com/cn/app/tu-shou-nao-dong-da-kai-tu/id973367549?mt=8
就是这个 App ,有熟悉这个技术的朋友过来一起讨论讨论下。
abelyao
2016-03-06 21:22:19 +08:00
记录你的操作轨迹,数据量很小的,比如 X 点到 Y 点(仅是例子)
重播的时候直接按顺序重新添加到画布上,大概猜测是 SVG 吧
楼主可以放一个画好之后的重播 URL 上来我们研究研究
acros
2016-03-06 21:25:25 +08:00
应该和魔兽 3 录像类似的方法吧。关键帧记录关键数据。
acros
2016-03-06 21:31:22 +08:00
录像是肯定不可能的。绘画时肯定有很多撤销操作,录像里面不用存下来,但是做成一个个指令就很好处理了。
arden
2016-03-06 21:34:04 +08:00
@abelyao http://www.toshow.com/shared/work/7t34iuwfms41pHpxPodB9A==?from=singlemessage&isappinstalled=1
这个我是画好的重播链接,不过直接在电脑上用浏览器打开没用,得用手机浏览器打开。
arden
2016-03-06 21:36:32 +08:00
@acros 对,应该不是录像,我测试过了。我画的时候做了一些撤消操作,但是重播的时候并没有播出来。
WildCat
2016-03-06 22:05:42 +08:00
WWDC 15 关于 Value Type 的这个 Session 讲了 PhotoShop 对于编辑历史的类似实现,基本原理很简单,不过没有上下文还是不在这里说了。

http://devstreaming.apple.com/videos/wwdc/2015/414sklk5h2k3ki3/414/414_building_better_apps_with_value_types_in_swift.pdf?dl=1

从第 158 页开始就是讲的这个内容。
arden
2016-03-06 22:13:31 +08:00
刚找了下资料好像有两种方式:
1 、记录绘画的路径数据,然后自动播放重绘,但是不太清楚,这个路径数据要怎么记录合适,因为 x/y 是不停的在变换的,那么记录的时候要实时记录吗?
2 、可以从生成的 svg 图片来自动重播。
xiaofami
2016-03-06 22:16:06 +08:00
openCanvas 有回放功能,可以了解一下。
ibireme
2016-03-06 22:29:14 +08:00
@arden

记录手指在屏幕上的触摸点、时间点、画笔设置,这样就行了。回放的时候,时间点可以调节一下,让回放速度显得快一些。浏览器显示是用 Canvas 绘制的。。

下面是你给的链接里那个签名的 JSON 数据:

{"status":1,"result":{"imagejson":{"date":"1457265559665","count":2,"path":[{"w":150,"c":"FF000000","p":[{"x":80,"y":168.32},{"x":102.48,"y":154.56},{"x":128.72,"y":138.32},{"x":154.96,"y":123.28},{"x":182.48,"y":107.04},{"x":200,"y":97.04},{"x":211.2,"y":90.8},{"x":212.48,"y":104.56},{"x":180,"y":148.32},{"x":144.96,"y":213.28},{"x":117.44,"y":272.08},{"x":100,"y":320.8},{"x":90,"y":360.8},{"x":81.2,"y":392.08},{"x":78.72,"y":409.52},{"x":76.24,"y":423.28},{"x":76.24,"y":410.8},{"x":83.68,"y":380.8},{"x":103.68,"y":339.52},{"x":131.2,"y":297.04},{"x":163.68,"y":254.56},{"x":202.48,"y":217.04},{"x":234.96,"y":187.04},{"x":258.72,"y":167.04},{"x":278.72,"y":157.04},{"x":292.48,"y":155.76},{"x":302.48,"y":190.8},{"x":291.2,"y":260.8},{"x":270,"y":314.56},{"x":246.24,"y":357.04},{"x":224.96,"y":377.04},{"x":204.96,"y":382.08},{"x":177.44,"y":374.56},{"x":158.72,"y":344.56},{"x":147.44,"y":304.56},{"x":144.96,"y":270.8},{"x":144.96,"y":223.28},{"x":147.44,"y":178.32},{"x":154.96,"y":142.08},{"x":158.72,"y":123.28},{"x":156.24,"y":137.04},{"x":151.2,"y":175.76},{"x":150,"y":222.08},{"x":150,"y":257.04},{"x":150,"y":292.08},{"x":150,"y":309.52},{"x":163.68,"y":285.76},{"x":172.48,"y":218.32}]},{"w":150,"c":"FF000000","p":[{"x":224.96,"y":65.76},{"x":228.72,"y":85.76},{"x":228.72,"y":115.76},{"x":218.72,"y":168.32},{"x":196.24,"y":222.08},{"x":174.96,"y":267.04},{"x":158.72,"y":290.8},{"x":147.44,"y":300.8},{"x":162.48,"y":272.08},{"x":187.44,"y":248.32},{"x":204.96,"y":230.8},{"x":216.24,"y":219.52},{"x":220,"y":235.76},{"x":192.48,"y":287.04},{"x":161.2,"y":357.04},{"x":144.96,"y":412.08},{"x":132.48,"y":464.56},{"x":127.44,"y":503.28},{"x":127.44,"y":528.32},{"x":127.44,"y":540.8},{"x":151.2,"y":519.52},{"x":163.68,"y":463.28},{"x":177.44,"y":414.56},{"x":188.72,"y":389.52},{"x":203.68,"y":374.56},{"x":216.24,"y":370.8},{"x":231.2,"y":372.08},{"x":242.48,"y":407.04},{"x":243.68,"y":449.52},{"x":243.68,"y":492.08},{"x":226.24,"y":520.8},{"x":210,"y":532.08},{"x":188.72,"y":532.08},{"x":174.96,"y":527.04},{"x":172.48,"y":504.56},{"x":180,"y":464.56},{"x":213.68,"y":420.8},{"x":258.72,"y":369.52},{"x":293.68,"y":329.52},{"x":321.2,"y":292.08},{"x":337.44,"y":273.28},{"x":348.72,"y":264.56},{"x":358.72,"y":299.52},{"x":347.44,"y":347.04},{"x":340,"y":398.32},{"x":338.72,"y":438.32},{"x":338.72,"y":468.32},{"x":338.72,"y":485.76},{"x":351.2,"y":487.04},{"x":363.68,"y":447.04},{"x":380,"y":395.76},{"x":402.48,"y":350.8},{"x":430,"y":315.76},{"x":450,"y":299.52},{"x":464.96,"y":293.28},{"x":478.72,"y":293.28},{"x":488.72,"y":322.08},{"x":488.72,"y":357.04},{"x":466.24,"y":399.52},{"x":451.2,"y":425.76},{"x":443.68,"y":438.32},{"x":454.96,"y":430.8},{"x":487.44,"y":388.32},{"x":523.68,"y":323.28},{"x":550,"y":253.28},{"x":564.96,"y":208.32},{"x":572.48,"y":178.32},{"x":576.24,"y":160.8},{"x":572.48,"y":197.04},{"x":560,"y":245.76},{"x":547.44,"y":294.56},{"x":542.48,"y":330.8},{"x":540,"y":357.04},{"x":548.72,"y":322.08},{"x":570,"y":265.76},{"x":600,"y":219.52},{"x":634.96,"y":188.32},{"x":671.2,"y":163.28},{"x":696.24,"y":149.52},{"x":711.2,"y":139.52},{"x":716.24,"y":127.04},{"x":702.48,"y":127.04},{"x":687.44,"y":130.8},{"x":671.2,"y":153.28},{"x":662.48,"y":187.04},{"x":656.24,"y":230.8},{"x":652.48,"y":278.32},{"x":652.48,"y":319.52},{"x":663.68,"y":339.52},{"x":680,"y":349.52},{"x":697.44,"y":353.28},{"x":718.72,"y":353.28},{"x":688.72,"y":359.52},{"x":634.96,"y":402.08},{"x":583.68,"y":445.76},{"x":550,"y":480.8},{"x":534.96,"y":503.28},{"x":547.44,"y":517.04},{"x":602.48,"y":510.8},{"x":656.24,"y":489.52},{"x":702.48,"y":465.76},{"x":738.72,"y":449.52},{"x":756.24,"y":434.56},{"x":756.24,"y":415.76},{"x":728.72,"y":402.08},{"x":698.72,"y":398.32},{"x":668.72,"y":398.32},{"x":647.44,"y":409.52},{"x":634.96,"y":457.04},{"x":634.96,"y":525.76},{"x":646.24,"y":590.8},{"x":670,"y":635.76},{"x":700,"y":655.76}]}]}}}
Mutoo
2016-03-06 22:34:11 +08:00
以前经常在闪吧看高手画画(暴露年龄了)
arden
2016-03-06 22:34:54 +08:00
@ibireme 谢谢。
arden
2016-03-06 22:36:21 +08:00
@xiaofami openCanvas 在哪有介绍?
lwhite
2016-03-07 00:41:54 +08:00
开源软件里面有个 Drawpile ,它自带了一个过程录制和编辑功能。
http://drawpile.net/help/recording

它的那个录像是录制事件的,可以生成一个可编辑的小文件或者视频来还原整个多人协作绘画过程,你可以看一下它的代码是咋做的的, opencanvas 好像是做不到对每一个事件的编辑的。
cosven
2016-03-07 01:53:05 +08:00
个人感觉:
如果采用录像的话,感觉不太现实,画一幅画,一般来说,都有大半天或者几天

不用录像的方法的话: 像 SAI 或者 PS ,他们的历史纪录往往都是有限的,应该是有技术上的限制。
cosven
2016-03-07 01:55:03 +08:00
@cosven 所以感觉好神奇
bytelee
2016-03-07 07:48:07 +08:00
我做过两种:
1.直接录像,但是要做好 cache ,及时写入文件,保证 memory
2.直接保存路线,然后通过 keyframe animation 来重现这些动作。

后者方式比较好. 当然 楼上的那个 json 最好再加入一个 duration 属性。 :)

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/261528

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX