iOS繪製專屬於程式猿的浪漫愛心_IOS

近來無事，想想IT該怎樣才能彰顯浪漫情懷，不能口頭上說說而已，最關鍵的是要有可視化的東西展示出來才行～

廢話不多說，直接上Demo

HeartView.h

//// HeartView.h// DrawHeart//// Created by WQL on 16/3/1.// Copyright © 2016年 WQL. All rights reserved.//#import <UIKit/UIKit.h>@interface HeartView : UIView/** * 比率 */@property (nonatomic,assign) CGFloat rate;/** * 填充的顏色 */@property (nonatomic,strong) UIColor *fillColor;/** * 線條的顏色 */@property (nonatomic,strong) UIColor *strokeColor;/** * 線條的寬度 */@property (nonatomic,assign) CGFloat lineWidth;@end

HeartView.m檔案：

//// HeartView.m// DrawHeart//// Created by WQL on 16/3/1.// Copyright © 2016年 WQL. All rights reserved.//#import "HeartView.h"//間距NSInteger const spaceWidth = 5;//波浪的振幅NSInteger const waveAmplitude = 5;@interface HeartView (){  CGFloat t;}@end@implementation HeartView- (instancetype)initWithFrame:(CGRect)frame{  self = [super initWithFrame:frame];  if (self) {    [self loadTimer];  }  return self;}- (void)drawRect:(CGRect)rect{  [super drawRect:rect];    //上面的兩個半圓 半徑為整個frame的四分之一  CGFloat radius = MIN((self.frame.size.width-spaceWidth*2)/4, (self.frame.size.height-spaceWidth*2)/4);    //左側圓心 位於左側邊距＋半徑寬度  CGPoint leftCenter = CGPointMake(spaceWidth+radius, spaceWidth+radius);  //右側圓心 位於左側圓心的右側 距離為兩倍半徑  CGPoint rightCenter = CGPointMake(spaceWidth+radius*3, spaceWidth+radius);    //左側半圓  UIBezierPath *heartLine = [UIBezierPath bezierPathWithArcCenter:leftCenter radius:radius startAngle:M_PI endAngle:0 clockwise:YES];  //右側半圓  [heartLine addArcWithCenter:rightCenter radius:radius startAngle:M_PI endAngle:0 clockwise:YES];    //曲線串連到新的底部頂點 為了弧線的效果，控制點，座標x為總寬度減spaceWidth，剛好可以相切，平滑過度 y可以根據需要進行調整，y越大，所畫出來的線越接近內切圓弧  [heartLine addQuadCurveToPoint:CGPointMake((self.frame.size.width/2), self.frame.size.height-spaceWidth*2) controlPoint:CGPointMake(self.frame.size.width-spaceWidth, self.frame.size.height*0.6)];    //用曲線 底部的頂點串連到左側半圓的左起點 為了弧線的效果，控制點，座標x為spaceWidth，剛好可以相切，平滑過度。y可以根據需要進行調整，y越大，所畫出來的線越接近內切圓弧（效果是越胖）  [heartLine addQuadCurveToPoint:CGPointMake(spaceWidth, spaceWidth+radius) controlPoint:CGPointMake(spaceWidth, self.frame.size.height*0.6)];    //線條處理  [heartLine setLineCapStyle:kCGLineCapRound];  //線寬  [self setHeartLineWidthWithPath:heartLine];  //線條的顏色  [self setHeartStrokeColor];    //根據座標點連線  [heartLine stroke];  //clipToBounds 切掉多餘的部分  [heartLine addClip];      //初始化波浪的構成  UIBezierPath *waves = [UIBezierPath bezierPath];    //首先 把起始點設定為左側 x座標為spaceWidth 心形從下往上填充,y座標需要滿足一定的函數關係式，當rate為0時，位置為總高度－2倍的留白距離（spaceWidth）＋波浪的振幅；當rate為1時，位置為留白距離（spaceWidth）－振幅。由這兩個狀態構建函數運算式，即可得到如下運算式  CGPoint startPoint = CGPointMake(spaceWidth, (self.frame.size.height-3*spaceWidth+waveAmplitude*2)*(1-self.rate)+spaceWidth-waveAmplitude);  [waves moveToPoint:startPoint];    //關鍵的地方來了 波浪線怎麼畫？  //首先，x座標是從左往右連續的 y座標是起始的高度加上一定的波動 這裡選擇了cos函數。5是波動的幅度大小，50控制的是波峰的間距，t是為了讓其動起來，隨時間發生波動  for (int i = 0; i<self.frame.size.width-spaceWidth*2+self.lineWidth*2; i++) {    //x是要考慮線寬的 不然的話，會導致填充的寬度不夠 y就是在某個值附近波動    CGPoint middlePoint = CGPointMake(spaceWidth+i-self.lineWidth, startPoint.y+waveAmplitude*cos(M_PI/50*i+t));        [waves addLineToPoint:middlePoint];  }    //畫波浪線的右端 到底部的垂直線  [waves addLineToPoint:CGPointMake(self.frame.size.width-spaceWidth*2, self.frame.size.height-spaceWidth*2)];  //畫右側底部的點 到達左側底部的點之間的橫線  [waves addLineToPoint:CGPointMake(spaceWidth, self.frame.size.height-spaceWidth*2)];  //設定填充顏色  [self setHeartFillColor];  //填充  [waves fill];  }//設定線條寬度 預設為1- (void)setHeartLineWidthWithPath:(UIBezierPath*)path{  CGFloat lineW;  if (self.lineWidth) {    lineW = self.lineWidth;  }else{    lineW = 1;  }    [path setLineWidth:lineW];}//設定線條顏色- (void)setHeartStrokeColor{  UIColor *strokColor;  if (self.strokeColor) {    strokColor = self.strokeColor;  }else{    strokColor = [UIColor blackColor];  }    [strokColor set];}//設定填充的顏色- (void)setHeartFillColor{  UIColor *fillColor;  if (self.fillColor) {    fillColor = self.fillColor;  }else{    fillColor = [UIColor orangeColor];  }    [fillColor set];}//為了實現動態效果，加一個Timer- (void)loadTimer{  NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:0.02 target:self selector:@selector(timerAction) userInfo:nil repeats:YES];  [timer fire];}//t 是一個影響波浪線的參數，每次修改之，再畫，則每次的都不一樣，則有動態效果- (void)timerAction{  t += M_PI/50;    if (t == M_PI) {    t = 0;  }  //修改了t之後 要調用draw方法  [self setNeedsDisplay];}@end一些關鍵點，我已經注釋啦～

下面就是看看怎麼使用這個視圖了：

ViewController.m中：

//// ViewController.m// DrawHeart//// Created by WQL on 16/3/1.// Copyright © 2016年 WQL. All rights reserved.//#import "ViewController.h"#import "HeartView.h"NSInteger const heartWidth = 200;NSInteger const heartHeight = 200;@interface ViewController (){ HeartView *heartView;}@end@implementation ViewController- (void)viewDidLoad { [super viewDidLoad]; heartView = [[HeartView alloc]initWithFrame:CGRectMake((self.view.frame.size.width-heartWidth)/2, (self.view.frame.size.height-heartHeight)/2, heartWidth, heartHeight)]; heartView.rate = 0.5; heartView.lineWidth = 1; heartView.strokeColor = [UIColor blackColor]; heartView.fillColor = [UIColor redColor]; heartView.backgroundColor = [UIColor clearColor]; [self.view addSubview:heartView];  [self loadSlider];}- (void)loadSlider{ UISlider *valueSlider = [[UISlider alloc]initWithFrame:CGRectMake((self.view.frame.size.width-300)/2, self.view.frame.size.height-150, 300, 50)]; valueSlider.minimumValue = 0.0; valueSlider.maximumValue = 1.0; valueSlider.value = 0.5; [valueSlider addTarget:self action:@selector(valueChangedAction:) forControlEvents:UIControlEventValueChanged]; [self.view addSubview:valueSlider];}- (void)valueChangedAction:(UISlider*)slider{ heartView.rate = slider.value;}- (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated.}@end

這裡我添加了一個slider，為了實現隨意設定愛心填充的rate。

哈，下面就是看看效果了：

以上就是本文的全部內容，希望對大家的學習有所協助，快點製作屬於自己浪漫愛心送給自己吧。