ios swift 核心图形 - 字符串颠倒

t4n*_*3d3 3 string core-graphics ios swift

当我想在 CGContext 中绘制字符串时,文本出现颠倒。

我知道这个主题已经发布在这里,但没有一个解决方案对我有用。

我确实翻转了上下文:

graphContext.scaleBy(x: 1.0, y: -1.0)
graphContext.translateBy(
        x: CGFloat(0.0),
        y: CGFloat(-1.0 * graphSize.h))
Run Code Online (Sandbox Code Playgroud)

我也尝试对 textMatrix 执行相同的操作,但这对结果没有任何影响。

完整的项目源在这里:dropbox 屏幕截图在这里:屏幕截图

不明白为什么它不起作用。

谢谢

我的绘制方法:

override func draw(_ rect: CGRect) {

        let graphSize = GSize(
            w: Double(self.frame.width),
            h: Double(self.frame.height))

        rebaseAreas(graphSize: graphSize)

        graphContext = UIGraphicsGetCurrentContext()!
        graphContext.saveGState()

        // Flip the context coordinates, in iOS only
        graphContext.scaleBy(x: 1.0, y: -1.0)
        graphContext.translateBy(
            x: CGFloat(0.0),
            y: CGFloat(-1.0 * graphSize.h))


        // this has no effect, I can delete it and nothing changes
        graphContext.textMatrix = CGAffineTransform(scaleX: 2.0, y: -2.0)


        drawBackground(
            inRect: graph_drawing_rect,
            inContext: graphContext)


        drawGuidelines(
            vAxis: vAxis,
            hAxis: hAxis,
            inRect: serie_drawing_rect,
            inContext: graphContext)


        drawSerie(
            points,
            inRect: serie_drawing_rect,
            inContext: graphContext)


        drawTitle(
            inRect: graph_drawing_rect,
            inContext: graphContext)


        drawVAxisLabels(
            vAxis: vAxis,
            inRect: x_labels_drawing_rect,
            inContext: graphContext)


        drawHAxisLabels(
            hAxis: hAxis,
            inRect: y_labels_drawing_rect,
            inContext: graphContext)

        graphContext.restoreGState()
    }
Run Code Online (Sandbox Code Playgroud)

我的drawTitle方法:

func drawTitle(
        inRect rect: GRect,
        inContext context: CGContext) {

        // saving the calling state
        context.saveGState()

        let title = titleLabelText

        let lblAttributes = [
            NSFontAttributeName: titleFont,
            NSForegroundColorAttributeName: title_font_color,
            ] as [String : Any]

        let origin = CGPoint(
            x: title_label_position.x * rect.w,
            y: title_label_position.y * rect.h)

        let drawRect = CGRect(
            origin: origin,
            size: title.size(attributes: lblAttributes))

        title.draw(
            in: drawRect,
            withAttributes: lblAttributes)

        // returning the calling state
        graphContext.restoreGState()
    }
Run Code Online (Sandbox Code Playgroud)

rob*_*off 8

您正在使用 UIKit 的字符串绘制支持。UIKit 将您正在使用的方法 , 添加drawInRect:withAttributes:NSString

UIKit 在绘制字符串时设置文本矩阵。(您可以设置一个断点CGContextSetTextMatrix来验证这一点。)这意味着您尝试设置textMatrix没有效果。

UIKit 期望图形上下文的原点位于绘图区域的左上角,并且期望 y 坐标向绘图区域的底部增加。您已经翻转了 y 轴的方向,因此 UIKit 最终会颠倒绘制文本。

由于无法使用文本矩阵来修复此问题,因此必须使用变换矩阵来修复它。您需要将原点平移到应包含文本的矩形的左上角,翻转 y 轴,在原点绘制文本,然后恢复变换矩阵。

您可以将其包装在扩展方法中NSString

private extension String {

    func drawFlipped(in rect: CGRect, withAttributes attributes: [String: Any]) {
        guard let gc = UIGraphicsGetCurrentContext() else { return }
        gc.saveGState()
        defer { gc.restoreGState() }
        gc.translateBy(x: rect.origin.x, y: rect.origin.y + rect.size.height)
        gc.scaleBy(x: 1, y: -1)
        self.draw(in: CGRect(origin: .zero, size: rect.size), withAttributes: attributes)
    }

}
Run Code Online (Sandbox Code Playgroud)

然后你可以使用你的扩展方法而不是draw(in:withAttributes:). 例如,以下是您的drawTitle(inRect:inContext:)方法的替代方法:

func drawTitle(
    inRect rect: GRect,
    inContext context: CGContext) {

    let title = titleLabelText

    let lblAttributes = [
        NSFontAttributeName: titleFont,
        NSForegroundColorAttributeName: title_font_color,
        ] as [String : Any]

    let origin = CGPoint(
        x: title_label_position.x * rect.w,
        y: title_label_position.y * rect.h)

    let drawRect = CGRect(
        origin: origin,
        size: title.size(attributes: lblAttributes))

    title.drawFlipped(in: drawRect, withAttributes: lblAttributes)
}
Run Code Online (Sandbox Code Playgroud)

结果:

标题绘制正确的屏幕截图

请注意,我只修复了drawTitle(inRect:inContext:),因此所有其他文本仍然是颠倒的。