细节是什么?边界条件就是细节。请做一个会解方程的程序员!
作者:@nixzhu
=================================
因为一个开发中 WATCH App,我需要一个图表生成工具,即,它可以根据输入的一串形如 (String: Double)
的数据(也就是一串 name 和 value,例如 [("Hello": 50), ("World": 150), ("NIX ZHU": 100)]
),在给定的图片尺寸和 name 字体时,生成一张柱状图。
其中,name 的最大长度很可能超过通过简单计算的 barWidth(即,barWidth = fullWidth / count),所以默认情况下将 name 旋转一个角度放置,使各名字不互相覆盖。如图所示:
图中的红色是我要求得的变量,以便根据它们“画出”柱状图。让我来解释一下这里遇到的困难。乍一看,bestNameWidth?
可以根据 “NIX ZHU” 的宽度 * cos(angle) 来得到,似乎算不上变量。但图中只是示意,我要特别说明一下。例如第二个 name 可能会很长,比如叫做 “WORLD VERY VERY LARGE...”,那么它就会超过 “NIX ZHU” 的右边界。所以 bestNameWidth?
的定义如下(带问号的为变量):
(1) bestNameWidth? = index in 0..<count: max(nameWidth[index] * cos(angle) - ((count-1) - index)*barWidth?)
什么意思?很简单,就是所有 name 中,根据每个 name 的 index,也就是位置,那 nameWidth * cos(angle) 就是它的实际宽度,再减去它所处位置相关的那么多的 barWidth? ,我们就得到它实际“超出”最后一个 bar 右边界的距离。当然,在本图中,只有最后一个超出而已。但如上面所说,在实际情况里计算下来,很可能中间某些 name 最终“超出”的距离大于最后一个 name 超出的距离,所以我们要取 max 。
我们共有三个变量,所以还需要两个方程,很容易有:
(2) leftMargin + barWidth? * count + rightMargin? = fullWidth
(3) rightMargin? = max(bestNameWidth? - barWidth? * 0.5 + minRightMargin, minRightMargin)
方程 (2) 很好理解。方程 (3) 是说我们至少要保证 rightMargin? 有 minRightMargin 那么大,因为很可能 bestNameWidth? 并没有超过 barWidth? 的一半,例如都是单个字符的 Name,请想象一下。
三个方程解三个未知数,看起来并不难,那就先来约化。
把 (1) 带入 (3),有:
(4) rightMargin? = max( index in 0..<count: max(nameWidth[index] * cos(angle) + minRightMargin - ((count-1) - index)*barWidth?) - barWidth? * 0.5, minRightMargin)
根据 (2) 有:
(5) barWidth? = (fullWidth - leftMargin - rightMargin?) / count, 再代入 (4),得到:
(6) max( index in 0..<count: max(nameWidth[index] * cos(angle) - ((count-1) - index) * (fullWidth - leftMargin - rightMargin?) / count ) - (fullWidth - leftMargin - rightMargin?) / count * 0.5, minRightMargin) - rightMargin? = 0
在方程 (6) 中,只有一个变量 rightMargin? 了(别被它的外表吓着了),我们只需要解出它即可。但是这个方程因为有循环求最大值等,太繁琐了,反正最后我是不能将 rightMargin? 移项到一边。
似乎陷入困境了,怎么办呢?
在工程中,我们并不需要精确解,我们只需要足够近似的解。假设最好的 rightMargin? 的值为 n,那我们只需要一个 m 使得 abs(m - n) 足够小,例如小于 0.1 ,这比 iPhone 上一个像素要窄得多,足够了。而求近似解,自然该“牛顿迭代法”出场了。
我们将方程 (6) 看成是函数
f(rightMargin?) = max( index in 0..<count: max(nameWidth[index] * cos(angle) - ((count-1) - index) * (fullWidth - leftMargin - rightMargin?) / count ) - (fullWidth - leftMargin - rightMargin?) / count * 0.5, minRightMargin) - rightMargin?
的根,即求取 f(rightMargin?) = 0
时的 rightMargin?
。
根据牛顿迭代法,我们先猜测一个 rightMargin?
,例如 1,然后由公式:
x_(n+1) = x_(n) - f(x_(n)) / f'(x_(n))
,其中 f'
为 f
的导数,x_(n)
为 第 n 个 rightMargin?
我们可以得出一个更好的 rightMargin?,它更加接近最终解。最后,如果 x_(n+1)
与 x_(n)
之差的绝对值小于 0.1 ,我们就认为已找到合适的 rightMargin? 了。关键代码如下:
var currentTryRightMargin: CGFloat = 1
var nextTryRightMargin: CGFloat = 0
while true {
var currentBarWidth = (size.width - barLeftMargin - currentTryRightMargin) / CGFloat(nameWidths.count)
func nMax() -> CGFloat {
var _max: CGFloat = 0
for i in 0..<nameWidths.count {
let newValue = nameWidths[i] * ratio + minBarRightMargin - CGFloat((nameWidths.count - 1) - i) * currentBarWidth
if newValue > _max {
_max = newValue
}
}
return _max
}
let fN = max(nMax() - currentBarWidth * 0.5, minBarRightMargin) - currentTryRightMargin
let fpN = 1 / CGFloat(nameWidths.count) * 0.5 - 1
nextTryRightMargin = currentTryRightMargin - fN / fpN
if abs(nextTryRightMargin - currentTryRightMargin) < 0.01 {
break
}
currentTryRightMargin = nextTryRightMargin
}
var barRightMargin = currentTryRightMargin
其中 fpN
是 f 的导数,它是个常量且不为0,那么牛顿迭代法将具有平方收敛的性能,因此可以快速逼近最优解。
注意 nMax()
是计算方程 (6) 中里面的 max 的,currentBarWidth
其实就是方程 (5)。
最后我们有了一个足够近似的 barRightMargin ,再计算出其他两个变量是分分钟的事情,不再赘述。实际效果如下:
我打算根据上面的工作做出一个小巧的图表图片库,专门用于 WATCH。目前已有代码放在 https://github.com/nixzhu/AdaptiveChartDemo ,可以画出柱状图和折线图,待增添更多样式。
===============
欢迎转载,但请一定注明出处! https://github.com/nixzhu/dev-blog
欢迎转发此条 Tweet https://twitter.com/nixzhu/status/585622265154428928 或微博 http://weibo.com/2076580237/Cci3ReTIf 以分享此文!
如果你认为这篇文章不错,也有闲钱,那你可以用支付宝扫描下方二维码随便捐助一点,以慰劳作者的辛苦: