iOS-边框图片,头像边框

项目中偶尔会有带边框图片的需求,或是头像亦或是logo.在原型图片外围加一自定义颜色的边框,思路是根据上下文绘制,写了Demo和解释.

带边框的图片Demo:

-(void)borderImage{
    //1.加载图片
    UIImage *image = [UIImage imageNamed:@"baby"];
    //2.边框宽度
    CGFloat borderW = 10;
    //3.开启图片上下文
    CGSize size = CGSizeMake(image.size.width+2*borderW, image.size.height+2*borderW);
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    //4.先描述一个大圆作为填充
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)];
    [[UIColor redColor] set];
    [path fill];
    //5.在添加一个小圆设为剪裁区域
    path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderW, borderW, image.size.width, image.size.height)];
    [path addClip];
    //6.把图片绘制上下文
    [image drawInRect:CGRectMake(borderW, borderW, image.size.width, image.size.height)];
    //7.生成图片
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    //8.关闭上下文
    UIGraphicsEndImageContext();
    self.imageV.image = newImage;
}

方便调用的UIIamge的分类:

/**
 *  带边框的图片
 *
 *  @param imageName   图片名
 *  @param imageWidth  图片宽度
 *  @param imageHeight 图片高度
 *  @param borderWidth 边框宽度
 *  @param borderColor 边框颜色
 *
 *  @return 带边框的图片
 */
+(UIImage *)imageWithImageName:(NSString *)imageName imageWidth:(CGFloat)imageWidth imageHeight:(CGFloat)imageHeight borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor{
    UIImage *image = [UIImage imageNamed:imageName];
    CGSize size = CGSizeMake(imageWidth + 2 * borderWidth, imageHeight + 2 * borderWidth);
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)];
    [borderColor set];
    [path fill];
    path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderWidth, borderWidth, imageWidth, imageHeight)];
    [path addClip];
    [image drawInRect:CGRectMake(borderWidth, borderWidth, imageWidth, imageHeight)];
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}

完整项目Demo链接:

https://github.com/qxuewei/XWBorderImage

时间: 2024-10-19 06:44:24

iOS-边框图片,头像边框的相关文章

jQuery - 点击图片加边框

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>为图片添加边框</title> <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script> <scrip

图片与边框有间隙的解决办法

在figure或a中插入图片后,图片与边框产生间隙. 一.产生的原因:当初设立标准的不是亚洲而是欧洲,inline元素为了正确显示英文字母如y j g等带有尾巴的,就在底下留空.二.解决办法: 办法1.在figure或者a中设置:font-size:0: 办法2.在图片img中设置:vertical-align:middle:

第23章 CSS边框图片效果

本章学习日后开发使用参考一下内容 https://www.qianduan.net/css3border-image-bian-kuang-tu-xiang-xiang-jie/ 或W3C 或者百度 未排版的PDF转WORD(不想排版了) 第 23章 CSS3边框图片效果学习要点:1.属性初探2.属性解释3.简写和版本 本章主要探讨 HTML5中 CSS3中边框图片背景的效果,通过这个新属性让边框更加的丰富多彩.一.属性解释CSS3提供了一个新的属性集合,用这几个属性可以嵌入图片形式的边框.这样

鼠标悬浮给图片加边框,适合大型展示

鼠标悬浮给图片加边框 html代码 <div class="T-s-l fl"> <a href="" class="a1"> <img src="images/11.jpg" width="234" height="368" /> </a><a href="" class="a2"> &

android项目 之 记事本(12) ----- 图片的等比例缩放及给图片添加边框

本文是自己学习所做笔记,欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在Android的UI开发中经常会遇到图片的缩放,就比如记事本,现在的图片都比较大,如果将原图不经缩放直接放在屏幕上,则会占满整个屏幕,而且有时图片会比屏幕还大,这时就不能完全的显示整个图片,所以,必须要进行缩放,但在缩放时,该如何缩放呢,长和宽的缩放比例设置为多少合适呢,为了保持原图的纵横比,所以要最好的方法就是约束缩放比例,也就是等比例缩放,相信大家都用过PS中的缩放图片的

PHP 给图片加边框

/** * 给图片加边框 by liangjian 2014-06-19 * @param $ImgUrl 图片地址 * @param $SavePath 新图片保存路径 * @param $px 边框像素 * @return Ambigous <boolean, 新图片的路径> */ function ImageAddBoard($ImgUrl, $SavePath, $px = 2) { $aPathInfo = pathinfo ( $ImgUrl ); // 文件名 $sFileNam

CSS鼠标悬停图片加边框效果,不位移的方法

<!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效果</title> <style type="text/css"> body{background:#222;color:#06c;} em{ font-style:inherit;} img{background:white;margin:0 5px;width:

IOS UIView圆角,阴影,边框,渐增光泽

圆角 sampleView.layer.cornerRadius = 2.5; // 圓角的弧度sampleView.layer.masksToBounds = YES; 阴影 sampleView.layer.shadowColor = [[UIColor blackColor] CGColor];sampleView.layer.shadowOffset = CGSizeMake(3.0f, 3.0f); // [水平偏移, 垂直偏移]sampleView.layer.shadowOpaci

如何去掉添加链接后图片的边框

如何去掉添加链接后图片的边框: IE浏览器中,默认状态下,如果给图片添加链接图片会产生边框.只要为图片的CSS代码添加border:0px即可. 代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <ti