繪圖相關(平滑過渡色、鏤空效果击罪、部分圓角等)

1.繪制虛線
根據(jù)圖像的邊緣繪制虛線

view.center = self.view.center;
view.backgroundColor = [UIColor whiteColor];
[self.view addSubview:view];
CAShapeLayer * shapeLayer = [CAShapeLayer layer];

shapeLayer.strokeColor = [UIColor redColor].CGColor;

shapeLayer.fillColor = [UIColor greenColor].CGColor;

shapeLayer.path = [UIBezierPath bezierPathWithRect:view.bounds].CGPath;

shapeLayer.frame = view.bounds;

shapeLayer.lineWidth = 1.f;

shapeLayer.lineCap = kCALineCapRound;

shapeLayer.lineDashPattern = @[@20, @2];//第一個參數(shù)是線條的長度哲嘲,2代表的是間隔

[view.layer addSublayer:shapeLayer];

2.貝塞爾畫出曲線(可以是直線,改變線型就會變成虛線)

[path moveToPoint:CGPointMake(175, 100)];
[path addArcWithCenter:CGPointMake(150, 100) radius:25 startAngle:0 endAngle:M_PI*2 clockwise:YES];

[path moveToPoint:CGPointMake(160, 100)];
[path addArcWithCenter:CGPointMake(150, 100) radius:10 startAngle:0 endAngle:-2*M_PI clockwise:NO];

[path moveToPoint:CGPointMake(155, 100)];
[path addArcWithCenter:CGPointMake(150, 100) radius:5 startAngle:0 endAngle:-2*M_PI clockwise:NO];

[path moveToPoint:CGPointMake(150, 125)];
[path addLineToPoint:CGPointMake(150, 175)];
[path addLineToPoint:CGPointMake(125, 225)];
[path moveToPoint:CGPointMake(150, 175)];
[path addLineToPoint:CGPointMake(175, 225)];
[path moveToPoint:CGPointMake(100, 150)];
[path addLineToPoint:CGPointMake(200, 150)];


//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor greenColor].CGColor;
shapeLayer.lineWidth = 3;
shapeLayer.lineDashPhase = 1;

shapeLayer.strokeStart = 0.2;
shapeLayer.strokeEnd = 0.8;
//填充顏色的規(guī)則媳禁,zero 是  kCAFillRuleEvenOdd是從左到右穿過為1不穿過為0眠副,0為外部
shapeLayer.fillRule = kCAFillRuleNonZero;

shapeLayer.lineJoin = kCALineJoinRound;//交匯處的是否為圓角平切  不變等
shapeLayer.lineCap = kCALineCapSquare; //線型
shapeLayer.lineDashPattern = @[@3 ,@4];

shapeLayer.path = path.CGPath;
//add it to our view
[self.view.layer addSublayer:shapeLayer];

3.畫正方形(部分圓角)

CGSize radii = CGSizeMake(20, 20);
UIRectCorner corner = UIRectCornerTopLeft|UIRectCornerTopRight|UIRectCornerBottomLeft;
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corner cornerRadii:radii];
//create shape layer
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor greenColor].CGColor;
shapeLayer.lineWidth = 3;

// //shapeLayer.lineDashPhase = 1;
// // shapeLayer.strokeStart = 0.2;
// // shapeLayer.strokeEnd = 0.8;
// //填充顏色的規(guī)則,zero 是 kCAFillRuleEvenOdd是從左到右穿過為1不穿過為0竣稽,0為外部
// shapeLayer.fillRule = kCAFillRuleNonZero;

shapeLayer.lineJoin = kCALineJoinRound;//交匯處的是否為圓角平切  不變等
shapeLayer.lineCap = kCALineCapRound; //線型

// shapeLayer.lineDashPattern = @[@3 ,@4];

shapeLayer.path = path.CGPath;
//add it to our view
[self.view.layer addSublayer:shapeLayer];

4.鏤空效果

imageView.image = [UIImage imageNamed:@"8"];
[self.view addSubview:imageView];


UIView *bgView = [[UIView alloc]initWithFrame:self.view.frame];
bgView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.5];
[self.view addSubview:bgView];

CGRect rc = CGRectMake(15, 30, 130, 130);

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithRect:bgView.bounds];

//[path appendPath:[[UIBezierPath bezierPathWithRect:rc] bezierPathByReversingPath]];

[path appendPath:[[UIBezierPath bezierPathWithRoundedRect:rc cornerRadius:80]bezierPathByReversingPath]];
shapeLayer.path = path.CGPath;
bgView.layer.mask = shapeLayer;

4.二次函數(shù)曲線

[path moveToPoint:CGPointMake(1, 0)];

[path addQuadCurveToPoint:CGPointMake(500, 0) controlPoint:CGPointMake(300, 1000)];

// [path addCurveToPoint:CGPointMake(500, 500) controlPoint1:CGPointMake(300, 10) controlPoint2:CGPointMake(60, 600)];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
[self.view.layer addSublayer:shapeLayer];

5.直線

[path moveToPoint:CGPointMake(1, 0)];
    
[path addLineToPoint:CGPointMake(500, 500)];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:shapeLayer];

6.一般曲線

[path moveToPoint:CGPointMake(1, 0)];

[path addCurveToPoint:CGPointMake(500, 500) controlPoint1:CGPointMake(300, 10) controlPoint2:CGPointMake(60, 600)];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = path.CGPath;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
[self.view.layer addSublayer:shapeLayer];

7.用 CATextLayer顯示文字并改變清晰度

textLayer.frame = CGRectMake(self.view.frame.size.width/2-50, self.view.frame.size.height/2-50, 200, 200);

[self.view.layer addSublayer:textLayer];

textLayer.foregroundColor = [UIColor blackColor].CGColor;
textLayer.string = @"Lorem ipsum dolor sit amet, consectetur adipiscing \
elit. Quisque massa arcu, eleifend vel varius in, facilisis pulvinar \
leo. Nunc quis nunc at mauris pharetra condimentum ut ac neque. Nunc \
elementum, libero ut porttitor dictum, diam odio congue lacus, vel \
fringilla sapien diam at purus. Etiam suscipit pretium nunc sit amet \
lobortis";
textLayer.alignmentMode = kCAAlignmentJustified;

textLayer.contentsScale = 2.0f;

textLayer.wrapped = YES;
UIFont *font = [UIFont systemFontOfSize:15];

//set layer font
CFStringRef fontName = (__bridge CFStringRef)font.fontName;
//獲取 font 的名字
CGFontRef fontRef = CGFontCreateWithFontName(fontName);

textLayer.font = fontRef;
textLayer.fontSize = font.pointSize;
CGFontRelease(fontRef);

8.平滑過渡色

    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor blueColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor];
    gradientLayer.locations = @[[NSNumber numberWithFloat:0],[NSNumber numberWithFloat:0.5],[NSNumber numberWithFloat:1]];

    gradientLayer.startPoint = CGPointMake(0, 0);
    gradientLayer.endPoint = CGPointMake(1, 1);

*** 注意顏色必須是CGColor囱怕,設置 locations 是[0-1]浮點型numberWithFloat

繪圖相關(平滑過渡色霍弹、鏤空效果、部分圓角等)

注:太麻煩了娃弓,就把所有的效果搞一張圖上典格,雖然不清,但都能說明問題台丛。
之前對貝塞爾沒有太多認識钝计,3D 動畫那一塊也沒有很深的了解,暫時不展示3D 動畫那一塊
資料:http://blog.sina.com.cn/s/blog_8f5097be0101b91z.html

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末齐佳,一起剝皮案震驚了整個濱河市私恬,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌炼吴,老刑警劉巖本鸣,帶你破解...
    沈念sama閱讀 219,270評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異硅蹦,居然都是意外死亡荣德,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評論 3 395
  • 文/潘曉璐 我一進店門童芹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來涮瞻,“玉大人,你說我怎么就攤上這事假褪∈鹧剩” “怎么了?”我有些...
    開封第一講書人閱讀 165,630評論 0 356
  • 文/不壞的土叔 我叫張陵生音,是天一觀的道長宁否。 經(jīng)常有香客問我,道長缀遍,這世上最難降的妖魔是什么慕匠? 我笑而不...
    開封第一講書人閱讀 58,906評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮域醇,結果婚禮上台谊,老公的妹妹穿的比我還像新娘。我一直安慰自己譬挚,他們只是感情好锅铅,可當我...
    茶點故事閱讀 67,928評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著殴瘦,像睡著了一般狠角。 火紅的嫁衣襯著肌膚如雪号杠。 梳的紋絲不亂的頭發(fā)上蚪腋,一...
    開封第一講書人閱讀 51,718評論 1 305
  • 那天丰歌,我揣著相機與錄音,去河邊找鬼屉凯。 笑死立帖,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的悠砚。 我是一名探鬼主播晓勇,決...
    沈念sama閱讀 40,442評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼灌旧!你這毒婦竟也來了绑咱?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,345評論 0 276
  • 序言:老撾萬榮一對情侶失蹤枢泰,失蹤者是張志新(化名)和其女友劉穎描融,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體衡蚂,經(jīng)...
    沈念sama閱讀 45,802評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡窿克,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,984評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了毛甲。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片年叮。...
    茶點故事閱讀 40,117評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖玻募,靈堂內(nèi)的尸體忽然破棺而出只损,到底是詐尸還是另有隱情,我是刑警寧澤七咧,帶...
    沈念sama閱讀 35,810評論 5 346
  • 正文 年R本政府宣布改执,位于F島的核電站,受9級特大地震影響坑雅,放射性物質發(fā)生泄漏辈挂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,462評論 3 331
  • 文/蒙蒙 一裹粤、第九天 我趴在偏房一處隱蔽的房頂上張望终蒂。 院中可真熱鬧,春花似錦遥诉、人聲如沸拇泣。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽霉翔。三九已至,卻和暖如春苞笨,著一層夾襖步出監(jiān)牢的瞬間债朵,已是汗流浹背子眶。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留序芦,地道東北人臭杰。 一個月前我還...
    沈念sama閱讀 48,377評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像谚中,于是被迫代替她去往敵國和親渴杆。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,060評論 2 355

推薦閱讀更多精彩內(nèi)容