Skip to main content
 首页 » 数据库

ios之在 IOS 的同一 View 上绘制 2 个渐变矩形(快速)

2024年01月01日77duanxz

我无法在同一个 View 上显示 2 个带有渐变的矩形。我的以下代码仅显示第一个矩形。如果我在代码中省略了 rectangle1,则会显示 rectangle2。只有结合起来,它才会显示 rectangle1。

我喜欢显示蓝色矩形1 ...

...和具有不同渐变的红色矩形2 ...

...同时。

我有以下代码:

func draw_2_gradient_rectangles(){ 
 
    let locations: [CGFloat] = [ 0.0, 1.0 ] 
 
    let colorspace = CGColorSpaceCreateDeviceRGB() 
 
    // first rectangle 
    let context = UIGraphicsGetCurrentContext() 
    let colors = [UIColor.blueColor().CGColor, 
        UIColor.whiteColor().CGColor] 
    let gradient = CGGradientCreateWithColors(colorspace, 
        colors, locations) 
 
    var startPoint1 = CGPoint() 
    var endPoint1 =  CGPoint() 
    startPoint1.x = 0.0 
    startPoint1.y = 10.0 
    endPoint1.x = 100; 
    endPoint1.y = 10 
 
    let rectangle_main1 = CGRectMake(CGFloat(15), CGFloat(0), CGFloat(100), CGFloat(30)); 
    CGContextAddRect(context, rectangle_main1); 
    CGContextClip(context) 
    CGContextDrawLinearGradient(context, gradient, startPoint1, endPoint1, 0) 
 
    // second rectangle 
    let context2 = UIGraphicsGetCurrentContext() 
    let colors2 = [UIColor.redColor().CGColor, 
        UIColor.whiteColor().CGColor] 
    let gradient2 = CGGradientCreateWithColors(colorspace, 
        colors2, locations) 
 
    var startPoint2 = CGPoint() 
    var endPoint2 =  CGPoint() 
    startPoint2.x = 100; 
    startPoint2.y = 10.0; 
    endPoint2.x = 10.0; 
    endPoint2.y = 10.9; 
 
 
    let rectangle_main2 = CGRectMake(CGFloat(15), CGFloat(50), CGFloat(100), CGFloat(30)); 
    CGContextAddRect(context2, rectangle_main2); 
    CGContextClip(context2) 
    CGContextDrawLinearGradient(context2, gradient2, startPoint2, endPoint2, 0); 
 
 
} 

我做错了什么?有什么帮助吗?

请您参考如下方法:

UIGraphicsGetCurrentContext() 不会创建上下文,而只是为您提供对当前上下文的引用。 这意味着 context 与 context2 相同。在 context 中,您剪切了绘图区域,因此下一个 CGContextAddRect 将在剪切区域之外绘制。

您需要做的是在每个矩形创建代码之前保存绘图状态:

CGContextSaveGState(context); 

并在执行第二个矩形代码之前恢复它

CGContextRestoreGState(context); 

这将确保在绘制第二个矩形之前重置裁剪区域。例如:

CGContextSaveGState(context); 
// Create rectangle1 
CGContextRestoreGState(context); 
 
CGContextSaveGState(context); 
// Create rectangle2 
CGContextRestoreGState(context);