android绘图,android绘图原理
Android手机/平板上有哪些好用的画画软件?
好用的手机绘画软件有妙笔生花、MediBang Paint Pro、Sketch、InfiniteDesign、Painter。
创新互联公司一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!为您提供成都网站建设、网站制作、成都网页设计、重庆小程序开发、成都网站开发、成都网站制作、成都软件开发、成都APP应用开发是成都本地专业的网站建设和网站设计公司,等你一起来见证!
1、妙笔生花
妙笔生花为一款专业级的绘图应用程序基于iPhone及iPod Touch移动平台。SketchBookreg;Mobile通过简洁及直观的用户界面提供完整的素描和绘画工具。
使用SketchBookreg;Mobile便可随时随地数码纪录创作灵感。此移动版本与著名的SketchBook Pro使用相同的绘画引擎,配有一流的笔刷工具及流畅的铅笔工具。
2、MediBang Paint Pro
MediBang Paint Pro为一款免费的漫画插画绘图应用。不仅可以绘制出精美的漫画插画,还可以通过MediBang Paint制作漫画。
因为MediBang Paint具备简单切割漫画格和可以分别整理每个漫画资料的页面管理功能。而且MediBang Paint搭载了最适合绘图板的绘画引擎,可以使各个品牌的绘图板发挥出最大的功能。
3、Sketch
Sketch为一款适用于所有设计师的矢量绘图应用。矢量绘图也是进行网页,图标以及界面设计的最好方式。但除了矢量编辑的功能之外,Sketch同样添加了一些基本的位图工具,比如模糊和色彩校正。Sketch软件的特点是容易理解,上手简单,对于有设计经验的设计师来说,入门门槛很低。
4、InfiniteDesign
InfiniteDesign软件功能特色有无限画布(平移,缩放,旋转);无限图层和图层选项:分割,合并,翻转,重复,透明转换层;滤镜效果包括四种类型的模糊,内部或外部的阴影;流体界面设计的流动性和充分的触摸屏设备进行了优化;保存为JPEG或PNG(背景或无背景)。
5、Painter
Painter是数码素描与绘画工具的选择,属于一款仿自然绘画软件,拥有全面和逼真的仿自然画笔。它是专门为渴望追求自由创意及需要数码工具来仿真传统绘画的数码艺术家、插画画家及摄影师而开发的。它能通过数码手段复制自然媒质(Natural Media)效果。
Android绘图之Canvas变换(6)
前面讲解了Canvas的基本概念, Android绘图之Canvas概念理解(5) ,
对Canvas的概念进行了分析,但是没有说明和屏幕的关系,Canvas不等于屏幕,屏幕不会动的,我们也无法对屏幕进行(平移,缩放等)操作,只能对Canvas进行操作,所以对Canvas进行操作,屏幕不动,最终会导致看到的图像不同。
下面开始讲解Canvas的变幻操作:
包括:translate,rotate,scale,skew,clip,clipout,matrix
先从最简单的平移开始:
对Canvas进行平移,
dx: x轴方向进行平移,正值向屏幕右侧
dy:y轴方向进行平移,正值向屏幕下方
绘制两个点查看原点位置。
原点显然改变了,以后再绘制任何形状都是以translate后的原点开始绘制。
参数说明
sx:横向的缩放,默认为1,小数缩小,整数放大
sy:纵向的缩放,默认为1,小数缩小,整数放大
px,py,看源码知道是先translate,执行sx,sy然后再translate反方向。
第二次translate的坐标为(-px sx,-px sy),最终的效果就是px,py是缩放后不动的点。
缩放后坐标减半。
如果想控制缩放后的位置,如何控制呢,这就需要第二个函数。
还可以控制其他位置,例如控制缩放后在中心。
rotate有两个函数:
rotate(float degrees)
rotate(float degrees, float px, float py)
Degree:旋转的角度,正值为顺时针,负值为逆时针
Px,py:旋转的中心,如果不指定旋转中心默认为(0,0)点
指定旋转中心为矩形中心
参数说明:
sx:画布在x方向上倾斜相应的角度,sx倾斜角度的tan值,
sy:画布在y轴方向上倾斜相应的角度,sy为倾斜角度的tan值,
根据矩形或者路径裁剪画布,画布被切割之后,只有部分区域可用,其他区域无法绘制内容。
Clip函数切割的区域可用,clipOut未被切割的区域可用。(过时函数不再讲解)
Matrix提供了一些方法来控制变换:
android绘图之Paint(1)
android绘图之Canvas基础(2)
Android绘图之Path(3)
Android绘图之drawText绘制文本相关(4)
Android绘图之Canvas概念理解(5)
Android绘图之Canvas变换(6)
Android绘图之Canvas状态保存和恢复(7)
Android绘图之PathEffect (8)
Android绘图之LinearGradient线性渐变(9)
Android绘图之SweepGradient(10)
Android绘图之RadialGradient 放射渐变(11)
Android绘制之BitmapShader(12)
Android绘图之ComposeShader,PorterDuff.mode及Xfermode(13)
Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)
Android绘图之贝塞尔曲线简介(15)
Android绘图之PathMeasure(16)
Android 动态修改渐变 GradientDrawable
android绘图之Canvas基础(2)
Canvas画布,用于绘制出各种形状配合画布的变幻操作可以绘制出很多复杂图形,基本的绘制图形分类。
提供的绘制函数:
上面四个函数都可以绘制canvas的背景,注意到PorterDuff.Mode变量,它只对两个canvas绘制bitmap起作用,所以此处暂时不讨论mode参数(没有设置mode默认使用srcover porterduff mode)。
Rect 和RectF都是提供一个矩形局域。
(1)精度不一样,Rect是使用int类型作为数值,RectF是使用float类型作为数值。
(2)两个类型提供的方法也不是完全一致。
**
rect:RectF对象,一个矩形区域。
rx:x方向上的圆角半径。
ry:y方向上的圆角半径。
paint:绘制时所使用的画笔。**
**
cx 圆心x
cy 圆心y
radius半径**
需要一个Path,代表路径后面会讲解。
绘制线的集合,参数中pts是点的集合,两个值代表一个点,四个值代表一条线,互相之间不连接。
offset跳过的点,count跳过之后要绘制的点的总数,可以用于集合中部分点的绘制。
跳过部分节点:
没有跳过点
RectF oval:生成弧的矩形,中心为弧的圆心
float startAngle:弧开始的角度,以X轴正方向为0度,顺时针
float sweepAngle:弧持续的角度
boolean useCenter:是否有弧的两边,True,还两边,False,只有一条弧
在矩形框内画一个椭圆,如果是个正方形会画出一个圆。
canvas.drawPoint();
canvas.drawPoints();
**
只需要提供两个点一个坐标就可以绘制点。
canvas.drawPoint(20,20,mPaint);
float[] points = {30,40,40,50,60,60};
canvas.drawPoints(points,mPaint);**
这几种方法类似:
canvas.drawText("好好学习,天天向上",100,100,mPaint);
drawTextOnPath
沿着一条 Path 来绘制文字
text 为所需要绘制的文字
path 为文字的路径
hOffset 文字相对于路径的水平偏移量,用于调整文字的位置
vOffset 文字相对于路径竖直偏移量,用于调整文字的位置
值得注意的是,在绘制 Path 的时候,应该在拐弯处使用圆角,这样文字显示时更舒服
大致讲解,后面会重点讲解。
Rect src
Rect dst
其中src和dst这两个矩形区域是用来做什么的?
Rect src:指定绘制图片的区域
Rect dst或RectF dst:指定图片在屏幕上的绘制(显示)区域
首先指定图片区域,然后指定绘制图片的区域。
android绘图之Paint(1)
android绘图之Canvas基础(2)
Android绘图之Path(3)
Android绘图之drawText绘制文本相关(4)
Android绘图之Canvas概念理解(5)
Android绘图之Canvas变换(6)
Android绘图之Canvas状态保存和恢复(7)
Android绘图之PathEffect (8)
Android绘图之LinearGradient线性渐变(9)
Android绘图之SweepGradient(10)
Android绘图之RadialGradient 放射渐变(11)
Android绘制之BitmapShader(12)
Android绘图之ComposeShader,PorterDuff.mode及Xfermode(13)
Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)
Android绘图之贝塞尔曲线简介(15)
Android绘图之PathMeasure(16)
Android 动态修改渐变 GradientDrawable
Android绘图之RadialGradient 放射渐变(11)
LinearGradient 和 SweepGradient,这次讲解RadialGradient;
RadialGradient被称为放射渐变,就是从中心向外圆形渐变。
两个构造函数,第一个构造函数可以实现两种颜色的渐变,第二个构造函数可以实现多个颜色的渐变。
参数说明:
centerX ,centerY:shader的中心坐标,开始渐变的坐标。
radius:渐变的半径,
centerColor,edgeColor:中心点渐变颜色,边界的渐变颜色,
colors:渐变颜色数组,
stoops:渐变位置数组,类似扫描渐变的positions数组,取值[0,1],中心点为0,半径到达位置为1.0f,
tileMode:shader未覆盖以外的填充模式。
构造函数:
RadialGradient(float centerX, float centerY, float radius, @ColorInt int centerColor, @ColorInt int edgeColor, @NonNull TileMode tileMode);
提供中心坐标,半径,颜色值,TileMode
Stops数组取值为[0-1],一般为从小到大,表示每个位置对应的颜色值,如果stops不为null,colors必须和stops一一对应,否则可能导致崩溃,如果stops为null,各颜色从中心到边界线性渐变。
stops数组为null,四种颜色线性渐变:
stops数组不为null:
如果数组多余颜色个数:
大致做个小例子,如果需要线上使用需要考虑很多问题,类似ondraw最好不要声明对象等:
替换为多颜色 private int[] colors = {Color.YELLOW, Color.RED, Color.BLUE, Color.GREEN};
android绘图之Paint(1)
android绘图之Canvas基础(2)
Android绘图之Path(3)
Android绘图之drawText绘制文本相关(4)
Android绘图之Canvas概念理解(5)
Android绘图之Canvas变换(6)
Android绘图之Canvas状态保存和恢复(7)
Android绘图之PathEffect (8)
Android绘图之LinearGradient线性渐变(9)
Android绘图之SweepGradient(10)
Android绘图之RadialGradient 放射渐变(11)
Android绘制之BitmapShader(12)
Android绘图之ComposeShader,PorterDuff.mode及Xfermode(13)
Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)
Android绘图之贝塞尔曲线简介(15)
Android绘图之PathMeasure(16)
Android 动态修改渐变 GradientDrawable
android绘图之Paint(1)
Paint 讲解开篇
android中绘制特定图案类似显示中的绘画需要画笔和画纸,为此android提供了Paint和Canvas。
Paint和Canvas分别代表画笔和画布。
The Paint class holds the style and color information about how to draw geometries, text and bitmaps.
Paint类似画笔,保存着绘制文本,图形,图片的样式和颜色信息。(颜色,宽度,粗细,透明度,字体样式,字体大小)。
提供了三种初始化方法:
Paint(),
Paint(int flags),
Paint(Paint paint)。
第二种构造函数传入了flag,相当于无参构造之后调用了setFlags(int),有很多种flag,这里举个例子UNDERLINE_TEXT_FLAG(其他的flag见developers文档),绘制文字时会有下划线,多个flag或可以达到设置多个flag的目的。
Paint常用的设置函数:
setAlpha()透明度
setAntiAlias()抗锯齿
setColor(),setARGB()设置颜色
setStyle(Paint.Style style) 设置填充样式
setStrokeCap(Paint.Cap cap) 画笔的样式(落笔,收笔时)
setStrokeJoin(Paint.Join join)连接点的样式
setStrokeWidth(float width)设置画笔宽度
setShadowLayer(float radius, float dx, float dy, int shadowColor) 设置阴影
setTextSize(float textSize) 字体大小
setTextAlign(Paint.Align.RIGHT)设置字体对齐方式
后期讲解:
setColorFilter(ColorFilter filter) 设置颜色过滤
setUnderlineText(true) 下划线
setPathEffect() 设置路径效果
setTypeface() 设置字体风格
setFilterBitmap() 设置图片过滤
setXfermode(Xfermode xfermode) xfermode设置图像混合模式
setShader(Shader shader) 设置shader包括渐变shader,图片shader
。。。。。。。。
setAlpha(int a) 设置透明度,a 值得范围 [0..255],仅仅改变setColor()的颜色的透明度,不改变颜色值,0是完全透明,255完全不透明。
注意:需要先调用setColor(),再调用setAlpha才会生效,否则将会被覆盖,因为setColor中包含了alpha。
setStyle设置填充样式,所谓填充的样式指只绘制线或者绘制同时填充:
Paint.Style.FILL 填充内部,会把闭合区域填充颜色
Paint.Style.FILL_AND_STROKE 填充内部和描边
Paint.Style.STROKE 仅描边,仅仅绘制边界
默认FILL 填充内部,
STROKE样式
FILL_AND_STROKE样式和FILL 类似但当画笔宽度很宽时会产生不同
setColor,setARGB设置颜色,设置画笔的颜色,setARGB()参数范围0-255。
setAntiAlias(boolean) 抗锯齿,使边界更顺滑(有些屏幕分辨率不高,导致像素点比较大,绘制边界可能会有颗粒感,打开抗锯齿边界颗粒感会减少)。
setTextSize(float textSize) 字体大小,单位是px,如果是dp要注意转换。
setTextAlign(Paint.Align.RIGHT)设置字体对齐方式,根据下面的实例可以,对齐方式基于开始绘制的点。
一起讲解:
mPaint.setTextSize(50);
mPaint.setTextAlign(Paint.Align.LEFT);
canvas.drawText("android Paint 学习 LEFT",300,300,mPaint);
mPaint.setTextAlign(Paint.Align.CENTER);
canvas.drawText("android Paint 学习 CENTER",300,400,mPaint);
mPaint.setTextAlign(Paint.Align.RIGHT);
canvas.drawText("android Paint 学习 RIGHT",300,500,mPaint);
setTextAlign对齐是相对于开始绘制的坐标点。
setShadowLayer(float radius, float dx, float dy, int shadowColor) 设置阴影
mPaint.setShadowLayer(10,-20,30,Color.GRAY);
canvas.drawText("android Paint 学习 CENTER",getWidth()/2,450,mPaint);
setShadowLayer(float radius, float dx, float dy, int shadowColor)
Radius设置角度,dx,dy控制字体的上下左右出现,有正负之分,dx的正负代表右左,dy的正负代表下上。
setStrokeCap(Paint.Cap.ROUND)
设置绘制起始点和结尾点的样式,
三种样式ROUND,BUTT,SQUARE
Cap.ROUND(圆形)、Cap.SQUARE(方形)、Paint.Cap.BUTT(无)
ROUND:
BUTT和SQUARE差别不大:
setStrokeJoin(Paint.Join join),设置绘制path连接点的样式
mPaint.setStrokeJoin(Paint.Join.ROUND);
// mPaint.setStrokeJoin(Paint.Join.MITER);
// mPaint.setStrokeJoin(Paint.Join.BEVEL);
Join.MITER(结合处为锐角)、
Join.Round(结合处为圆弧)、
Join.BEVEL(结合处为直线)
ROUND样式:
MITER样式:
BEVEL样式:
setXfermode(Xfermode xfermode) xfermode设置图像混合模式
setShader(Shader shader) 设置shader包括渐变shader,图片shader
还有很多其他属性会后续讲解。
android绘图之Paint(1)
android绘图之Canvas基础(2)
Android绘图之Path(3)
Android绘图之drawText绘制文本相关(4)
Android绘图之Canvas概念理解(5)
Android绘图之Canvas变换(6)
Android绘图之Canvas状态保存和恢复(7)
Android绘图之PathEffect (8)
Android绘图之LinearGradient线性渐变(9)
Android绘图之SweepGradient(10)
Android绘图之RadialGradient 放射渐变(11)
Android绘制之BitmapShader(12)
Android绘图之ComposeShader,PorterDuff.mode及Xfermode(13)
Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线(14)
Android绘图之贝塞尔曲线简介(15)
Android绘图之PathMeasure(16)
Android 动态修改渐变 GradientDrawable
当前文章:android绘图,android绘图原理
网页链接:http://myzitong.com/article/dsgcigg.html