CAGradientLayer渐变色的使用

￡神魔★判官ぃ 2022-04-13 09:10 273阅读 0赞

使用`CAGradientLayer`实现渐变色功能。

效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BvdGF0bzUxMg_size_16_color_FFFFFF_t_70]

代码示例

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 40, 200, 200)];
    [self.view addSubview: view];

//  创建 CAGradientLayer 对象
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    //  设置 gradientLayer 的 Frame
    gradientLayer.frame = myView.bounds;
    //  创建渐变色数组，需要转换为CGColor颜色
    gradientLayer.colors = @[(id)[UIColor yellowColor].CGColor, (id)[UIColor redColor].CGColor];
    //  设置三种颜色变化点，取值范围 0.0~1.0
    gradientLayer.locations = @[@(0.0f), @(1.0f)];
    //  设置渐变颜色方向
    //    gradientLayer.startPoint = CGPointMake(0, 0); // 左上
    //    gradientLayer.endPoint = CGPointMake(0, 1); // 左下
    //    gradientLayer.endPoint = CGPointMake(1, 0); // 右上
    //    gradientLayer.endPoint = CGPointMake(1, 1); // 右下
    gradientLayer.startPoint = CGPointMake(0, 1); // 左上
    gradientLayer.endPoint = CGPointMake(1, 0); // 左上
    //  添加渐变色到创建的 UIView 上去
    [view.layer addSublayer:gradientLayer];

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BvdGF0bzUxMg_size_16_color_FFFFFF_t_70]: /images/20220413/eaeda66460e24f5baa9ddf86abfba484.png

发表评论取消回复

表情：

评论列表（有 0 条评论，273人围观）

还没有评论，来说两句吧...

相关阅读

相关前端计算色系渐变颜色

在前端中，可以使用 CSS 中的 `linear-gradient` 函数来实现色系渐变。例如，要在蓝色和红色之间创建一个渐变，可以使用以下代码： .gradie

矫情吗；*/ 2024年03月27日 12:29/ 0 赞/ 66 阅读

相关背景为渐变色的窗体

![20180303171618708][] 主类代码如下 package jpanel; import java.awt.EventQueue;

水深无声/ 2024年02月18日 18:28/ 0 赞/ 14 阅读

相关 css背景色渐变代码

background: -moz-linear-gradient(top, fe8f01 0%, f52f26 100%); background: -webk

冷不防/ 2023年06月01日 12:38/ 0 赞/ 27 阅读

相关 css3背景色渐变属性_背景色（CSS属性）

css3背景色渐变属性描述 (Description) This property sets the `background-color` of an element

柔光的暖阳◎/ 2022年12月03日 01:56/ 0 赞/ 317 阅读

相关 css-body背景渐变色的CSS

从左上至右下渐变 :( 兼容各种浏览器) body{ FILTER: Alpha( style=1,opacity=25,finishOpacity=100

忘是亡心i/ 2022年05月17日 09:25/ 0 赞/ 602 阅读

相关 css设置背景色渐变

css完成以下如图背景色 ![在这里插入图片描述][2019011414465155.png]css样式 div1 { width: 100%;

墨蓝/ 2022年04月22日 16:06/ 0 赞/ 363 阅读

相关 CAGradientLayer渐变色的使用

使用`CAGradientLayer`实现渐变色功能。效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

￡神魔★判官ぃ/ 2022年04月13日 09:10/ 0 赞/ 274 阅读

相关 CSS 实现背景色渐变和文字颜色渐变

1. 背景色渐变 A . linear-gradient：用线性渐变创建图像。语法：<linear-gradient> = linear-gradient(\[ \[ [

小咪咪/ 2022年04月01日 08:38/ 0 赞/ 704 阅读

相关 css3渐变背景色

> 好久没写关于css的博客了，因为一个app的需要，自己要做一个动态的渐变背景块，所以算是重新学习了渐变类的css。首先说一下这个背景：vue项目中，考虑到兼容性，

傷城~/ 2022年01月23日 12:51/ 0 赞/ 423 阅读

相关 [CSS样式表之] - 渐变色的实现

1、从左到右的渐变： style='FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=1,

╰+哭是因爲堅強的太久メ/ 2022年01月06日 01:19/ 0 赞/ 298 阅读