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里,在显示的时候直接显示,略去绘制过程的性能影响。

核心方法:


分享题目:ios开发矢量图,apple矢量图
标题路径:http://bzwzjz.com/article/dsddchh.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都响应式网站建设 成都网站设计 成都响应式网站建设公司 公司网站建设 网站制作报价 成都网站设计 成都网站建设 企业网站建设 高端网站设计 成都网站设计公司 手机网站制作设计 成都网站建设 成都网站制作 成都企业网站设计 移动网站建设 成都网站建设 成都网站制作 定制级高端网站建设 成都企业网站建设 成都网站设计 自适应网站设计 成都网站制作