标签: retina-display

我有一个部分透明的单色图像.我有图像的普通版和@ 2X版.我希望能够在代码中为图像着色不同的颜色.下面的代码适用于普通图像,但@ 2X最终会产生伪像.正常图像可能有类似问题如果是这样,我无法通过分辨率检测到它.

+(UIImage *) newImageFromMaskImage:(UIImage *)mask inColor:(UIColor *) color {
    CGImageRef maskImage = mask.CGImage;
    CGFloat width = mask.size.width;
    CGFloat height = mask.size.height;
    CGRect bounds = CGRectMake(0,0,width,height);

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGContextRef bitmapContext = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
    CGContextClipToMask(bitmapContext, bounds, maskImage);
    CGContextSetFillColorWithColor(bitmapContext, color.CGColor);    
    CGContextFillRect(bitmapContext, bounds);

    CGImageRef mainViewContentBitmapContext = CGBitmapContextCreateImage(bitmapContext);
    CGContextRelease(bitmapContext);

    UIImage *result = [UIImage imageWithCGImage:mainViewContentBitmapContext];
    return result;
}

如果重要,则使用加载蒙版图像UIImage imageNamed:.此外,我确认在视网膜模拟器上运行时正在加载@ 2X图像.

更新:以上代码有效.我看到的工件是由图像消费者完成的其他变换引起的.这个问题可以删除,因为它不再是一个问题,或留给后人.

使用phoneGap使用Canvas实现绘图.我们遇到的问题是画布需要特定的像素尺寸.这很好,除了iPhone 4的Retina显示器,来自CSS/Webkit POV仍然是320px宽,即使技术上有640个实际的屏幕像素.

无论如何使用Canvas on Webkit来容纳视网膜显示器,同时保持与非视网膜显示器的兼容性？

我正在设计一个在移动设备上看起来与众不同的响应式网站.我的css中有三个单独的媒体查询以及视网膜显示的查询.

/** 768PX IPAD PORTRAIT **/
@media screen and (max-width: 768px) {}

/** 480PX IPHONE LANDSCAPE **/
@media screen and (max-width: 480px) {}

/** 320PX PORTRAIT **/
@media screen and (max-width: 320px) {}

/**  RETINA IMAGES **/
@media all and (-webkit-min-device-pixel-ratio: 2) {}

当iPad处于纵向模式时,它将获得移动版本,但是当它处于横向模式时,它将获得该网站的常规版本.

我的问题是这个,现在使用"新iPad"和视网膜显示器,某些视网膜图像没有正确对齐视网膜iPad版本.全球视网膜css正在推翻普通的CSS,我认为这应该是.

例如,在移动版本中,我有一个以屏幕为中心的背景图像,但在常规网站上,它左对齐.

有人知道只在CSS中针对iPad定位视网膜图像的方法吗？

谢谢

编辑:这是我正在玩的东西,但它似乎不起作用:

@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {}

我想要的效果

import numpy as np
import matplotlib.pyplot as plt
%matplotlib inline
%config InlineBackend.figure_format='retina'

在推出我所有的Jupyter笔记本电脑时,我无法弄清楚当前的方法是什么来实现这一目标.这里和其他地方有很多答案,但我找不到任何答案似乎都是最新的.

我如何在当前版本的Jupyter笔记本中完成上述操作(但一般不是IPython!):我应该应用哪些设置应该放在哪个配置文件中？

我试过了

c.InteractiveShellApp.matplotlib = "inline"
c.InlineBackend.figure_formats = set(['retina'])

在

~/.jupyter/jupyter_notebook_config.py

但这没有效果.

是否真的如果它在UIKit,包括drawRect,Retina显示器的高清方面是自动处理？那么这意味着drawRect,1024 x 768视图的当前图形上下文实际上是2048 x 1536像素的位图上下文？

(更新:如果我使用当前上下文创建图像drawRect并打印其大小:

CGContextRef context = UIGraphicsGetCurrentContext();
CGImageRef image = CGBitmapContextCreateImage(context);
NSLog(@"width of context %i", (int) CGImageGetWidth(image));
NSLog(@"height of context %i", (int) CGImageGetHeight(image));

然后在新的iPad上,状态栏被禁用,打印2048和1536,iPad 2将显示1024和768)

我们实际上享受为我们自动处理1点= 4像素的奢侈品.

但是,如果我们使用CGBitmapContextCreate,那么那些将是像素,而不是点？(至少如果我们为该位图提供数据缓冲区,缓冲区的大小(字节数)显然不是用于更高的分辨率,而是用于标准分辨率,即使我们NULL作为缓冲区传递以便CGBitmapContextCreate为我们处理缓冲区,大小可能与传入数据缓冲区相同,而且只是标准分辨率,而不是Retina的分辨率.

我们总是可以为iPad 1和iPad 2以及新iPad创建2048 x 1536,但它会浪费内存,处理器和GPU功能,因为它只需要新iPad.

那么我们是否必须使用a if () { } else { }来创建这样的位图上下文,我们如何实际这样做呢？并且我们所有的代码CGContextMoveToPoint都必须针对Retina显示器进行调整才能使用x * 2,y * 2而非视网膜显示器也只需使用x, y？这对代码来说可能非常混乱.(或者我们可以定义一个局部变量scaleFactor,并设置它[[UIScreen mainScreen] scale]所以它是1标准分辨率和2如果是视网膜,所以我们x并 …

鉴于在Mac OS X 10.7及更高版本上运行的Cocoa应用程序:

在运行时检查您的应用当前是否在连接了至少一个视网膜显示器的Mac上运行的最佳方法是什么？

如果检查这类事情真的是错误的,我完全欢迎有充分理由解释为什么(如果这些答案很好,我将会对这些答案进行投票).

但我还是想知道:).

您可能只需要专门检查新的Mac Book Pro"Retina"硬件(目前唯一具有视网膜显示屏的Mac),但我真的更喜欢更通用/通用/面向未来的方式来检查比这个.

理想情况下,我想知道如何检测视网膜显示器,而不是目前恰好配有视网膜显示器的特定Mac型号.

在我的iOS资源文件夹中,我有图像:

foo~iphone.png
foo@2x~iphone.png
foo~ipad.png
foo@2x~ipad.png

我加载它们:

NSString *fileName = [[NSBundle mainBundle] pathForResource:@"foo" ofType:@"png"];
UIImage *image = [UIImage imageWithContentsOfFile:fileName];

实验:

在iPhone,filename是/path/to/bundle/foo~iphone.png和视网膜iPhone上,它加载@2x版本.

在iPad,filename是/path/to/bundle/foo~ipad.png,在视网膜iPad上,它加载@2x版本.

也就是说,它加载我希望的图像,但pathForResource处理设备修改器,并imageWithContentsOfFile处理缩放修改器.

我想知道为什么.该文件中pathForResource只字未提设备修饰符,以及文档的imageWithContentsOfFile只字未提规模修饰.

是否有单独的文档准确指出每个功能的作用？

我需要制作一个支持1x和2x背景的dmg,但似乎没有关于hdiutil或其他工具(如dropdmg)中视网膜的信息.我创造了一个正常的,它显然在Retina MBP上模糊.有人有解决方案吗？

我有一个UIWebView显示一些本地文本和图像.我在某个地方犯了错误,或者UIWebView没有自动处理@2x高分辨率图像的后缀.

所以,我的问题是有没有其他人通过正常方式成功地将@2x图像加载到一个UIWebView,或者我需要做一些特别的事情？我可以以某种方式检测我的用户是否有视网膜显示器？

当您将-webkit-filter和-webkit-transition应用于Image并在悬停时更改过滤器时,图像过渡效果很好,但随后图像变得非常模糊.

注意:这只发生在Retina-Displays上 - 对于'普通'ppi 显示没有任何问题,但是模糊不清,例如带有Retina显示屏的新MacBook Pro.

我的CSS(没有供应商前缀):

img {filter:grayscale(1);filter:saturate(0%);transition:2s ease;width:200px;height:200px}
img:hover {filter:grayscale(0)}?

注意:要查看效果/错误,我已将转换持续时间设置为2秒

看看我的演示:http://jsfiddle.net/dya2t/7/

我怎样才能解决这个问题？

编辑:如果我设置:悬停状态过滤:没有它的尖锐!:-)但是当然转换不再起作用了: - /一旦图像上有过滤器(即使值为0或0%),图像在视网膜显示器上变得模糊(有或没有过渡......它一直都很模糊.我猜这是一个Filter-Bug.

这是WebKit中的已知错误https://bugs.webkit.org/show_bug.cgi?id=93471