iOS繪制專屬于程序猿的浪漫愛心

2020-07-26 03:26:48

字體：大中小

來源：轉載

供稿：網友

近來無事，想想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"http://間距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。

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