如何画一个三角形的UIButton

Question

我真的很喜欢IFTTT右下角的按钮，如图（右下）。

我试过使用 CGContext 和 UIBezierPath 来匹配效果，但我的知识还不够，无法做到这一点。有人 thoughts/code 知道如何做到这一点吗？

谢谢！

Answer 1

制作一个方形按钮，在里面放一个三角形的图片。那不也行吗？为了使错觉更好，为 onclick() 事件和 ontouch() 绘制单独的图像。禁用默认的按钮按下和按钮单击动画以使其看起来真实。

Answer 2

首先使用一个CAShapeLayer创建一个mask

CAShapeLayer * shapeLayer = [CAShapeLayer layer];
//Use these to create path
CGMutablePathRef path = CGPathCreateMutable();
// CGPathMoveToPoint
// CGPathAddLines
shapeLayer.path = path;

然后设置按钮的掩码

yourbutton.layer.mask = shapeLayer
yourbutton.masksToBounds = YES;

视图示例

  CAShapeLayer * shapeLayer = [CAShapeLayer layer];
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, nil, 0, CGRectGetHeight(self.testview.frame));
CGPathAddLineToPoint(path, nil, CGRectGetWidth(self.testview.frame), 0);
CGPathAddLineToPoint(path, nil, CGRectGetWidth(self.testview.frame), CGRectGetHeight(self.testview.frame));
CGPathCloseSubpath(path);
shapeLayer.path = path;
self.testview.layer.masksToBounds = YES;
self.testview.layer.mask = shapeLayer;

和屏幕截图：

如何画一个三角形的UIButton

How to draw a triangle shaped UIButton

core-graphics

uibutton

cgcontext

ios