绘制背景色渐变的矩形

两段代码,首先是使用方法

01 CGContextRef context = UIGraphicsGetCurrentContext();
02     NSArray *colors = [NSArray arrayWithObjects:
03                        [UIColor colorWithRed:225.0 / 255.0 green:225.0 / 255.0 blue:225.0 / 255.0 alpha:1.0],
04                        [UIColor colorWithRed:168.0 / 255.0 green:168.0 / 255.0 blue:168.0 / 255.0 alpha:1.0],
05                        nil];
06     [self _drawGradientColor:context
07                         rect:CGRectMake(rX, rY, rW, rH)
08                      options:kCGGradientDrawsAfterEndLocation
09                       colors:colors];
10     CGContextStrokePath(context);// 描线,即绘制形状
11     CGContextFillPath(context);// 填充形状内的颜色

在一段就是绘制背景色渐变的矩形

01 /**
02  * 绘制背景色渐变的矩形,p_colors渐变颜色设置,集合中存储UIColor对象(创建Color时一定用三原色来创建)
03  **/
04 - (void)_drawGradientColor:(CGContextRef)p_context
05                       rect:(CGRect)p_clipRect
06                    options:(CGGradientDrawingOptions)p_options
07                     colors:(NSArray *)p_colors {
08     CGContextSaveGState(p_context);// 保持住现在的context
09     CGContextClipToRect(p_context, p_clipRect);// 截取对应的context
10     int colorCount = p_colors.count;
11     int numOfComponents = 4;
12     CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
13     CGFloat colorComponents[colorCount * numOfComponents];
14     for (int i = 0; i < colorCount; i++) {
15         UIColor *color = p_colors[i];
16         CGColorRef temcolorRef = color.CGColor;
17         const CGFloat *components = CGColorGetComponents(temcolorRef);
18         for (int j = 0; j < numOfComponents; ++j) {
19             colorComponents[i * numOfComponents + j] = components[j];
20         }
21     }
22     CGGradientRef gradient =  CGGradientCreateWithColorComponents(rgb, colorComponents, NULL, colorCount);
23     CGColorSpaceRelease(rgb);
24     CGPoint startPoint = p_clipRect.origin;
25     CGPoint endPoint = CGPointMake(CGRectGetMinX(p_clipRect), CGRectGetMaxY(p_clipRect));
26     CGContextDrawLinearGradient(p_context, gradient, startPoint, endPoint, p_options);
27     CGGradientRelease(gradient);
28     CGContextRestoreGState(p_context);// 恢复到之前的context
29 }

还有一种实现方式

1 CAGradientLayer *gradient = [CAGradientLayer layer];
2 gradient.frame = CGRectMake(rX, rY, rW, rH);
3 gradient.colors = [NSArray arrayWithObjects:
4                        (id)[UIColor blackColor].CGColor,
5                        (id)[UIColor grayColor].CGColor,
6                        (id)[UIColor blackColor].CGColor,
7                         nil];
8 [self.view.layer insertSublayer:gradient atIndex:0];
时间: 2024-11-06 23:19:10

绘制背景色渐变的矩形的相关文章

【一天一个canvas】绘制一个线性渐变的矩形(五)

渐变是填充的一种相当不错的效果,结合实例2和实例3,我们可以创建一个渐变的矩形 <!doctype html> <html> <head> <meta charset="UTF-8"> </head> <style type="text/css"> canvas{border:dashed 2px #CCC} </style> <script type="text/j

「AI教程」轻松绘制扇形渐变

扇形渐变,在PS用角度渐变很好绘制,AI里没有角度渐变,那怎么样轻松的绘制扇形渐变呢? 此教程简单粗暴,但非常有效,一起来看看吧! https://www.macdown.com 1.绘制矩形,调好自己需要的渐变效果(线性渐变). 2.然后 对象-扩展 3.看图进行设置. 4.选择 自由变换工具-透视扭曲(这是cc版本,cs6可以 选择 自由变换工具-然后按按住Alt键同时用鼠标拖动矩形的一个顶点-然后依次按 Shift.Ctrl键(Mac时cmmand键)-拖动鼠标往里收-变成梯形,效果同cc

jquery animate()背景色渐变的处理

jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 gitHub地址:https://github.com/jquery/jquery-color/ 使用代码: $(function(){ $("#cdiv").animate( { backgroundColor:'#FF0000' },1000 ) }) 演示: http://runjs.cn/detail/xmax7vo3 jquery animate()背景色渐变的处理,布布扣,bubuko

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

1. 背景色渐变 A . linear-gradient:用线性渐变创建图像. 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) 下述值用来表示渐变的方向,可以使用角度或者关键字来设置: <angle>:用角度值指定渐变的方向(或角度). to left: 设置渐变为

JAVA鼠标屏幕绘制拖拽删除矩形

import java.awt.Cursor; import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Point; import java.awt.event.MouseAdapter; import java.awt.event.MouseEvent; import java.awt.event.MouseMotionListener; import java.awt.geom.Point2D; import

css中的背景色渐变以及背景图的定位

单纯的背景色渐变: background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fff), color-stop(1, #ddd)); background: linear-gradient(to bottom, #fff 0px, #ddd 100%) repeat scroll 0% 0%; 可以同时支持谷歌.火狐浏览器,兼容性比较强. 背景图的位置: background:url("images/taocan-bg.pn

鼠标移入移出背景色渐变

写这些东西一定是思路清晰的时候,思路清的时候怎么着都行……加油吧,这条路还很远…… 方法一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠标移入移出,背景色渐变</title> <style> *{ margin:0; padding:0; } div{ margin:10px auto

利用动画实现控件背景色渐变

1.动画文件: 1 <?xml version="1.0" encoding="utf-8"?> 2 <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android" 3 android:propertyName="backgroundColor" 4 android:duration="5000" 5 a

巧妙地制作背景色渐变动画

有的时候,嗯,应该说某些特定场合,我们可能需要下面这样的动画效果,渐变 + animation : 假设我们渐变的写法如下: div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%); } 按照常规想法,配合 animation ,我们首先会想到在 animation 的步骤中通过改变颜色实现颜色渐变动画,那么我们的 CSS 代码可能是: div { background: linear-gradient(90deg,