V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xyjtou
V2EX  ›  设计

像素点阵图标( pixel icons)怎么解决清晰度的问题?

  •  
  •   xyjtou · 2017-04-05 12:07:26 +08:00 · 3355 次点击
    这是一个创建于 2575 天前的主题,其中的信息可能已经有所发展或是发生改变。

    同一个图标,在不同的设备分辨率下面,有的清晰,有模糊。

    特别是现在移动设备越来越高的分辨率,以前做的点阵图标(位图),在移动屏幕上都是靠 CSS 控制模拟放大的,边缘会长毛,没有像素点阵的原始图片清晰。如果再绘制一个 2X 放大的图标,工作量大,和单线像素点阵的图标差别也大,有考虑用 svg 重绘,不知道实际情况在各种不同的分辨率的设备上,是否都能保持比较好的清晰度?

    3 条回复    2017-04-05 18:59:24 +08:00
    xyjtou
        1
    xyjtou  
    OP
       2017-04-05 12:18:41 +08:00
    补充:比如这类的像素图标 http://i1.piimg.com/1949/260d91a5c08d2e76.jpg
    maplerecall
        2
    maplerecall  
       2017-04-05 13:01:22 +08:00   ❤️ 5
    最简单的方法是直接近邻取样放大整数倍就好,不用重绘高 dpi 的图标,因为这种图标实际上就是一堆正方形组成的,无论图标分辨率多少,实际在屏幕上显示的视觉物理尺寸在所有设备上可以认为是相同的。当然有空重绘 svg 也是没问题的。

    另外有个 css 属性 image-rendering ,设置 image-rendering:pixelated 可以让图片像素化缩放,在现代浏览器上兼容性还可以。
    fffflyfish
        3
    fffflyfish  
       2017-04-05 18:59:24 +08:00
    waifu2x? 现在很多 Super Resolution 做的都不错呢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1511 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 17:09 · PVG 01:09 · LAX 10:09 · JFK 13:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.