iOS 画气泡(bubble)

本文是关于iOS代码画气泡,手把手教你画一个气泡,其他形状请读者自行尝试,希望大家玩的开心!

//
//  SpeechBubbleView.m
//  demo
//
//  Created by mygame on 15/3/4.
//  Copyright (c) 2015年 mygame. All rights reserved.
//

#import "SpeechBubbleView.h"
#import <CoreGraphics/CoreGraphics.h>

#define kPopupTriangleHeigh 12
#define kPopupTriangleWidth 22
#define kBorderOffset       0//0.5f
@implementation SpeechBubbleView
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor purpleColor];
    }
    return self;
}

- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];

    CGFloat viewW = rect.size.width;
    CGFloat viewH = rect.size.height;

    CGFloat strokeWidth = 1;
    CGFloat borderRadius = 10;
    CGFloat offset = strokeWidth + kBorderOffset;

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetLineJoin(context, kCGLineJoinRound); //
    CGContextSetLineWidth(context, strokeWidth); // 设置画笔宽度
    CGContextSetStrokeColorWithColor(context, [UIColor lightGrayColor].CGColor); // 设置画笔颜色
    CGContextSetFillColorWithColor(context, [UIColor lightGrayColor].CGColor); // 设置填充颜色

    // 画三角形
    /*
     ---\/
     */  /*

    画红色部分

  */
    CGContextBeginPath(context);
    CGContextMoveToPoint(context, borderRadius+offset, viewH-kPopupTriangleHeigh-offset);
    CGContextAddLineToPoint(context, round((viewW-kPopupTriangleWidth)/ 2.0f) + offset, viewH-kPopupTriangleHeigh-offset);
    CGContextAddLineToPoint(context, round(viewW/2.0f), viewH-offset);
    CGContextAddLineToPoint(context, round((viewW+kPopupTriangleWidth)/2.0f)+offset, viewH-kPopupTriangleHeigh-offset);
  
    // 画其余部分  /* 

  

  */
    CGContextAddArcToPoint(context, viewW-offset, viewH-kPopupTriangleHeigh-offset, viewW-offset, kPopupTriangleHeigh+offset, borderRadius-strokeWidth);
    CGContextAddArcToPoint(context, viewW-offset, offset, viewW-borderRadius-offset, offset, borderRadius-strokeWidth);
    CGContextAddArcToPoint(context, offset, offset, offset, borderRadius+offset, borderRadius-strokeWidth);
    CGContextAddArcToPoint(context, offset, viewH-kPopupTriangleHeigh-offset, borderRadius+offset, viewH-kPopupTriangleHeigh-offset, borderRadius-strokeWidth);
    CGContextClosePath(context);
    CGContextDrawPath(context, kCGPathFillStroke);
}

@end

关于CGContextAddArcToPoint接口解释请点击这里

 

时间: 2024-11-05 19:03:49

iOS 画气泡(bubble)的相关文章

iOS 画圆形头像

demo下载地址:http://pan.baidu.com/s/1mgBf6YG _logoImageView.image = [self getEllipseImageWithImage:[UIImage imageNamed:@"1_wsq724439564.jpg"]]; -(UIImage*)getEllipseImageWithImage:(UIImage*)originImage { CGFloat padding = 5;//圆形图像距离图像的边距 UIColor* ep

纯css 画气泡

我们知道运用css可以绘画出各式各样的形状:三角形,圆形,正方形,椭圆形,平行四边形等等,而通过他们之间进行两两组合可以变换出各种意想不到的效果图,气泡框就是其中一个.最简单的气泡框就是一个矩形框+一个三角框. 我们先来看看用css如何画三角形:  css绘三角形之 border方法 先画一个100*100的矩形,给他四边加上不同颜色的边框.代码如下: .demo{ width:100px; height:100px; border:50px solid ;border-color:red pi

高德 ios 自定义气泡添加点击事件无效问题

在使用高德地图sdk开发的时候,需要自定义气泡吹出框,发现气泡添加的点击事件或者button都没响应. 原因:自定义的气泡是添加到大头针上的,而大头针的size只有下面很小一部分,所以calloutView是在大头针的外面的.而 iOS 按钮超过父视图范围是无法响应事件的处理方法. 解决办法: 在CustomAnnotationView.m中重写hittest方法: - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {  

iOS 画环形图

由于新项目的的需求,需要画环形图,由于以前都没接触过这一类(我是菜鸟),去cocochina山找到了一个案例,个人觉得还可以,分享一下 github 地址https://github.com/zhouxing5311/ZZCircleProgress 这个使用起来非常的简单 作者开放了很多接口,可以根据自己的需求进行更改 一般就是声明一个累类就Ok了 具体实现的代码如下 可能我的代码有点不一样,我自己加入了一些元素进去 //无小圆点.同动画时间 self.zzCircleProgress = [

ios画画板

1 @interface NJView () 2 /** 3 * 定义一个大数组(大数组中保存小数组, 每一个小数组保存一条直线所有的点) 4 */ 5 @property (nonatomic, strong) NSMutableArray *totalPoints; 6 7 @end 8 9 @implementation NJView 10 11 - (NSMutableArray *)totalPoints 12 { 13 if (_totalPoints == nil) { 14 _t

ios画直线原理

画直线方法1: #pragma mark 画直线-比较简便的画法void drawLineEasy(){    CGContextRef ctx = UIGraphicsGetCurrentContext();    CGContextMoveToPoint(ctx, 0, 0);    CGContextAddLineToPoint(ctx, 100, 100);    CGContextStrokePath(ctx);} 画直线方法2: #pragma mark 画一条直线void draw

[ios]ios画线 UIGraphicsBeginImageContextWithOptions--生成透明的图形

参考 :http://www.mgenware.com/blog/?p=493 这三种东西:CGContextRef,CGPath和UIBezierPath.本质上都是一样的,都是使用Quartz来绘画.只不过把绘图操作暴露在不同的API层面上,在具体实现上,当然也会有一些细小的差别. 我们将主要使用这3个类型,绘制出同一张图片,如下,一个笑脸: 首先使用Quartz的CGPath来做这张图.很简单,首先创建用于转移坐标的Transform,然后创建一个CGMutablePathRef(属于CG

IOS画线的问题

很多控件中希望加一条线, 常见横的竖的, 比如在一个页面的header里, cell中, 像tableview那样那样的分割线. 所以我总结了几种方式供大家参考: 1. 利用CGContext去画, 举个例子: UIImageView *imageView=[[UIImageView alloc] initWithFrame:self.view.frame]; [self.view addSubview:imageView]; self.view.backgroundColor=[UIColor

iOS画圆、画线

UIView: - (void)drawRect:(CGRect)rect { [super drawRect:rect]; CGRect frame = CGRectMake(50, 100, 100, 100); /*画填充圆 */ CGContextRef context = UIGraphicsGetCurrentContext(); [[UIColor whiteColor] set]; CGContextFillRect(context, rect); CGContextAddEll