88911562

导航

统计
  • 随笔 - 10
  • 文章 - 0
  • 评论 - 76
  • 引用 - 0
公告
 

之前研究过一种用于 模拟真实 手写笔迹签名 的算法,  要求能够保持原笔迹平滑,并有笔锋的效果.

在网上看了一些资料, 资料很多, 能够达到用于正式产品中的效果的一个都没有找到.

我看到最靠谱的一篇文章是这个:Interpolation with Bezier Curves

但是即使按照这篇文章讲的方法去实现手写笔迹, 表现的效果也非常的不理想.

而且, 这篇文章还只是涉及到了笔迹平滑的问题, 没有涉及到如何解决笔锋的问题

经过我一段时间的研究, 终于在上厕所的时候(有没有被duang了一下的感觉, 哈哈~O(∩_∩)O), 想出来了一种方法..先给大家展示两张在正式产品中的效果图:

前面两张图片是在手机上测试的效果,后面两张是在电脑上用鼠标写出来的效果.

 

当然, 必须承认, 图片中展示的效果效果的文字, 我反复写了很多次...随便画几条线大概是这样:

我将要介绍的这种算法, 还可以通过对某些参数的修改,  模拟出毛笔, 钢笔, 签字笔等各种笔...真实书写效果....

 

如果你还对贝塞尔曲线不了解, 我推荐查看这篇文章:史上最全的贝塞尔曲线(Bezier)全解,   所以, 在这里我会假设读者已经对Bezier曲线已经比较了解.

本文主要讲解 如何通过已知所有笔迹点, 计算出控制点, 使用3次bezier曲线拟合笔迹, 达到笔迹平滑的效果, 解决笔迹平滑的问题,.

除了本篇文章意外, 后面应该还会有两篇文章:

第二篇:介绍自己开发的一种笔迹拟合算法.

第三篇:主要介绍实现笔锋的效果.并提供最终的c++对此算法的实现的源代码和演示程序.

 Bezier曲线是通过简单地指定端点中间的控制点(Control Point)来描绘出一条光滑的曲线, 三次贝塞尔曲线的效果是图片中这样:

当红色的圆点代表原笔迹点时, 想必大家想要的效果是下面图片中的蓝色线条, 而不是红色线条吧:

贝赛尔曲线拟合会经过前后两个端点, 但不会经过中间的控制点,所以, 我们通过贝塞尔曲线来拟合笔迹点的时候, 是要:

对于所有的笔迹点, 每相邻的一对笔迹点作为前后端点来绘制Bezier曲线, 所有我们需要找出一些满足某种规律的点作为这些端点中间的控制点.

下面请看下图:

图中, 点A, B, C为我们的原笔迹点, B' 和 B''为我们计算出来的控制点.

计算控制点的方法是:

1) 设定一个0到1的系数k,  在AB和BC上找到两点, b'和c', 使得距离比值, Bb' / AB = Bc' / BC = k  , 计算出两个点 b' 和 c'..(k的大小决定控制点的位置,最终决定笔迹的平滑程度, k越小, 笔迹越锐利; k越大,则笔迹越平滑.)

2) 然后在b' c'这条线段上再找到一个点 t, 且线段的长度满足比例: b't / tc' = AB / BC,

3) 把b' 和 c', 沿着 点 t 到 点B的方向移动, 直到 t 和 B重合. 由b'移动后得到 B', 由 c'移动后的距离得到B'', B'和B''就是我们要计算的位于顶点B附近的两个控制点.

实际项目过程中, 使用下面的规则进行绘制笔迹:

1) 当我们在手写原笔迹绘制的时候, 得到第3个点(假设分别为ABC)的时候, 可以计算出B点附近的两个控制点., 由于是点A为起始点,, 所以直接把点A作为第一个控制点, 计算出来的B'作为第二个控制点,  这样AAB'B 4个点,就可以画出点A到点B的平滑贝塞尔曲线.(或者可以直接把AB'B这3个点, 把B'作为控制点, 用二次贝塞尔曲线来拟合, 也是可以的哦~.)

2) 当得到第4个点(假设为D)的时候, 我们通过BCD, 计算出在点C附近的两个控制点, C'和C'', 通过BB''C'C绘制出B到C的平滑曲线..

3) 当得到第i个点的时候, 进行第2个步骤.........

4) 当得到最后一个点Z的时候,  直接把Z作为第二个控制点(假设前一个点为Y),  即, 使用YY'ZZ来绘制Bezier曲线.

为了让阅读者能够更好的理解, 用Python实现了这个算法, 鼠标点击空白处可以增加笔迹点, 选中笔迹点可以动态拖动, 单击已有笔迹点执行删除:

效果图如下:

Python代码我就不再解释了, 直接提供出来:

  1 #!/usr/bin/env python
  2 # -*- coding: utf-8 -*-
  3 import numpy as np
  4 from scipy.special import comb, perm
  5 import matplotlib.pyplot as plt
  6 
  7 plt.rcParams['font.sans-serif'] = ['SimHei']
  8 # plt.rcParams['font.sans-serif'] = ['STXIHEI']
  9 plt.rcParams['axes.unicode_minus'] = False
 10 
 11 class Handwriting:
 12     def __init__(self, line):
 13         self.line = line
 14         self.index_02 = None    # 保存拖动的这个点的索引
 15         self.press = None       # 状态标识,1为按下,None为没按下
 16         self.pick = None        # 状态标识,1为选中点并按下,None为没选中
 17         self.motion = None      # 状态标识,1为进入拖动,None为不拖动
 18         self.xs = list()        # 保存点的x坐标
 19         self.ys = list()        # 保存点的y坐标
 20         self.cidpress = line.figure.canvas.mpl_connect('button_press_event', self.on_press)  # 鼠标按下事件
 21         self.cidrelease = line.figure.canvas.mpl_connect('button_release_event', self.on_release)  # 鼠标放开事件
 22         self.cidmotion = line.figure.canvas.mpl_connect('motion_notify_event', self.on_motion)  # 鼠标拖动事件
 23         self.cidpick = line.figure.canvas.mpl_connect('pick_event', self.on_picker)  # 鼠标选中事件
 24 
 25         self.ctl_point_1 = None
 26 
 27     def on_press(self, event):  # 鼠标按下调用
 28         if event.inaxes != self.line.axes: return
 29         self.press = 1
 30 
 31     def on_motion(self, event):  # 鼠标拖动调用
 32         if event.inaxes != self.line.axes: return
 33         if self.press is None: return
 34         if self.pick is None: return
 35         if self.motion is None:  # 整个if获取鼠标选中的点是哪个点
 36             self.motion = 1
 37             x = self.xs
 38             xdata = event.xdata
 39             ydata = event.ydata
 40             index_01 = 0
 41             for i in x:
 42                 if abs(i - xdata) < 0.02:  # 0.02 为点的半径
 43                     if abs(self.ys[index_01] - ydata) < 0.02: break
 44                 index_01 = index_01 + 1
 45             self.index_02 = index_01
 46         if self.index_02 is None: return
 47         self.xs[self.index_02] = event.xdata  # 鼠标的坐标覆盖选中的点的坐标
 48         self.ys[self.index_02] = event.ydata
 49         self.draw_01()
 50 
 51     def on_release(self, event):  # 鼠标按下调用
 52         if event.inaxes != self.line.axes: return
 53         if self.pick is None:  # 如果不是选中点,那就添加点
 54             self.xs.append(event.xdata)
 55             self.ys.append(event.ydata)
 56         if self.pick == 1 and self.motion != 1:  # 如果是选中点,但不是拖动点,那就降阶
 57             x = self.xs
 58             xdata = event.xdata
 59             ydata = event.ydata
 60             index_01 = 0
 61             for i in x:
 62                 if abs(i - xdata) < 0.02:
 63                     if abs(self.ys[index_01] - ydata) < 0.02: break
 64                 index_01 = index_01 + 1
 65             self.xs.pop(index_01)
 66             self.ys.pop(index_01)
 67         self.draw_01()
 68         self.pick = None  # 所有状态恢复,鼠标按下到稀放为一个周期
 69         self.motion = None
 70         self.press = None
 71         self.index_02 = None
 72 
 73     def on_picker(self, event):  # 选中调用
 74         self.pick = 1
 75 
 76     def draw_01(self):  # 绘图
 77         self.line.clear()  # 不清除的话会保留原有的图
 78         self.line.set_title('Bezier曲线拟合手写笔迹')
 79         self.line.axis([0, 1, 0, 1])  # x和y范围0到1
 80         # self.bezier(self.xs, self.ys)  # Bezier曲线
 81         self.all_curve(self.xs, self.ys)
 82         self.line.scatter(self.xs, self.ys, color='b', s=20, marker="o", picker=5)  # 画点
 83         self.line.plot(self.xs, self.ys, color='black', lw=0.5)  # 画线
 84         self.line.figure.canvas.draw()  # 重构子图
 85 
 86     # def list_minus(self, a, b):
 87     #     list(map(lambda x, y: x - y, middle, begin))
 88 
 89     def controls(self, k, begin, middle, end):
 90         # if k > 0.5 or k <= 0:
 91         #     print('value k not invalid, return!')
 92         #     return
 93 
 94         diff1 = middle - begin
 95         diff2 = end - middle
 96 
 97         l1 = (diff1[0] ** 2 + diff1[1] ** 2) ** (1 / 2)
 98         l2 = (diff2[0] ** 2 + diff2[1] ** 2) ** (1 / 2)
 99 
100         first = middle - (k * diff1)
101         second = middle + (k * diff2)
102 
103         c = first + (second - first) * (l1 / (l2 + l1))
104 
105         # self.line.text(begin[0] - 0.2, begin[1] + 1.5, 'A', fontsize=12, verticalalignment="top",
106         #                horizontalalignment="left")
107         # self.line.text(middle[0] - 0.2, middle[1] + 1.5, 'B', fontsize=12, verticalalignment="top",
108         #                horizontalalignment="left")
109         # self.line.text(end[0] + 0.2, end[1] + 1.5, 'C', fontsize=12, verticalalignment="top",
110         #                horizontalalignment="left")
111         # xytext = [(first[0] + second[0]) / 2, min(first[1], second[1]) - 10]
112         #
113         arrow_props = dict(arrowstyle="<-", connectionstyle="arc3")
114         # self.line.annotate('', first, xytext=xytext, arrowprops=dict(arrowstyle="<-", connectionstyle="arc3,rad=-.1"))
115         # self.line.annotate('', c, xytext=xytext, arrowprops=arrow_props)
116         # self.line.annotate('', second, xytext=xytext, arrowprops=dict(arrowstyle="<-", connectionstyle="arc3,rad=.1"))
117 
118         # label = '从左到右3个点依次分别为b\', c\', t,\n' \
119         #         '满足条件 k = |b\'B| / |AB|, k = |c\'B| / |CB|\n' \
120         #         '然后把线段(b\'c\')按 t 到 B的路径移动,\n' \
121         #         '最后得到的两个端点就是我们要求的以B为顶点的控制点'
122         # self.line.text(xytext[0], xytext[1], label, verticalalignment="top", horizontalalignment="center")
123         self.line.plot([first[0], c[0], second[0]], [first[1], c[1], second[1]], linestyle='dashed', color='violet', marker='o', lw=0.3)
124 
125         first_control = first + middle - c
126         second_control = second + middle - c
127 
128         # self.line.text(first_control[0] - 0.2, first_control[1] + 1.5, '控制点B\'', fontsize=9, verticalalignment="top",
129         #                horizontalalignment="left")
130         # self.line.text(second_control[0] + 0.2, second_control[1] + 1.5, '控制点B\'\'', fontsize=9,
131         #                verticalalignment="top", horizontalalignment="left")
132         x_s = [first_control[0], second_control[0]]
133         y_s = [first_control[1], second_control[1]]
134 
135         # self.line.annotate('', xy=middle, xytext=c, arrowprops=dict(facecolor='b' headlength=10, headwidth=25, width=20))
136         arrow_props['facecolor'] = 'blue'
137         # arrow_props['headlength'] = 5
138         # arrow_props['headwidth'] = 10
139         # arrow_props['width'] = 5
140         # self.line.annotate('', xy=c, xytext=middle, arrowprops=arrow_props)
141         # self.line.annotate('', xy=first, xytext=first_control, arrowprops=arrow_props)
142         # self.line.annotate('', xy=second, xytext=second_control, arrowprops=arrow_props)
143         # self.line.plot([begin[0], middle[0], end[0]], [begin[1], middle[1], end[1]], lw=1.0, marker='o')
144         self.line.plot(x_s, y_s, marker='o', lw=1, color='r', linestyle='dashed')
145         # self.line.plot(x_s, y_s, lw=1.0)
146 
147         return first_control, second_control
148 
149     def all_curve(self, xs, ys):
150         self.ctl_point_1 = None
151         le = len(xs)
152         if le < 3: return
153 
154         begin = [xs[0], ys[0]]
155         middle = [xs[1], ys[1]]
156         end = [xs[2], ys[2]]
157         self.one_curve(begin, middle, end)
158 
159         for i in range(3, le):
160             begin = middle
161             middle = end
162             end = [xs[i], ys[i]]
163             self.one_curve(begin, middle, end)
164 
165         end = [xs[le - 1], ys[le - 1]]
166         x = [middle[0], self.ctl_point_1[0], end[0]]
167         y = [middle[1], self.ctl_point_1[1], end[1]]
168         self.bezier(x, y)
169 
170     def one_curve(self, begin, middle, end):
171         ctl_point1 = self.ctl_point_1
172 
173         begin = np.array(begin)
174         middle = np.array(middle)
175         end = np.array(end)
176 
177         ctl_point2, self.ctl_point_1 = self.controls(0.3, np.array(begin), np.array(middle), np.array(end))
178         if ctl_point1 is None: ctl_point1 = begin
179 
180         xs = [begin[0], ctl_point1[0], ctl_point2[0], middle[0]]
181         ys = [begin[1], ctl_point1[1], ctl_point2[1], middle[1]]
182         self.bezier(xs, ys)
183 
184         # xs = [middle[0], self.ctl_point_1[0], end[0], end[0]]
185         # ys = [middle[1], self.ctl_point_1[1], end[1], end[1]]
186         # self.bezier(xs, ys)
187 
188     def bezier(self, *args):  # Bezier曲线公式转换,获取x和y
189         t = np.linspace(0, 1)  # t 范围0到1
190         le = len(args[0]) - 1
191 
192         self.line.plot(args[0], args[1], marker='o', color='r', lw=0.8)
193         le_1 = 0
194         b_x, b_y = 0, 0
195         for x in args[0]:
196             b_x = b_x + x * (t ** le_1) * ((1 - t) ** le) * comb(len(args[0]) - 1, le_1)  # comb 组合,perm 排列
197             le = le - 1
198             le_1 = le_1 + 1
199 
200         le = len(args[0]) - 1
201         le_1 = 0
202         for y in args[1]:
203             b_y = b_y + y * (t ** le_1) * ((1 - t) ** le) * comb(len(args[0]) - 1, le_1)
204             le = le - 1
205             le_1 = le_1 + 1
206 
207         color = "yellowgreen"
208         if len(args) > 2 : color = args[2]
209         self.line.plot(b_x, b_y, color=color, linewidth='3')
210 
211 fig = plt.figure(2, figsize=(12, 6))
212 ax = fig.add_subplot(111)  # 一行一列第一个子图
213 ax.set_title('手写笔迹贝赛尔曲线, 计算控制点图解')
214 
215 handwriting = Handwriting(ax)
216 plt.xlabel('X')
217 plt.ylabel('Y')
218 
219 # begin = np.array([20, 6])
220 # middle = np.array([30, 40])
221 # end = np.array([35, 4])
222 # handwriting.one_curve(begin, middle, end)
223 # handwriting.controls(0.2, begin, middle, end)
224 plt.show()

大家可能觉得这个算法已经比较完美了, 下面我指出这种算法在实际使用中, 几个问题,  其中一些让人完全不能接受:

1) 在实际交互过程中, 这种方法需要3次贝塞尔曲线来拟合, 用户输入完第3个点,才能绘制第一条曲线, 第4个点才能绘制第2条曲线, 这种反馈不及时, 让体验非常差.

2) 每次都要计算控制点, 非常麻烦, 并且还影响效率.

在下一篇文章中, 我会介绍自己实现的解决了这些缺点的一种算法.

另外, 吐槽一下啊, 公司老板拖欠两个月工资了,  穷得叮当响, 每天吃8块钱的蛋炒饭.真尼玛坑啊,我靠!!!!!!!!

大家如果大家觉得这篇文章对您有帮助, 又愿意打赏一些银两, 请拿起你的手机, 打开你的微信, 扫一扫下方二维码, 作为一个有骨气的程序员攻城狮, 我非常愿意接受大家的支助...哈哈哈!!!

 

posted on 2017-12-16 19:25 88911562 阅读(...) 评论(...) 编辑 收藏