Question

我需要转换路径的SVG描述，即。类似的东西：

M400 597 C235 599 478 607 85 554 C310 675 2 494 399 718 C124 547 569 828 68 400 C-108 317 304 703 96 218 L47 215 L400 290 C602 -146 465 467 550 99 L548 35 L706 400 L580 686 C546 614 591 672 529 629 L400 597 Z

到所有沿着该路径落下的像素的列表中（假设画布是监视器的大小。正如您所看到的，我需要处理的路径相当于涂鸦并且非常复杂。理想情况下，我我希望生成这样一条路径，然后将整个事物转换为逐像素描述，即

p= [(403, 808), (403, 807), (403, 805), (403, 802), (403, 801), (403, 800), (403, 799), 
(403, 797), (403, 794), (403, 792), (402, 789), (401, 787), (400, 785), (399, 784), 
(399, 783), (398, 782)]  # ... it'd be much longer, but you get the idea

或者，我会满足于使用任何生成具有曲线和线条成分的路径的方法（因为，SVG就是我到目前为止实现这一目标的方式）。背景有点奇怪;它是用于认知心理学的实验，其中我需要逐渐为遍历根据某些规则生成的路径的点设置动画，和将该路径导出为像素数据。

要做动画，我打算简单地在路径的每个x，y位置重绘点 - 因此需要所述列表。

我的数学技能不是很好 - 我来自设计代码，而不是CS-并且路径会变得非常复杂，这意味着仅用数学来计算这些要点......可能不会超出我的要求，但肯定要求更高比我的目标。

图书馆，技巧，策略 - 所有欢迎＆amp;赞赏。

Answer 1

我需要将SVG路径转换为离散点以用于某些奇怪的目的。显然没有轻型库可以做到这一点。我最终创建了自己的解析器。

输入文件主要由贝塞尔曲线组成。我为此写了一个快速函数：

*(*(ptr+i)+j);
// where i=1 and j=0

可以如下使用它来生成10个样本：

def cubic_bezier_sample(start, control1, control2, end):
    inputs = np.array([start, control1, control2, end])
    cubic_bezier_matrix = np.array([
        [-1,  3, -3,  1],
        [ 3, -6,  3,  0],
        [-3,  3,  0,  0],
        [ 1,  0,  0,  0]
    ])
    partial = cubic_bezier_matrix.dot(inputs)

    return (lambda t: np.array([t**3, t**2, t, 1]).dot(partial))

def quadratic_sample(start, control, end):
    # Quadratic bezier curve is just cubic bezier curve
    # with the same control points.
    return cubic_bezier_sample(start, control, control, end)

代码需要numpy。如果你愿意，你也可以不用numpy做点积。我可以使用svg.path获取参数。

完整代码示例

n = 10
curve = cubic_bezier_sample((50,0), (50,100), (100,100), (50,0))
points = [curve(float(t)/n) for t in xrange(0, n + 1)]

Answer 2

我在different post的unutbu中找到了我的大部分答案（第二个答案）。

这是我对他的基本功能的修改，带有一些额外的功能来解决我上面的问题。我必须为线段编写类似的功能，但这显然要容易得多，并且它们之间将能够将曲线和线性段的任意组合拼凑在一起以实现我的目标，如上所述。

def pascal_row(n):
    # This is over my designer's brain, but unutbu says:
    # "This returns the nth row of Pascal's Triangle"
    result = [1]
    x, numerator = 1, n
    for denominator in range(1, n//2+1):
        # print(numerator,denominator,x)
        x *= numerator
        x /= denominator
        result.append(x)
        numerator -= 1
    if n&1 == 0:
        # n is even
        result.extend(reversed(result[:-1]))
    else:
        result.extend(reversed(result))
    return result


def bezier_interpolation(origin, destination, control_o, control_d=None):
        points = [origin, control_o, control_d, destination] if control_d else [origin, control_o, destination]
        n = len(points)
        combinations = pascal_row(n - 1)

        def bezier(transitions):
            # I don't really understand any of this math, but it works!
            result = []
            for t in transitions:
                t_powers = (t ** i for i in range(n))
                u_powers = reversed([(1 - t) ** i for i in range(n)])
                coefficients = [c * a * b for c, a, b in zip(combinations, t_powers, u_powers)]
                result.append(
                    list(sum([coef * p for coef, p in zip(coefficients, ps)]) for ps in zip(*points)))
            return result


        def line_segments(points, size):
            # it's more convenient for my purposes to have the pairs of x,y  
            # coordinates that eventually become the very small line segments 
            # that constitute my "curves
            for i in range(0, len(points), size):
                yield points[i:i + size]


        # unutbu's function creates waaay more points than needed, and 
        # these extend well through the "destination" point I want to end at, so,
        # I keep inspecting the line segments until one of them passes through 
        # my intended stop point (ie. "destination") and then manually stop 
        # collecting, returning the subset I want; probably not efficient,
        # but it works
        break_next = False  
        segments = []
        for pos in line_segments(bezier([0.01 * t for t in range(101)]), 2):
            if break_next:
                segments.append([break_next, destination])
                break
            try:
                if [int(i) for i in pos[0]] == destination:
                    break_next = pos[0]
                    continue
                segments.append(pos)
            except IndexError:
                # not guaranteed to get an even number of points from bezier()
                break
            return segments

Answer 3

svg path interpolator JavaScript库将svg路径转换为多边形点数据，并提供样本大小和保真度选项。该库支持完整的SVG规范，并将考虑路径上的转换。它需要一个svg输入并产生表示插值点的JSON。

如何在Python中将SVG路径插入到像素坐标（不仅仅是栅格）中

3 个答案:

完整代码示例