IOS draws exclusive program for the romantic love of apes _ios

Recently there is no matter, think how it should be able to highlight the romantic feelings, can not talk about it, the most important thing is to have a visual display of things to do ~

Don't say much nonsense, directly on demo

HeartView.h

//HeartView.h
//Drawheart////
Created by
WQL on 16/3/1.
COPYRIGHT©2016 year WQL. All rights reserved.

#import <UIKit/UIKit.h>

@interface heartview:uiview
/**
 * * ratio * * *
@property ( nonatomic,assign) cgfloat rate;
/**
 * Filled color
/@property (Nonatomic,strong) Uicolor *fillcolor;
/**
 * The color of the line * * *
@property (nonatomic,strong) Uicolor *strokecolor;
/**
 * The width of the line * * *
@property (nonatomic,assign) cgfloat linewidth;
@end

HEARTVIEW.M file:

HEARTVIEW.M//Drawheart////Created by WQL on 16/3/1. COPYRIGHT©2016 year WQL.
All rights reserved.
#import "HeartView.h"//spacing Nsinteger Const SPACEWIDTH = 5;
The amplitude of the wave 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]; The two semicircular radii above are one-fourth cgfloat radius = MIN ((self.frame.size.width-spacewidth*2)/4 for the entire frame, (
  
  SELF.FRAME.SIZE.HEIGHT-SPACEWIDTH*2)/4);
  The left center is located on the left margin + radius width cgpoint leftcenter = Cgpointmake (Spacewidth+radius, Spacewidth+radius);
  
  Right distance to the right center of the center of the left is twice times radius cgpoint rightcenter = Cgpointmake (spacewidth+radius*3, Spacewidth+radius); Left semicircle uibezierpath *heartline = [Uibezierpath bezierpathwitharccenter:leftcenter radius:radius StartAngle:M_PI

  endangle:0 Clockwise:yes]; Right semicircle [heartline addArcwithcenter:rightcenter Radius:radius startangle:m_pi endangle:0 Clockwise:yes]; Curve connected to the new bottom vertex for the effect of the arc, the control point, coordinate x for the total width minus spacewidth, just can tangent, smooth over Y can be adjusted according to need, y larger, the drawn line closer to the inner tangent arc [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)]; Connect the vertices at the bottom of the curve to the left beginning of the left semicircle for the effect of the arc, the control point, coordinates x for spacewidth, just can tangent, smooth over. Y can be adjusted as needed, the larger the Y, the closer the line is drawn to the inner arc (the fatter the effect) [Heartline addquadcurvetopoint:cgpointmake (Spacewidth, Spacewidth+radius)
  
  Controlpoint:cgpointmake (Spacewidth, self.frame.size.height*0.6)];
  Line processing [Heartline Setlinecapstyle:kcglinecapround];
  line width [self setheartlinewidthwithpath:heartline];
  
  The color of the line [self setheartstrokecolor];
  Connect [heartline stroke] According to the coordinate point;
  
  
  ClipToBounds cut off the excess parts [heartline addclip];
  
  The formation of the initialization wave uibezierpath *waves = [Uibezierpath Bezierpath]; First set the starting point to the left x coordinates for the Spacewidth heart shape from the bottom upward fill, y coordinates need to meet a certain function of the formula, when rate is 0 o'clock, the position is totalHeight-twice times the left white distance (spacewidth) + wave amplitude; When rate is 1 o'clock, the position is white distance (spacewidth)-amplitude. By constructing the function expression from these two states, you can get the following expression cgpoint startpoint = Cgpointmake (Spacewidth, self.frame.size.height-3*spacewidth+
  WAVEAMPLITUDE*2) * (1-self.rate) +spacewidth-waveamplitude);
  
  [Waves movetopoint:startpoint];
  The key to the place is the wavy line how to draw? First, the x coordinates are from the left to the right continuous y coordinate is the starting height plus a certain fluctuation here the Cos function is selected. 5 is the amplitude of the fluctuation, 50 control is the pitch of the crest, T is to let it move, fluctuations over time for (int i = 0; i<self.frame.size.width-spacewidth*2+self.linewidth*2; i++ {//x is to consider the width of the line otherwise, will cause the padding is not enough y is around a value fluctuation cgpoint middlepoint = Cgpointmake (Spacewidth+i-self.linewidth, Startpoi
    
    Nt.y+waveamplitude*cos (m_pi/50*i+t));
  [Waves addlinetopoint:middlepoint]; //Draw the vertical line of the right end of the wavy line to the bottom [waves addlinetopoint:cgpointmake (Self.frame.size.width-spacewidth*2, SELF.FRAME.SIZE.HEIGHT-SP
  ACEWIDTH*2)];
  Draw the horizontal line between the point on the right bottom and the point at the bottom of the left [waves addlinetopoint:cgpointmake (Spacewidth, self.frame.size.height-spacewidth*2)];
  Set the fill color [self setheartfillcolor];
  
Fill [waves fill]; //Set line width defaults to 1-(void) setheArtlinewidthwithpath: (uibezierpath*) path {cgfloat linew;
  if (self.linewidth) {linew = Self.linewidth;
  }else{linew = 1;
} [path setlinewidth:linew];
  //Set Line Color-(void) Setheartstrokecolor {uicolor *strokcolor;
  if (self.strokecolor) {strokcolor = Self.strokecolor;
  }else{Strokcolor = [Uicolor blackcolor];
[Strokcolor set];
  }//Set the color of the fill-(void) Setheartfillcolor {uicolor *fillcolor;
  if (self.fillcolor) {fillcolor = Self.fillcolor;
  }else{FillColor = [Uicolor Orangecolor];

[FillColor set]; }//To achieve dynamic effects, add a timer-(void) Loadtimer {nstimer *timer = [Nstimer scheduledtimerwithtimeinterval:0.02 target:self SE
  Lector: @selector (timeraction) Userinfo:nil Repeats:yes];
[Timer fire];
  
  //T is a parameter that affects the wavy line, each time, and then painting, then each time is different, there is dynamic effect-(void) Timeraction {T + = m_pi/50;
  if (t = = m_pi) {t = 0;
The Draw method [self setneedsdisplay] is called after the T//has been modified;

 @end Some key points, I have commented ~

Here's a look at how to use this view:

In VIEWCONTROLLER.M:

VIEWCONTROLLER.M//Drawheart////Created by WQL on 16/3/1. COPYRIGHT©2016 year 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 {[Supe
 R 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 of the can is recreated.

 } @end

Here I have added a slider, in order to realize the random set of love rate.

Ha, the following is to see the effect of:

The above is the entire content of this article, I hope to help you learn, quickly make their own romantic love to give themselves.