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.