绘图在异步线程生成群聊图片

作者: brzhang | 来源:发表于2016-02-25 22:15 被阅读126次

绘图在异步线程生成群聊图片
android异步生成图片
UIGraphicsGetImageFromCurrentIma
iOS 多线程
仿微信群头像实现
SDWebImage设计思路及对我们项目的启迪。
在异步线程中下载很多图片,如果失败了,该如何处理?请结合RunL
那些好玩有趣的网站儿
iOS-Swift相关
iOS 异步线程下载图片

另外一种方式来生成群聊图片：

注意的点：

因为图片是一张张从网络下载而来的，所以，我们事先不知道那张图片会先下载下来，所以，图片的覆盖方式可能不是我们想要的，这时候怎么办？可以设置一个变量记录是否都下载完，然后在调整位置。
view自身的tag是0，上面的子view的tag不能设置为0，至少从1开始。
重构代码很重要，事实上，这份代码已经重构了2轮了，也许还能重构。
ValueChangeDelete 方便我们用同一套代码测试两种方式生成群聊图片的性能，耗时。

//
//  CircleImage.swift
//
//  Created by brzhang on 16/2/25.
//  Copyright © 2016年 brzhang. All rights reserved.
//

import UIKit

class GroupCirCleImage: UIView {

    var borderWidth: CGFloat = 1.5
    var borderColor = UIColor.greenColor()
    var imageWidth: CGFloat
    var imageHeight: CGFloat
    var imageUrls : [String]?
    var ctx: CGContextRef?
    var imageCoverPx: CGFloat = 10
    lazy var sdManger = SDWebImageManager.sharedManager()
    var frames: [String: CGRect] = [String: CGRect]()
    var countFlag = 0
    init(width: CGFloat, height: CGFloat, imageUrls: [String]?) {
        imageWidth = width / 2
        imageHeight = width / 2
        self.imageUrls = imageUrls
        super.init(frame: CGRectMake(0, 0, width, height))
        drawImages()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    override func drawRect(rect: CGRect) {
        // Drawing code
        super.drawRect(rect)
    }

    func initFrames() {
        frames["topLeft"] = CGRectMake(0, 0, imageWidth + imageCoverPx, imageCoverPx + imageHeight)
        frames["topRight"] = CGRectMake(imageWidth - imageCoverPx, 0, imageWidth + imageCoverPx, imageCoverPx + imageHeight)
        frames["bottomLeft"] = CGRectMake(0, imageHeight - imageCoverPx, imageWidth + imageCoverPx, imageCoverPx + imageHeight)
        frames["bottomRight"] = CGRectMake(imageWidth - imageCoverPx, imageHeight - imageCoverPx, imageWidth + imageCoverPx, imageCoverPx + imageHeight)
        frames["topCenter"] = CGRectMake(self.center.x - (imageWidth + imageCoverPx) / 2, 0, imageWidth + imageCoverPx, imageCoverPx + imageHeight)
    }

    func init_context(size: CGSize) -> CGContextRef? {
        UIGraphicsBeginImageContext(size);
        let ctx = UIGraphicsGetCurrentContext()

        // 设置笔触颜色
        CGContextSetStrokeColorWithColor(ctx, borderColor.CGColor)

        // 设置笔触宽度
        CGContextSetLineWidth(ctx, borderWidth)

        // 设置填充色

        CGContextSetFillColorWithColor(ctx, UIColor.purpleColor().CGColor)

        CGContextSetLineJoin(ctx, .Round)

        CGContextSetLineCap(ctx, .Round)

        return ctx
    }

    func drawImages() {

        initFrames()

        guard imageUrls != nil && imageUrls?.count > 0 else {
            return
        }
        let count = imageUrls!.count
        switch count {
        case 1:
            // 画图
            getImageFromNet(imageUrls![0], completion: { [unowned self](result) -> Void in
                guard let image = result as? UIImage else {
                    return
                }
                let ctx = self.init_context(self.frame.size)
                let borderRect = CGRectMake(self.borderWidth / 2, self.borderWidth / 2, self.imageWidth * 2 - self.borderWidth, self.imageHeight * 2 - self.borderWidth)
                CGContextAddEllipseInRect(ctx, borderRect)
                CGContextStrokePath(ctx)

                let rect = CGRectMake(self.borderWidth, self.borderWidth, self.imageWidth * 2 - self.borderWidth * 2, self.imageHeight * 2 - self.borderWidth * 2)
                CGContextAddEllipseInRect(ctx, rect);
                // 裁剪(按照当前的路径形状裁剪)
                CGContextClip(ctx)
                image.drawInRect(rect)

                let newImage = UIGraphicsGetImageFromCurrentImageContext();
                UIGraphicsEndImageContext();
                self.addSubview(UIImageView.init(image: newImage))
            })
        case 2:
            countFlag = 2
            getImageFromNet(imageUrls![0], completion: { [unowned self](result) -> Void in

                self.addToView(result, frame: self.frames["topLeft"], layerPosition: 2 - 0)
            })
            getImageFromNet(imageUrls![1], completion: { [unowned self](result) -> Void in
                self.addToView(result, frame: self.frames["bottomRight"], layerPosition: 2 - 1)
            })
        case 3:
            countFlag = 3
            getImageFromNet(imageUrls![0], completion: { [unowned self](result) -> Void in

                self.addToView(result, frame: self.frames["topCenter"], layerPosition: 3 - 0)
            })
            getImageFromNet(imageUrls![1], completion: { [unowned self](result) -> Void in
                self.addToView(result, frame: self.frames["bottomRight"], layerPosition: 3 - 1)
            })
            getImageFromNet(imageUrls![2], completion: { [unowned self](result) -> Void in
                self.addToView(result, frame: self.frames["bottomLeft"], layerPosition: 3 - 2)
            })

        case 4:
            countFlag = 4

            let startTime = NSDate().timeIntervalSince1970
            hlog("start point is \(startTime)")
            getImageFromNet(imageUrls![0], completion: { [unowned self](result) -> Void in

                self.addToView(result, frame: self.frames["topLeft"], layerPosition: 4 - 0)
            })
            getImageFromNet(imageUrls![1], completion: { [unowned self](result) -> Void in

                self.addToView(result, frame: self.frames["topRight"], layerPosition: 4 - 1)
            })
            getImageFromNet(imageUrls![2], completion: { [unowned self](result) -> Void in
                self.addToView(result, frame: self.frames["bottomRight"], layerPosition: 4 - 2)
            })

            getImageFromNet(imageUrls![3], completion: { [unowned self](result) -> Void in
                self.addToView(result, frame: self.frames["bottomLeft"], layerPosition: 4 - 3)
            })
            hlog("end point is \(NSDate().timeIntervalSince1970) ,it takes \(NSDate().timeIntervalSince1970 - startTime)")
        default:
            break
        }
    }

    func addToView(result: AnyObject, frame: CGRect?, layerPosition: Int) {
        let newImage = self.generateNewImages(result)
        let uiimage = UIImageView.init(image: newImage)
        uiimage.frame = frame!
        uiimage.tag = layerPosition
        uiimage.hidden = true
        self.addSubview(uiimage)
        self.countFlag--
        if countFlag <= 0 {
            adjustLayerPosition()
        }
    }

    /**
     重新排序，覆盖方式，层级越大，越在上层,注意，view本身的tag是0
     */
    func adjustLayerPosition() {
        for i in Range(start: 1, end: 5) {
            let view = self.viewWithTag(i)
            if view != nil {
                view!.removeFromSuperview()
                view?.hidden = false
                self.insertSubview(view!, atIndex: i - 1)
            }
        }
    }

    func generateNewImages(result: AnyObject) -> UIImage? {
        guard let image = result as? UIImage else {
            return nil
        }
        let ctx = self.init_context(CGSizeMake(self.imageWidth + self.imageCoverPx, self.imageHeight + self.imageCoverPx))
        let borderRect = CGRectMake(self.borderWidth / 2, self.borderWidth / 2, self.imageWidth + self.imageCoverPx - self.borderWidth, self.imageHeight + self.imageCoverPx - self.borderWidth)
        CGContextAddEllipseInRect(ctx, borderRect)
        CGContextStrokePath(ctx)

        let rect = CGRectMake(self.borderWidth, self.borderWidth, self.imageWidth + self.imageCoverPx - self.borderWidth * 2, self.imageHeight + self.imageCoverPx - self.borderWidth * 2)
        CGContextAddEllipseInRect(ctx, rect);
        // 裁剪(按照当前的路径形状裁剪)
        CGContextClip(ctx)
        image.drawInRect(rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return newImage
    }

    func getImageFromNet(imageUrl: String, completion: blockOne) {
        sdManger.downloadImageWithURL(NSURL.init(string: imageUrl), options: SDWebImageOptions.AllowInvalidSSLCertificates, progress: nil, completed: { (image, error, cacheType, flag, nsurl) -> Void in
            if error == nil {
                completion(result: image)
            }
        })
    }
}

extension GroupCirCleImage: ValueChangeDelete {

    func imageCoverPxChange(newConverPx: CGFloat) {
        imageCoverPx = newConverPx
        for imageview in self.subviews {
            imageview.removeFromSuperview()
        }
        drawImages()
    }
    func imageWidthChange(newWidth: CGFloat) {
    }
    func imageHeightChange(newHeight: CGFloat) {
    }
}

总结，使用绘图的方式来生成群聊图片。

问题：

这种方式比之前的方式，那种会更加好，为什么？

绘图在异步线程生成群聊图片
另外一种方式来生成群聊图片：注意的点：因为图片是一张张从网络下载而来的，所以，我们事先不知道那张图片会先下载下...
android异步生成图片
下面来说说在Android上如果异步生成图片，通过xml布局用View排版好图片样式，在子线程生成一张图片，以满足...
UIGraphicsGetImageFromCurrentIma
绘图操作还原时内存暴增目前在做绘图板,每画一笔需要生成一张图片然后销毁, 这时生成图片的内存是没有问题的, 但...
iOS 多线程
GCD NSOperation（NSNetWorking和图片异步下载） NSThread （常驻线程的实现）多...
仿微信群头像实现
微信中群聊头像的实现步骤: 1:设定要显示的图片总大小 2:计算多张图片每张显示的位置坐标配置 3:利用绘图合成 ...
SDWebImage设计思路及对我们项目的启迪。
1.要实现网络图片下载首先要思考几个问题。 1>.要在异步线程中执行，否则会阻塞主线程（线程管理） 2>.考虑图片...
在异步线程中下载很多图片,如果失败了,该如何处理?请结合RunL
(提示:在异步线程中启动一个RunLoop重新发送网络请求,下载图片) 1>重新下载图片 2>下载完毕,利用Run...
那些好玩有趣的网站儿
1.单张手绘图片生成视频动图https://sketch.metademolab.com/canvas[https...
iOS-Swift相关
swift程序. 1.Swift多线程之Operation：异步加载CollectionView图片2.Swift...
iOS 异步线程下载图片
项目中有一处使用了第三方的图片服务器,当加载列表时,加载图片略缩图,点击略缩图后查看原图, 需求比较简单,就不使用...