使用CAShapeLayer和UIBezierPath画一个自定义半圆弧button

通常我们使用系统自带的UIButton时,一般都是Rect矩形形式的,或则美工给出一张半圆弧的按钮,如图为一张半圆加三角形的按钮,而此时,如果给按钮添加点击事件时,响应事件依然为矩形区域,不符合我们的需求;

本文为解决这样的按钮问题:

如下图:使用CAShapeLayer和UIBezierPath画了一个button,这个按钮由一个半圆弧和三角形构成,现在我们需要点击黄颜色区域时,响应按钮点击事件,弹出对话框,其他白色区域,不响应点击事件;

第一步:

如下图,自定义一个类,CustomButton,继承于UIControl;本人觉得,如果要写一个自定义按钮,不需要button中的其他控件时,继承于UIControl比较好,如果按钮布局同系统UIButton,那么继承于UIButton比较好;

第二步:

在CustomButton.m文件中,对CustomButton类添加一个延展,声明三个成员变量;CAShapeLayer、id

、SEL;

第三步:

在CustomButton.m文件中,做好自定义配置;其中,centerPoint为半圆弧中心点,bottomPoint为三角形顶尖点,endPoint为圆弧起点和三角型左侧相连的点,这个点可以去掉,去掉之后,图形还是一样的,只是没有左侧那条红色的闭区间线条;

注意:[_target performSelectorOnMainThread:_action withObject:nil waitUntilDone:NO];调用者为_target,不是self;不然会crash,原因为定义的按钮无法识别响应事件;

最后:在ViewController中,使用CustomButton定义一个按钮,并调用相应的点击事件;即可得到文章开始的效果

时间: 2024-12-29 10:16:47

使用CAShapeLayer和UIBezierPath画一个自定义半圆弧button的相关文章

使用CAShapeLayer与UIBezierPath画出想要的图形(转)

使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 步骤: 1.新建UIBezierPath对象bezierPath 2.新建CAShapeLayer对象caShapeLayer 3.将bezierPath的CGPath赋值给caShapeLayer的path,即caShapeLayer.path = bezierPath.CGPath 4.把caShapeLayer添加到某个显示该图形的layer中 下面的小例子是一个环形的p

使用CAShapeLayer与UIBezierPath画出想要的图形

使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 步骤: 1.新建UIBezierPath对象bezierPath 2.新建CAShapeLayer对象caShapeLayer 3.将bezierPath的CGPath赋值给caShapeLayer的path,即caShapeLayer.path = bezierPath.CGPath 4.把caShapeLayer添加到某个显示该图形的layer中 下面的小例子是一个环形的p

手把手带你画一个动态错误提示 Android自定义view

嗯..再差1篇就可以获得持之以恒徽章了,今天带大家画一个比较简单的view. 转载请注明出处:http://blog.csdn.net/wingichoy/article/details/50477108 废话不多说,看效果图: 首先 构造函数 测量... 这里就一笔带过了. public ErrorView(Context context) { this(context, null); } public ErrorView(Context context, AttributeSet attrs

手把手带你画一个漂亮蜂窝view Android自定义view

上一篇做了一个水波纹view  不知道大家有没有动手试试呢点击打开链接 这个效果做起来好像没什么意义,如果不加监听回调 图片就能直接替代.写这篇博客的目的是锻炼一下思维能力,以更好的面多各种自定义view需求. 转载请注明出处:http://blog.csdn.net/wingichoy/article/details/50554058 本文是和代码同步写的.也就是说在写文章的时候才敲的代码.这样会显得文章有些许混乱.但是我想这样记录下来,一个自定义view的真正的制作过程,是一点一点,一步步跟

自己画一个ActivityIndicatorView-b

苹果的UI控件中有一个UIActivityIndicatorView,俗称菊花.→_→现在我们仿照它来制作一个其它样式的指示器,如下: ActivityView.png 自定义指示器 首先画一个白色的扇形.创建一个MyLayer类继承自CALayer,重写它的绘图方法- (void)drawInContext:(CGContextRef)ctx: - (void)drawInContext:(CGContextRef)ctx {        CGContextSetRGBFillColor(c

iOS关于CAShapeLayer与UIBezierPath的知识内容

使用CAShapeLayer与UIBezierPath可以实现不在view的drawRect方法中就画出一些想要的图形 . 1:UIBezierPath: UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建基于矢量的路径.此类是Core Graphics框架关于path的一个OC封装.使用此类可以定义常见的圆形.多边形等形状 .我们使用直线.弧(arc)来创建复杂的曲线形状.每一个直线段或者曲线段的结束的地方是下一个的开始的地方.每一个连接的直线或者曲线段的集

- 通过 UIBezierPath 做一个中空的扫描器

今天在公司的代码里看到通过 UIBezierPath 绘制 CALayer 然后实现中空的正方形,感觉还挺有意思的,简单记录一下 UIBezierPath 这个东西. 一条线 我们自定义一个 BezierView 继承自 UIView ,并重写它的 drawRect 方法实现绘图操作. import UIKit class BezierView: UIView { override func drawRect(rect: CGRect) { super.drawRect(rect); var m

[cocos2dx笔记007]一个自定义场景切换的实例

cocos2dx框架已经提供了很多场景切换的类,但是一些自定义的场景切换,只有自己实现了.下面是实现的类.这里设计的分辨率是750*500.请根据实际的要求调整. 头文件 #ifndef _TRANSITION_GAME_H_ #define _TRANSITION_GAME_H_ #include <cocos2d.h> namespace cocos2d { class CCTransitionGame : public CCTransitionScene { public: CCTran

分享一个自定义打印套打方案(一),概述

最近项目中需要实现单据套打的功能,实现后,留此日记以备忘,同时为有类似需求的同学提供一种解决方案. 原始需求: 1. 打印模板支持灵活自定义,支持可视化设置(含设置打印项是否打印,及位置,大小,字体等…). 2. 支持自定义打印项. 3. 常规的打印项设置(如自动打印小计/合计,表头表尾等…) 4. 在设置模板的时候,支持实时预览. 首先,先上个图, 给大家看一下打印套打模板的大致效果图,各位同学看着顺眼再往下看. 接下来,我们简单的来讨论一下如何实现这个需求,简单分析一下,在这个功能中,可能需