Next we want to tell the picture of graffiti, we separate 1.1 point expansion, first to the picture underlined
Create a project name Testaddline
Next we add a picture to the default generated Viewcontroller
Add a button at the same time
Copy Code code as follows:
-(void) Viewdidload {
[Super Viewdidload];
Do no additional setup after loading the view, typically from a nib.
Uiimageview *imagev = [[Uiimageview Alloc]initwithframe:cgrectmake (Ten, screen_width-20, screen_height-150)];
Imagev.image = [UIImage imagenamed:@ "640-960-1.jpg"];
[Self.view Addsubview:imagev];
UIButton *testbtn = [[UIButton alloc]initwithframe:cgrectmake (screen_width/2.0-60, 60, 120, 36)];
[Testbtn Settitlecolor:[uicolor Blackcolor] forstate:uicontrolstatenormal];
[Testbtn settitle:@ "Add straight line" forstate:uicontrolstatenormal];
[Testbtn addtarget:self Action: @selector (addlineact:) forcontrolevents:uicontroleventtouchupinside];
[Self.view ADDSUBVIEW:TESTBTN];
}
-(void) Addlineact: (ID) sender{
NSLog (@ "Test button");
}
Next we create a uiview to add a line name: DrawLine
Create several variables
Copy Code code as follows:
@property (Nonatomic,strong) nsmutablearray * completelines; The lines that have been drawn are stored in an array.
@property (Nonatomic,strong) nsmutabledictionary* linesinproscess; The line being drawn is stored in a dictionary
@property (nonatomic,strong) uicolor *linecolor;//Line Color
@property (nonatomic) float linewidth;//the thickness of a line
Initialize DrawLine
Copy Code code as follows:
Class
-(ID) initWithFrame: (CGRect) frame{
if (self = [Super Initwithframe:frame]) {
Initializing variables
_completelines = [[Nsmutablearray alloc]init];
_linesinproscess = [[Nsmutabledictionary alloc]init];
Setting Transparent Backgrounds
Self.backgroundcolor = [Uicolor Clearcolor];
}
return self;
}
We abstracted the lines individually. Create a class Create object name line
Line Two property start point end point (this is the two point in mathematics to determine a straight line)
Create two properties for the line class
Copy Code code as follows:
#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
@interface Line:nsobject
@property (nonatomic) Cgpoint begin; Line Start point
@property (nonatomic) Cgpoint end; Line end point
@end
Next we rewrite the DrawLine DrawRect method to draw the line
Copy Code code as follows:
Only override drawrect:if you perform custom drawing.
An empty implementation adversely affects performance during.
-(void) DrawRect: (cgrect) Rect {
Drawing Code
Get context
Cgcontextref Cgt=uigraphicsgetcurrentcontext ();
Set line width
Cgcontextsetlinewidth (CGT, self.linewidth);
Set the ends of a line with rounded corners
Cgcontextsetlinecap (CGT, Kcglinecapround);
Set color
[Self.linecolor set];
Draw a completed segment
For (line *line in _completelines) {
Cgcontextmovetopoint (CGT, [line begin].x, [line begin].y);
Cgcontextaddlinetopoint (CGT, [line end].x, [line end].y);
Cgcontextstrokepath (CGT);
}
Draw the line segment that you are drawing
For (Nsarray *v in _linesinproscess) {
Line *line =[_linesinproscess Objectforkey:v];
Cgcontextmovetopoint (CGT, [line begin].x, [line begin].y);
Cgcontextaddlinetopoint (CGT, [line end].x, [line end].y);
Cgcontextstrokepath (CGT);
}
}
To achieve a few finger-slip methods used to accept the position of the finger draw line
Copy Code code as follows:
Empty artboard
-(void) ClearAll
{
[_completelines Removelastobject];
[_linesinproscess removeallobjects];
[Self setneedsdisplay];
}
-(void) Touchesbegan: (Nsset *) touches withevent: (Uievent *) event
{
Determine if you want to even press
For (Uitouch *t in touches) {
if ([t tapcount]>1) {
The second time when the first line is not finished, the line ends
[Self clearall];
Return
}
Nsvalue is used as a key
Nsvalue *key=[nsvalue Valuewithnonretainedobject:t];
Create a line object from a touch location
Cgpoint loc=[t locationinview:self];
Line *newline=[[line Alloc]init];
Newline.begin=loc;
Newline.end=loc;
Save the currently drawn line in a dictionary
[_linesinproscess Setobject:newline Forkey:key];
}
}
-(void) touchesmoved: (Nsset *) touches withevent: (Uievent *) event
{
Dynamically update lines according to current finger position during finger movement
for (Uitouch * t in touches) {
Nsvalue *key=[nsvalue Valuewithnonretainedobject:t];
Find the Line object for the object's current Uitouch object
Line *line =[_linesinproscess Objectforkey:key];
Cgpoint loc=[t locationinview:self];
Line.end=loc;
}
[Self setneedsdisplay];
}
-(void) Endtouches: (Nsset *) touches
{
When the line is finished, add the current line to the _completelines array and delete the line in the dictionary _linesinproscess
For (Uitouch *t in touches) {
Nsvalue *key=[nsvalue Valuewithnonretainedobject:t];
Line *line =[_linesinproscess Objectforkey:key];
if (line) {
[_completelines Addobject:line];
[_linesinproscess Removeobjectforkey:key];
}
}
[Self setneedsdisplay];
}
-(void) touchescancelled: (Nsset *) touches withevent: (Uievent *) event
{
[Self endtouches:touches];
}
-(void) touchesended: (Nsset *) touches withevent: (Uievent *) event
{
[Self endtouches:touches];
}
Go back to Viewcontroller to add DrawLine to the button click event on ImageView
Copy Code code as follows:
-(void) Addlineact: (ID) sender{
NSLog (@ "Test button");
DrawLine *touchdrawview = [[DrawLine alloc]initwithframe:imagev.frame];
Touchdrawview.linecolor = [Uicolor Yellowcolor];
Touchdrawview.linewidth = 5.0;
Touchdrawview.tag = 902;
[Self.view Addsubview:touchdrawview];
}
All right, run the program, try it.
Try to draw a line on the picture after clicking the Add Line button
The line with cut head
on the basis of the above example, expand a little, and add an arrow to the end of the line.
Add a piece of code to the method DrawRect added in the DrawLine class
Copy Code code as follows:
Add Shearing Head
Double r = sqrt ((line.end.x-line.begin.x) * (line.end.x-line.begin.x) + (LINE.BEGIN.Y-LINE.END.Y) * ( LINE.BEGIN.Y-LINE.END.Y));/Line length
Cgcontextmovetopoint (CGT,LINE.END.X,LINE.END.Y);
P1
Cgcontextaddlinetopoint (cgt,line.end.x-(10* (LINE.BEGIN.Y-LINE.END.Y)/R), line.end.y-(10* ( line.end.x-line.begin.x)/R));
P3
Cgcontextaddlinetopoint (cgt,line.end.x+ (20* (line.end.x-line.begin.x)/R), line.end.y-(20* ( LINE.BEGIN.Y-LINE.END.Y)/R));
P2
Cgcontextaddlinetopoint (cgt,line.end.x+ (10* (LINE.BEGIN.Y-LINE.END.Y)/R), line.end.y+ (10* ( line.end.x-line.begin.x)/R));
Cgcontextaddlinetopoint (CGT, LINE.END.X,LINE.END.Y);
Cgcontextdrawpath (Cgt,kcgpathfillstroke);
Cgcontextstrokepath (CGT);
The idea of the above method is to determine three points after the line is finished drawing a triangle as the arrow shape
