ios开发矢量图,apple矢量图

APP安卓原生 设计该怎么切图给开发？

1.png的方案

创新互联是一家集网站建设,雁山企业网站建设,雁山品牌网站建设,网站定制,雁山网站建设报价,网络营销,网络优化,雁山网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

3x规格png实施起来会简单很多，设计师可以以iPhone6s plus为设计稿，导出稿中相同大小的图片，以6s为设计稿的话输出图片时宽高均乘以1.5。开发拿到切图后，iOS对应放入3x，Andrpid对应放入xxhdpi，搞定。目前使用率来说3x（即3倍）就足够了，其他倍数会从3x自动缩小获得。

2.矢量图方案

这个方案会复杂些。iOS矢量图为pdf格式，大小以1x输出就可以，这样做可以方便开发人员导入和布局。Android可以用VectorDrawable或者svg转png插件，需要的是svg格式矢量图。用VectorDrawable的话，设计师最好用最简单的方式制作svg，最好只用绘线和填色，蒙版、挖空、区域透明等等就不要用了。用svg转png插件的话，对制作svg就没有太多要求，但是这类插件会有一些坑，开发人员要去填坑，比如转换后清晰度不够的问题。

我给公司的方案就是设计师输出一套1x规格pdf矢量图，iOS可以直接套用，Android采用svg转png插件，自己写脚本将pdf批量转换成svg，再由插件生成3x规格png，是的，Android最终还是用png。因为公司iOS项目先启动，图片都做好了，不可能再让设计师为VectorDrawable一个图片一个图片的调整。

3. 分辨率和倍数

市面上各个规格的分辨率都有，Android的太多先不讨论，iPhone 6s+是1080x1920，6s是750x1334，se是640x1136。差异这么大难不成要一一适配？显然不可能，幸好除了分辨率外还有倍数的概念，比如2x（2倍）就是指设备的一个点等于2px，一般来说不同设备的一个点物理距离是接近的。我们来看看分辨率除以倍数后的“点”分辨率，那么6s+是414x736，6s是375x667，se是320x480，从这个角度上看，其实几个机型的“点”宽度变化不大，只是高度有所不同，只要布局得当完全可以做到一套设计稿通用大部分机型。

Android的情况也是类似，只是倍数更多，它用另一个名称表示：mdpi（1倍）hdpi（1.5倍）xhdpi（2倍）xxhdpi（3倍）。

补充，6s和se是2x，6s+的倍数情况比较复杂，详细请看：

iPhone 6 Plus的逻辑分辨率为什么是414x736？ - IOS app开发 android app开发 为什么 iPhone 6 Plus 要将 3x 渲染的 2208x1242 分辨率缩小到 1080p 屏幕上？ - iOS 开发

4. 良好的布局

一般来说，选用一款常用机型的分辨率作为设计稿，剩下的便是布局的工作。

布局就像排版一样，每一块区域每一个控件的摆放规则：往一边靠还是居中，拉伸铺满，保持一定比例，还是固定大小。要把设计稿想像得能够随时变宽变窄变高变矮，当大小发生变化时，按照预定的布局规则设计稿会变得怎么样。布局没有捷径，就是多思考多练习。

给个例子，公司的设计稿是以5s为基准，分辨率640x1136，倍数2x。

知道以哪个倍数为基准对适配很重要。比如说，有一次设计师不清楚怎么描述一个九宫格页面时，我让他针对6s+、6s、4s再做一次调整，基准倍数是2x，6s+基准到2x的尺寸便是828x1472，方便同一个设计稿复制到不同分辨率上，通过不同分辨率的调整便能做出满意的页面布局。（在这里你需要一套高效的标注工具）

* 当倍数不为1x，所有px表示的数值都应该能被倍数整除。以2x为例，输出图标大小就不能为45px x 45px，因为当输出到1x和3x时就会出现小数，小数会被舍弃。正确做法是调整到44px或者46px。

5、为什么不采用等比例缩放适配

为什么不采用等比例缩放适配？说到底，更大的屏幕尺寸提供了更多内容展示的空间，等比例缩放没能把发挥出大屏的优势，同时也很难保证系统UI的一致性体验。

ios 怎么用代码显示.svg 的矢量图

示例SVG显示如图SVG格式是XML的一种，SVG文件其实只是普通的文本文件，用一般的文本编辑器便可查看或修改。

?xml

version="1.0"?

!DOCTYPE

svg

PUBLIC

"-//W3C//DTD

SVG

1.1//EN"

"http：//www。w3。org/Graphics/SVG/1.1/DTD/svg11.dtd"

svg

xmlns="http：//www。w3。org/2000/svg"

version="1.1"

width="467"

height="462"

!--

This

is

the

red

square:

--

rect

x="80"

y="60"

width="250"

height="250"

rx="20"

fill="red"

stroke="black"

stroke-width="2px"

/

!--

This

is

the

blue

square:

--

rect

x="140"

y="120"

width="250"

height="250"

rx="40"

fill="blue"

stroke="black"

stroke-width="2px"

fill-opacity="0.7"

/

/svg

[编辑]

SVG显示

[编辑]

插件支持

目前，最常用的SVG插件来自Adobe公司（Adobe

SVG

Viewer），另外Corel也提供SVG浏览器（Corel

SVG

Viewer）。

[编辑]

本地支持

比较著名的

SVG

项目包括

Mozilla

SVG

Project，KDE

的

KSVG，以及

Amaya

等。

Mozilla

Firefox自版本

1.5

发行后，即开始支援

SVG

格式的显示。

基于

Java

的

SVG

项目主要有

Batik

SVG

Toolkit

等。

Opera、Google

Chrome和Safari支持SVG显示。

Microsoft的Internet

Explorer至8.0版为止,尚未支援SVG。

[编辑]

各种SVG解释器支持程度比较

W3C的SVG网站上有一个测试套件可以用来测试SVG解释器对于标准的支持。这个套件既可以在线运行也可以下载到本地运行。截至2007年中，对于流行的SVG软件有如下测试结果：

对SVG支持最好的浏览器是Opera，它支持大多数的SVG特性。

对于专门的SVG浏览器，Batik

SVG

viewer能对大多数特性有良好支持，与Opera不相伯仲。但它不能和浏览器互动。

加载了Adobe

SVG

Viewer的Internet

Explorer也能支持多数SVG特性，但是由于没有浏览器的原生支持，在交互方面许多特性不支持。

Mozilla

Firefox

2.0对SVG特性的支持相当弱，许多重要特性如动画等都不能支持。

[编辑]

设计工具

能够设计SVG图形作品的软件工具包括Adobe

Illustrator以及CorelDRAW等。

而开放源代码的软件有Scribus、Karbon14、Inkscape以及Sodipodi等。

[编辑]

软件支援

Adobe

公司

SVG

插件

及

Adobe

公司

SVG

应用实例演示

Inkscape

开放源代码的软体

Karbon14

开放源代码的软体

Sodipodi

开放源代码的软体

Mozilla

SVG

and

Mozilla

SVG

演示

Firefox

1.5－首个

Firefox

版本开始支援显示

SVG

格式

Opera

浏览器－Opera

8.0

版开始支援显示

SVG

Tiny

1.1

的

spec

规格

[编辑]

参考资料

^

M

Media

Type

registration

for

image/svg+xml

[编辑]

外部连接

相关的维基共享资源：

可缩放矢量图形

W3C

SVG

官方标准网站

svg.org

社群消息网站

svgx.org

新闻及资源网

about-svg.de

svgwiki

SVG

Web

Opera开发网站上关于SVG的展示及教程（英文）

iOS开发中UIImageView是否支持矢量图片（如.svg格式图片）

写一个控制器继承自UITabBarController，

在该控制器的ViewDidLoad方法中加入如下代码

// tabBarItem的图片名称

NSArray *images = @[@"tabBarItem_allTest_normal.png",@"tabBarItem_allTest_selected.png",@"tabBarItem_oneStation_normal.png",@"tabBarItem_oneStation_selected.png",@"tabBarItem_testResult_normal.png",@"tabBarItem_testResult_selected.png",@"tabBarItem_userCenter_normal.png",@"tabBarItem_userCenter_selected.png"];

for(int i= 0;i 8;){

// 分别给tabBarItem设置图片，图片模式为源图片

UITabBarItem *item = [self.tabBar.items objectAtIndex:i/2];

UIImage *normalImage = [UIImage imageNamed:images[i+1]];

normalImage = [normalImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

UIImage *selectImage = [UIImage imageNamed:images[i]];

selectImage = [selectImage imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

[item setFinishedSelectedImage:normalImage

withFinishedUnselectedImage:selectImage];

i+=2;

}

// 设置tabbar的选中和未选中的字体颜色

[[UITabBarItem appearance] setTitleTextAttributes:@{

NSForegroundColorAttributeName:[UIColor lightGrayColor]

} forState:UIControlStateNormal];

[[UITabBarItem appearance] setTitleTextAttributes:@{

NSForegroundColorAttributeName:[UIColor lightGrayColor]

} forState:UIControlStateSelected];

ios app界面设计一定要矢量图吗

先说结论：建议做 UI 尽可能使用如 Adobe Illustrator、Sketch.app 这样的矢量绘制软件。若使用 PS 等位图处理软件，也建议尽可能使用矢量蒙版。

我自己是一个喜欢业馀使用 Adobe Illustrator 做设计的人。在当前大部分 GUI，包括 iOS 的 UI 中，控件的形状大部分都是很简单的图形。作为一个矢量创作软件，AI 在对形状、曲线的处理上有天然的优势。如在 AI 中，可以随时调整圆角矩形的圆角大小。并且 AI 支持多重填充、多重描边。如一个对象可以在底层有一个横向的渐变填充模拟金属光泽，同时还可以有一个垂直方向的填充来模拟光照，在 PS 中似乎只能通过绘制两个单独的矢量对象来实现。在 CS 5 加入对齐到像素网格功能以及 CS 6 中加入描边渐变功能後，可以说 AI 非常适合用於精细的 UI 设计，甚至用 AI 做 UI 设计可能比用 PS 更为方便。

【重读iOS】CoreGraphics&Quartz 2D

从这段话理解， Quartz 2D 只是一套API, CoreGraphic 建立了一套 图形绘制 的体系。 CoreGraphic 中那些提供图形绘制功能的API，开放出来集合成了 Quartz 2D 。

核心为The Graphics Context,即CGContextRef。

graphics context并不是绘制的输出目标，但是它包含了绘制和输出所需的所有数据，是一个封装。针对不同的输出，有不同的context封装，所以一定程度，可以把context理解为输出目标。或者说对于输出目标，开发者也只能接触到context这个级别了。

总之context包含了绘制所有的参数，这也正是context这类角色的作用，只需要向context里输入绘制要求就可以了，剩余的它来处理。

就这6种输出目标：

PDF跟打印机没什么可说的，bitmap就是生成一个位图，window就是窗口，iOS里就是view,这里的Layer不是跟view一起的CALayer，而是CGLayer。CGLayer作用就是单图形的复用，替代原本用图片做的事，要更高效些。

所以内容就清晰的分为了两大部分： 1. 针对绘制目标的特殊处理,bigmap CGLayer 2. 绘制指令，path color shadow等

路径是什么？理解这个首先要理解 Quartz 2D 的绘制模式：

所以图形根本是线条，这个线条就是路径。

绘制路径的手段有：

CGContextMoveToPoint CGContextAddLineToPoint 搞定所有只有直线的图形

CGContextAddArcToPoint

这个就是指定圆心、半径、开始角度、结束角度，很好理解

CGContextAddArc

这个画圆弧的逻辑是：当前点+这个方法里的两个点，3个点构成一个夹角，然后画一个圆弧和这两条线都相切。这个方法在画圆角矩形的时候很好用，因为圆弧结束后还会把直线部分也一起画出来。

双控制点： CGContextAddCurveToPoint

单控制点： CGContextAddQuadCurveToPoint

然后是方便的添加矩形、椭圆。变化性最大的就是贝塞尔曲线了，可以模拟很多情况。

路线绘制好后还可以设置样式：

graphics context的混合模式，并不是指view和其他view，或layer之间的混合，而是一次绘制过程中，对某个点的多次上色之前的混合。就像绘画时，在鼻子上画了黄色，然后加点白色表现高光。

之后的绘制只会在被切出来的那个区域，其他区域绘制无效。

trasnform是对绘制的坐标进行了转换，前面都是说如何绘制出一个图，有了完整的图形后，可以用trasnform来对它进行整体的转换：移动、旋转、缩放以及这3个的叠加效果。

位图是什么？

一个位图就是一个像素数组，每个像素表示图片里的一个点。显示器上的图像都是一个个像素构成的，每个像素有自己的颜色，如果建一个表，把显示器上的每个像素的颜色都记录到表里，这个表数组就是一个位图bitmap。常用的JPEG PNG都是位图，当然这些图片都是压缩过得，内存和像素颜色不是一一对应的，但现实到屏幕之前一定会做解压。

有位图，就有对应的矢量图，它是由一系列计算机指令来描述和记录一幅图，显示之前再从这些指令从新把图绘制出来。

用一个圆来做例子，位图就是一张图，记录了每个位置的像素，跟其他的图没有不同。而矢量图可能就是一个命令： circle(radius:5,center:(20,20),color:...)

矢量图可能就要依赖于系统对指令的解析，而且绘制也需要消耗性能，但存储和传输更方便，而且一个很大的好处是可以应对不同的分辨率。

回到 Quartz 2D ,bitmap的context的作用就是把绘制的截图输出到一张图片里，常见的应用就是屏幕截图了。

核心方法：

mask在对个地方可以见到:这里的mask,CALayer里的mask,就是圆角的那个，哈希表里也有mask。总的来说就就是使用一种规则屏蔽掉某些数据，图像之间处理的mask，像这里，一般是根据alpha数据来的。alpha0的地方图像显示，alpha==0的地方图像屏蔽。

CAlayer是负责view的内容显示的，而CGLayer和它完全不同，它并不做显示，而是存储。构造一个样式，比如自己绘制一个小星星，然后要重用这个小星星，两个方案：1. 使用bitmap，即把绘制的小星星变成一张图，想怎么用都可以。 2.使用CGLayer保存绘制结果。

可以理解CGLayer为对一个图形的引用、保存，可以在需要的地方绘制出来，可以看成是一种特殊的图片，消耗更小、更高效复用的图片。

除了重复绘制，高性能离屏渲染(High-quality offscreen),缓冲数据(Buffering)时也可以使用。Buffering的场景不是很清楚，但High-quality offscreen可以用于复杂图形的副线程绘制，在副线程把复杂图形绘制出来，然后存储在CGLayer里，在显示的时候直接显示，略去绘制过程的性能影响。

核心方法：