CGPath绘制到SVG输出

Question

我使用CGPath和CAShapeLayer创建了一张绘画画布，现在我的客户希望输出的图像具有可伸缩性，并且我发现了SVG Kit SVG Kit，但我不知道如何使用这个库。我在库示例中也没有找到任何示例！是否有人知道如何使用此库将CGPath转换为SVG，或者能给我一个教程？

先谢谢了！

- FlorinD

Answer 1

你可以从GitHub上查看这个文件开始。它有一个将CGPathRef转换为SVG Path的d属性的例程。我写了这个例程。

该类方法的签名是+(NSString*) svgPathFromCGPath:(CGPathRef)aPath; [更新：下面添加了代码片段]

#import "SVGPathGenerator.h"

...

CGMutablePathRef pathToBuild = CGPathCreateMutable();
CGPathMoveToPoint(pathToBuild, nil, 10, 10);
CGPathAddQuadCurveToPoint(pathToBuild, nil, 20, 0, 30, 40);
CGPathAddCurveToPoint(pathToBuild, nil, 20, 40, 40, 30, 100, 90);
CGPathAddLineToPoint(pathToBuild, nil, 50, 100);

NSString* aDAttribute =  [SVGPathGenerator svgPathFromCGPath:pathToBuild];
NSLog(@"%@",aDAttribute);

输出： M10.0 10.0Q20.0 0.0 30.0 40.0C20.0 40.0 40.0 30.0 100.0 90.0L50.0 100.0

注意，如果添加圆弧，则输出可能不会有紧密的对应关系，因为SVG中的圆弧和Quartz中的圆弧描述方式非常不同。

如果您想将其输出到简单的SVG文件中，那么可以进行以下操作：

 CGRect boundingBox = CGPathGetPathBoundingBox(pathToBuild);

NSString* svgAsString = [NSString stringWithFormat:@" <?xml version=\"1.0\" encoding=\"UTF-8\"?> \
                         <!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\"> \
                         <svg  xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewport-fill=\"none\" viewBox=\"%lf, %lf, %lf, %lf\" version=\"1.1\" height=\"%lf\" width=\"%lf\" > \
                         <path fill=\"none\" stroke=\"green\" d=\"%@\" /> \
                         </svg>",
                         boundingBox.origin.x, boundingBox.origin.y, boundingBox.size.width, boundingBox.size.height, boundingBox.size.height, boundingBox.size.width, aDAttribute
                         ];

NSData* utf8Data = [svgAsString dataUsingEncoding:NSUTF8StringEncoding];
[utf8Data writeToFile:pathToFile atomically:YES];

（我没有编译这段代码）。

- Glenn Howes

---

你好，非常感谢你的帮助。如果可以，能否给我一个示例，我如何使用svgPathFromCGPath函数？谢谢，祝你有美好的一天！ - FlorinD

好的，代码片段已附加。 - Glenn Howes

你好，感谢您的回复。我看到了这个函数，但我的问题是在将CGPath转换为SVGPath后如何生成SVG文件的例程。非常感谢您的帮助！祝您有愉快的一天！ - FlorinD

好的，我添加了一个我随手编写的代码片段来完成这个。 - Glenn Howes

@Curnelious 这个答案非常清楚地说明了如何实现。使用SVGgh中的svgPathFromCGPath工具将CGPath转换为字符串，然后将其插入到SVG文件中即可。 - Glenn Howes