使图片与背景融为一体

原始图片 + 显示时的图片

例子1

例子2

例子3

作为mask用的图:

原理:

1. 一个mask用来只显示图片边缘

2. 取图片平均颜色并给这个mask赋值

3. 将背景色设置成平均色

4. 将要显示的图片放置在mask的下面

    // 获取显示图片
    UIImage *showImage = [UIImage imageNamed:@"6"];

    // 获取遮罩图片
    UIImage *maskImage = [UIImage imageNamed:@"mask"];

    // 显示的图片
    UIImageView *imageView =         [[UIImageView alloc] initWithFrame:(CGRect){CGPointZero, showImage.size}];
    imageView.image        = showImage;
    imageView.center       = self.view.center;
    [self.view addSubview:imageView];

    // 带透明像素PNG图片
    UIImage *png = [maskImage blurImageWithRadius:20];

    // 将透明像素PNG图片转换为遮罩用mask
    CALayer *maskLayer = [CALayer layer];
    maskLayer.contents = (__bridge id)(png.CGImage);
    maskLayer.frame    = (CGRect){CGPointZero, showImage.size};

    // 使用遮罩mask
    CALayer *showLayer = [CALayer layer];
    showLayer.frame    = (CGRect){CGPointZero, showImage.size};
    showLayer.mask     = maskLayer;
    showLayer.backgroundColor = [showImage averageColor].CGColor; // 取图片平均颜色
    showLayer.position = self.view.center;

    // 设置背景色
    self.view.backgroundColor = [showImage averageColor];         // 取图片平均颜色
    [self.view.layer addSublayer:showLayer];

使图片与背景融为一体,布布扣,bubuko.com

时间: 2024-08-09 02:12:33

使图片与背景融为一体的相关文章

【转】cocos2d-x游戏开发(十四)用shader使图片背景透明

转自:http://blog.csdn.net/dawn_moon/article/details/8631783 好吧,终于抽时间写这篇文章了. 手头上有很多人物行走图,技能特效图等,但这些图都有个纯黑色背景,怎么样将内容显示出来,让背景透明呢?前段时间搞了一下,感谢群里的童鞋们,提供了思路和方法. 这里用shader处理了像素,使黑色背景透明,直接上代码 ShaderSprite.h 1 #ifndef __TestShader__ShaderSprite__ 2 #define __Tes

css 使图片水平垂直居中

1.利用display:table-cell,具体代码如下: html代码如下: 1 <div class="img_wrap"> 2 <img src="wgs.jpg"> 3 </div> css代码如下: 1 .img_wrap{ 2 width: 400px; 3 height: 300px; 4 border: 1px dashed #ccc; 5 display: table-cell; //主要是这个属性 6 ver

如何利用CSS代码使图片和文字在同一行显示且对齐

对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢? 对于这种现象,方法有3种: 1.通过添加css的“vertical-align:middle;”: 2.如果图片是背景图片,可以在css中设置背景图片,然后设置文字的padding属性: 3.把文字和图片分别放入不同的div中. 经过多次的测试,上面三种方法都可以让图片和文字在同

android自定义控件(8)-利用onMeasure测量使图片拉伸永不变形,解决屏幕适配问题

使用ImageView会遇到的问题 在Android应用中,都少不了图片的显示,ImageView,轮播图,ViewPager等等,很多都是来显示图片的,很多时候,我们都希望图片能够在宽度上填充父窗体,这样比较符合人的审美观点,但是问题就随之而来了,那就是高度如何定义??先来看一个普通的ImageView的 Xml布局文件的定义: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xm

cocos2dx3.X shader使图片置灰

1 OpenGL ES着色器 opengl es的着色器有.fsh和.vsh两个文件.这两个文件在被编译和链接后就可以产生可执行程序与GPU交互.attribute是从外部传进来的,每一个顶点都会有这两个属性,所以它也叫做vertex attribute(顶点属性).而varying类型的变量是在vertex shader和fragment shader之间传递数据用的. .vsh 是 vertex shader,用与顶点计算,可以理解控制顶点的位置,在这个文件中我们通常会传入当前顶点的位置,和

实现图片模糊(背景虚化)

图片模糊效果 背景虚化(模糊)的效果越来越常用,那么如何使用代码来实现呢?在上篇文章中,我们讨论了关于 CoreImage 的知识, 理所当然的,首先尝试使用 CoreImage 解决问题,从上次打印出来的所有支持的滤镜中,在 127种滤镜中,存在 Blur 关键字的,只有CIGaussianBlur(高斯模糊),,而这种模糊的致命缺陷是,会出现白边.(懂美术的同学可能知道,这是位图和矢量图的原因) 高斯模糊代码 CIContext *context = [CIContext contextWi

php 给图片增加背景平铺水印代码

如果你想利用php 给图片增加背景平铺水印效果话,必须利用php的一个插件来实例,就是利用imagick,他可以给图片增加背景平铺水印效果哦,下面我们提供一款实例代码. 如果你想利用php教程 给图片增加背景平铺水印效果话,必须利用php的一个插件来实例,就是利用imagick,他可以给图片增加背景平铺水印效果哦,下面我们提供一款实例代码. imagemagic官方去除图片背景的命令行模式: convert -size 140x80 xc:none -fill grey           -g

使QScrollArea的背景透明,并且不影响子控件

使QScrollArea的背景透明,乍看很easy,其实却是一个目前百度上百不出来的问题; 最容易想到的,用qss: scrollArea->setStyleSheet("background-color:transparent;"); 但是这样会使scrollArea所包含的所有子控件的背景也变成透明,大大不妥啊... 然后: scrollArea->setStyleSheet("QScrollArea {background-color:transparent

【代码笔记】使图片两边不拉伸,中间拉伸

代码: - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. //使图片两边不拉伸,中间拉伸 UIImage *image = [UIImage imageNamed:@"1.jpg"]; image = [image stretchableImageWithLeftCapWidth:floorf(image.size.width/2) topCapHe