really bubble image

2026-08-23 03:36:34 +10:00 · 2015-04-01 15:50:57 +08:00
parent f685167050
commit bbd87f0603
3 changed files with 91 additions and 11 deletions
@@ -14,9 +14,9 @@ class ImageCache {

    var cache = NSCache()

-    func rightMessageImageOfMessage(message: Message, completion: (UIImage) -> ()) {
+    func imageOfMessage(message: Message, withTailDirection tailDirection: MessageImageTailDirection, completion: (UIImage) -> ()) {

-        let imageKey = "image-\(message.messageID)-\(message.localAttachmentName)--\(message.attachmentURLString)"
+        let imageKey = "image-\(message.messageID)-\(message.localAttachmentName)-\(message.attachmentURLString)"

        // 先看看缓存
        if let image = cache.objectForKey(imageKey) as? UIImage {
@@ -34,17 +34,17 @@ class ImageCache {
                        let imageFileURL = NSFileManager.yepMessageImageURLWithName(fileName),
                        let image = UIImage(contentsOfFile: imageFileURL.path!) {

-                            let rightMessageImage = image.bubbleImageWithTailDirection(.Right, size: CGSize(width: 200, height: 100))
+                            let messageImage = image.bubbleImageWithTailDirection(tailDirection, size: CGSize(width: 200, height: 100))

-                            self.cache.setObject(rightMessageImage, forKey: imageKey)
+                            self.cache.setObject(messageImage, forKey: imageKey)
                            
-                            completion(rightMessageImage)
+                            completion(messageImage)

                            return
                    }
                }

-                // TODO: 下载
+                // 下载

                if attachmentURLString.isEmpty {
                    completion(UIImage())
@@ -68,7 +68,7 @@ class ImageCache {
                        realm.commitWriteTransaction()
                    }

-                    let rightMessageImage = image.bubbleImageWithTailDirection(.Right, size: CGSize(width: 200, height: 100))
+                    let rightMessageImage = image.bubbleImageWithTailDirection(tailDirection, size: CGSize(width: 200, height: 100))

                    self.cache.setObject(rightMessageImage, forKey: imageKey)
                    
@@ -174,12 +174,92 @@ extension UIImage {

        let cgImage = CGImageCreateWithImageInRect(self.CGImage, rect)
        return UIImage(CGImage: cgImage)!
+    }

+    private func bubblePathWithTailDirection(tailDirection: MessageImageTailDirection, size: CGSize) -> UIBezierPath {
+        if tailDirection == .Right {
+            let cornerRadius: CGFloat = 30
+            let offset: CGFloat = 20
+            let width = size.width
+            let height = size.height
+
+            let bubble = UIBezierPath()
+            bubble.moveToPoint(CGPoint(x: cornerRadius, y: 0))
+            bubble.addArcWithCenter(CGPoint(x: cornerRadius, y: cornerRadius), radius: cornerRadius, startAngle: CGFloat(M_PI * 1.5), endAngle: CGFloat(M_PI), clockwise: false)
+
+            //bubble.addQuadCurveToPoint(CGPoint(x: 0, y: cornerRadius), controlPoint: CGPoint(x: 0, y: 0))
+
+            bubble.addLineToPoint(CGPoint(x: 0, y: height - cornerRadius))
+            bubble.addArcWithCenter(CGPoint(x: cornerRadius, y: height - cornerRadius), radius: cornerRadius, startAngle: CGFloat(M_PI), endAngle: CGFloat(M_PI * 0.5), clockwise: false)
+
+            bubble.addLineToPoint(CGPoint(x: width - (cornerRadius + offset), y: height))
+            bubble.addArcWithCenter(CGPoint(x: width - (cornerRadius + offset), y: height - cornerRadius), radius: cornerRadius, startAngle: CGFloat(M_PI * 0.5), endAngle: CGFloat(M_PI * 2), clockwise: false)
+
+            bubble.addLineToPoint(CGPoint(x: width, y: height - cornerRadius - 10))
+            bubble.addLineToPoint(CGPoint(x: width - offset, y: height - cornerRadius - 10 * 2))
+
+            bubble.addLineToPoint(CGPoint(x: width - offset, y: cornerRadius))
+            bubble.addArcWithCenter(CGPoint(x: width - (cornerRadius + offset), y: cornerRadius), radius: cornerRadius, startAngle: CGFloat(0), endAngle: CGFloat(M_PI * 1.5), clockwise: false)
+
+            bubble.closePath()
+
+            return bubble
+
+        } else {
+            let cornerRadius: CGFloat = 30
+            let offset: CGFloat = 20
+            let width = size.width
+            let height = size.height
+
+            let bubble = UIBezierPath()
+            bubble.moveToPoint(CGPoint(x: width - cornerRadius, y: 0))
+            bubble.addArcWithCenter(CGPoint(x: width - cornerRadius, y: cornerRadius), radius: cornerRadius, startAngle: -CGFloat(M_PI * 0.5), endAngle: 0, clockwise: true)
+            bubble.addLineToPoint(CGPoint(x: width, y: height - cornerRadius))
+            bubble.addArcWithCenter(CGPoint(x: width - cornerRadius, y: height - cornerRadius), radius: cornerRadius, startAngle: 0, endAngle: CGFloat(M_PI * 0.5), clockwise: true)
+            bubble.addLineToPoint(CGPoint(x: cornerRadius + offset, y: height))
+            bubble.addArcWithCenter(CGPoint(x: cornerRadius + offset, y: height - cornerRadius), radius: cornerRadius, startAngle: CGFloat(M_PI * 0.5), endAngle: CGFloat(M_PI), clockwise: true)
+
+            bubble.addLineToPoint(CGPoint(x: 0, y: height - cornerRadius - 10))
+            bubble.addLineToPoint(CGPoint(x: offset, y: height - cornerRadius - 10 * 2))
+
+            bubble.addLineToPoint(CGPoint(x: offset, y: cornerRadius))
+            bubble.addArcWithCenter(CGPoint(x: cornerRadius + offset, y: cornerRadius), radius: cornerRadius, startAngle: CGFloat(M_PI), endAngle: CGFloat(M_PI * 1.5), clockwise: true)
+
+            bubble.closePath()
+
+            return bubble
+        }
+    }
+
+    func bubbleImageWithTailDirection(tailDirection: MessageImageTailDirection) -> UIImage {
+        let scale: CGFloat = self.scale
+
+        UIGraphicsBeginImageContextWithOptions(self.size, false, scale)
+
+        let context = UIGraphicsGetCurrentContext()
+
+        var transform = CGAffineTransformConcat(CGAffineTransformIdentity, CGAffineTransformMakeScale(1.0, -1.0))
+        transform = CGAffineTransformConcat(transform, CGAffineTransformMakeTranslation(0.0, self.size.height))
+        CGContextConcatCTM(context, transform)
+
+        let drawRect = CGRect(origin: CGPointZero, size: self.size)
+
+        let bubble = bubblePathWithTailDirection(tailDirection, size: self.size)
+        CGContextAddPath(context, bubble.CGPath)
+        CGContextClip(context)
+
+        CGContextDrawImage(context, drawRect, self.CGImage)
+
+        let roundImage = UIGraphicsGetImageFromCurrentImageContext()
+
+        UIGraphicsEndImageContext()
+        
+        return roundImage
    }

    func bubbleImageWithTailDirection(tailDirection: MessageImageTailDirection, size: CGSize) -> UIImage {
-        let bubbleImage = self.fixRotation().cropToAspectRatio(size.width / size.height).resizeToTargetSize(size)
-        // TODO: Bubble
+        let bubbleImage = self.fixRotation().cropToAspectRatio(size.width / size.height).resizeToTargetSize(size).bubbleImageWithTailDirection(tailDirection)
+
        return bubbleImage
    }
 }
@@ -452,7 +452,7 @@ extension ConversationViewController: UICollectionViewDataSource, UICollectionVi
                        }
                    }

-                    ImageCache.sharedInstance.rightMessageImageOfMessage(message) { image in
+                    ImageCache.sharedInstance.imageOfMessage(message, withTailDirection: .Left) { image in
                        dispatch_async(dispatch_get_main_queue()) {
                            cell.messageImageView.image = image
                        }
@@ -489,7 +489,7 @@ extension ConversationViewController: UICollectionViewDataSource, UICollectionVi
                                }
                            }

-                            ImageCache.sharedInstance.rightMessageImageOfMessage(message) { image in
+                            ImageCache.sharedInstance.imageOfMessage(message, withTailDirection: .Right) { image in
                                dispatch_async(dispatch_get_main_queue()) {
                                    cell.messageImageView.image = image
                                }