如何在 Apple Watch 上绘制自定义图形?
Posted
技术标签:
【中文标题】如何在 Apple Watch 上绘制自定义图形?【英文标题】:How can I draw custom graphics on Apple Watch? 【发布时间】:2016-01-23 08:01:51 【问题描述】:如果我理解正确的话,我们只能在 Apple Watch 上使用图像和标准控件。如果是这样,是否可以在内存中的图像上绘制自定义图形,然后将这些图像放在屏幕上?
【问题讨论】:
【参考方案1】:在 watchOS2 中,您可以使用一些 CoreGraphics
来绘制 WKInterfaceImage
。
作为参考,请查看很棒的watchOS2 Sampler
画图示例:
// Create a graphics context
let size = CGSizeMake(100, 100)
UIGraphicsBeginImageContext(size)
let context = UIGraphicsGetCurrentContext()
// Setup for the path appearance
CGContextSetStrokeColorWithColor(context, UIColor.whiteColor().CGColor)
CGContextSetLineWidth(context, 4.0)
// Draw lines
CGContextBeginPath (context);
CGContextMoveToPoint(context, 0, 0);
CGContextAddLineToPoint(context, 100, 100);
CGContextMoveToPoint(context, 0, 100);
CGContextAddLineToPoint(context, 100, 0);
CGContextStrokePath(context);
// Convert to UIImage
let cgimage = CGBitmapContextCreateImage(context);
let uiimage = UIImage(CGImage: cgimage!)
// End the graphics context
UIGraphicsEndImageContext()
image.setImage(uiimage)
使用贝塞尔路径的示例:
// Create a graphics context
let size = CGSizeMake(100, 100)
UIGraphicsBeginImageContext(size)
let context = UIGraphicsGetCurrentContext()
// Setup for the path appearance
UIColor.greenColor().setStroke()
UIColor.whiteColor().setFill()
// Draw an oval
let rect = CGRectMake(2, 2, 96, 96)
let path = UIBezierPath(ovalInRect: rect)
path.lineWidth = 4.0
path.fill()
path.stroke()
// Convert to UIImage
let cgimage = CGBitmapContextCreateImage(context);
let uiimage = UIImage(CGImage: cgimage!)
// End the graphics context
UIGraphicsEndImageContext()
image.setImage(uiimage)
最后用PocketSVG显示SVG
// Create a graphics context
let size = CGSizeMake(512, 512)
UIGraphicsBeginImageContext(size)
let context = UIGraphicsGetCurrentContext()
// Setup for the path appearance
UIColor.yellowColor().setFill()
// Convert SVG -> CGPath -> UIBezierPath
let pocketSvg = PocketSVG(fromSVGFileNamed: "sample")
let path = pocketSvg.bezier
print(path)
path.fill()
// Convert to UIImage
let cgimage = CGBitmapContextCreateImage(context);
let uiimage = UIImage(CGImage: cgimage!)
// End the graphics context
UIGraphicsEndImageContext()
image.setImage(uiimage)
【讨论】:
以上是关于如何在 Apple Watch 上绘制自定义图形?的主要内容,如果未能解决你的问题,请参考以下文章