原笔迹手写保存生成 svg 数据,并将 svg 保存为 pdf 格式

有个朋友提了一个需求,将签名数据生成 svg 数据,并保存为 pdf,传送到后台。

初步分析了一下,难点在于

  1. svg 的生成
  2. pdf 的生成。

首先对 svg、pdf 的文件格式进入了初步的了解。尝试将笔迹生成 svg 格式,然后再将 svg 转化为 pdf graphic command,再将这些 command 转化为 pdf 文件。

相对之前对 svg 有所涉及,pdf 方面的入门门槛更高一点。好在并不需要实现很复杂的功能。首先通过 mediabox 定义页面的大小,然后通过对颜色配置的学习,实现了对笔迹颜色的支持,最重要的是,用过对 curv path 的格式规范的学习,实现的笔迹笔锋和压感的效果。

最后,让我们来看一下效果(关键是 svg 和 pdf 是矢量图,放大不失真):

原笔迹控件原始效果:

生成的 svg 数据的效果:

继续阅读原笔迹手写保存生成 svg 数据,并将 svg 保存为 pdf 格式

iOS iPad 重温

最近有个网友想要看看 iOS 的效果,于是重新编译一下以前的代码,不料 xcode 开发环境就折腾了很久。xcode 和 swift 都升级到最新版本了,导致无法顺利编译通过。

升级了 nimble 和 quick 库之后,终于能顺利跑起来,不过。。。

发现当初做的只是简单的实现手写笔锋的效果。其他功能都没有实现,路途还比较远。。。时间也不够用啊。。。

迟点还是找时间,把 iOS 版本完善起来吧。

先记录一下 iPad 上的效果吧。

原笔迹手写–圆珠笔效果

圆珠笔跟毛笔效果,还是有挺大的区别的。

首先,圆珠笔是硬笔,笔尖有滚珠,硬尖,书写时没有很明显的提、按动作,书写快速,流畅。

所以笔锋变化不能太大,效果也必须有更加笔挺,硬朗的感觉。

下面是我实现的效果,大家觉得如何?

自我感觉笔锋变化还可以再小一点,这个更倾向钢笔了。

最近在线教育有点火

最近由于新冠肺炎疫情的影响,学校无法按时正常开学,在线教育就火起来了。没办法啊,减少接触,只能选择在线教育了。无奈。

在线教育相关的在线课堂,电子书包等项目,也催生了对手写技术的需求,最近就有不少人跟 Kevin 打听原笔迹手写的相关技术。

但愿疫情早日过去,大家可以放心地外出游玩。武汉加油,深圳加油!


原笔迹手写控件还可以这样玩–绣花机

更多内容,可以查看相关文章:原笔迹手写技术与智能绣花机的第一次亲密接触

以下是原笔迹手写控件在绣花机上的实例应用,实例中的手写效果没有使用压感屏,如果配合电磁屏的平板设备,效果会更好。


原笔迹手写SVG绘图算法的改善

最近折腾了一下SVG,对SVG绘图的效果做了重大的改善,效果可以媲美之前的分段画点算法,这个是一个很鼓舞的成果,SVG绘图的优点很多,例如绘图手指跟随效果很流畅,同时生成文件更小,更重要的是浏览器原生支持SVG,这样客户可以很方便的把SVG数据应用到网络应用,以及同步书写的应用。

后面有空的话,要把这个算法移植到 iOS。

好了,不多说,看效果图:

那,下一步应该是什么呢?

集成手写控件到 mupdf?手写控件javascript 版本?手写识别功能?

路漫漫其修远兮~~~

重大进展!iOS 原笔迹手写控件,压感,笔锋不可少!

之前在手写的合作项目中,有不少客户需要一并开发 iOS 的手写应用。

但是 iOS 手写控件一直是空白的,原因很多:

1是自己对 iOS 开发并不熟悉,
2是 iOS 开发上手也需要额外大量的空余时间,
3是 iOS 开发的门槛也是不低,iOS 开发 mbp 费用不低,还需要 iPhone 或者 iPad,甚至 apple pencil,这一套下来,费用不菲。

随着最近国家二胎政策的全面放开,以及电子教育、电子课堂的复兴,手写需求貌似越来越多,Kevin 最近的手写业务也是不少,最近好不容易挤出一点业余时间,来好好学习 iOS 开发,并实现 iOS 端的手写控件。

开发语言选择了新兴的 iOS 开发语言 swift,开发设备选择了 mbp pro 2018,而测试设备这个 iPhone 7,以及 ipad air。

凭着一定的移动开发经验,以及对手写的原理的深入掌握,从0开始,学习 swift,开发测试 demo,最终实现了 iOS 端的手写控件,而且初步效果很不错,后期将会继续完善 api 以及文档,以及相关功能。

如果客户有 iOS 端的需求,也完全可以满足客户的需求了。

测试设备使用的是 iPhone 7,因为还没有购置 iPad 以及 apple pencil,所以图示的压感效果是用速度算法计算出的压感,这样的效果已经很好了。相信后面有 apple pencil 的效果会更上一层楼。

效果图:

iOS paintview
iOS paint view

iOS paint view
iOS paint view

 

原笔迹手写技术与智能绣花机的第一次亲密接触

0. 前言

是的,之前一直没有想象过原笔迹手写技术可以应用在绣花机上,更多的只是在教育行业有合作的需求。
直到客户提出需求,才恍然大悟,试想将自己酷炫的签名秀在自己的鸭舌帽上,将自己得意的书法作品秀在绸缎上,将孩子萌萌达的涂鸦秀在家庭亲子装上,等等,这是何等提升幸福感的事情啊!

1. 需求

  • 原笔迹手写,支持电磁屏/主动电容屏压感以及笔锋;普通电容屏的的压感以及笔锋
  • 生成笔迹svg,绣花机通过生成的svg来进行刺绣
  • 生成笔迹png,激光绣花级通过生成的png来进行刺绣
  • 其他

2. 技术实现

通过在平板上书写,绘制,能很好的还原原笔迹,压感,笔锋,平滑,优美。原笔迹手写技术已经比较成熟,实现效果如下:

唯一的问题就是svg的需求。之前生成的svg不符合客户的需求,绣花机需要的是不是一条贝塞尔曲线,而是形成笔迹的两条贝塞尔曲线,然后根据这两条塞尔曲线进行刺绣。

技术上有一定的难度,但是因为之前已经有过相当长的一段时间的研究,所有实现也并不是太难。svg文件的效果可以很好地满足客户的需求。

svg文件生成效果如下:

3. 视频实例

最终期望效果~~~

4. 展望

相信随着智能手机,平板的普及,原笔迹手写在消费行业定会大有所为,同时也会在工业行业找到更多展现自己价值的机会。