引言
最近在研究android的变形,android的2d变形(包括缩放,扭曲,平移,旋转等)可以通过matrix来实现,3d变形可以通过camera来实现。接下来就将我这俩天研究的东西和大家分享下,先来看看matrix的用法。
效果图
变形以后
matrix矩阵
坐标变换矩阵,即一个3*3的矩阵,用来对图形进行坐标变换。
图1.1 a为坐标矩阵,c为原始矩阵,r是a和c矩阵相乘记过,那么可以知道:(矩阵知识,大学没学好的伤不起啊)
x' = a*x + b*y + c
y' = d*x + b*y + f
最后一列很少有资料提到,不过初始值g=h=0,大家可以去改变值试试,变化为3d效果,但是值没看出规律,那么i为缩放比例,初始值为1。
初始化坐标矩阵为{1,0,0, 0,1,0, 0,0,1}
上面讲到的是基本的算法,那么具体这个矩阵x行x列的值代表上面呢,不防简单的来看看
如果a={1,0,100, 0,1,-100, 0,0,2},那么可以算出来
x' = x + 100;
y' = y - 100;
也即在原始的基础上右移100,上移100,单位为像素。第三列第三行为2,表示为以前比例的1/2,记住这块容易弄错。
下面给出具体坐标对应变形的属性
|scalex, skewx, translatex|
|skewy, scaley, translatey|
|0 ,0 , scale |
实践
通过代码来看看具体的用法
public class matrixtransformview extends view {
private matrix mmatrix;
private paint mpaint = new paint(paint.anti_alias_flag);
private bitmap mbitmap;
public matrixtransformview(context context) {
super(context);
}
public matrixtransformview(context context, attributeset attrs) {
super(context, attrs);
}
public void setdrawable(int resid) {
mbitmap = bitmapfactory.decoderesource(getcontext().getresources(), resid);
}
/*
* 设置矩阵,并重绘
*/
public void setmatrixvalues(float[] array) {
if (mmatrix == null) {
mmatrix = new matrix();
}
mmatrix.reset();
mmatrix.setvalues(array);
invalidate();
}
public void resetmatrix() {
if (mmatrix != null) {
mmatrix.reset();
}
invalidate();
}
@override
protected void ondraw(canvas canvas) {
if (mmatrix != null) {
paint paint = mpaint;
canvas.drawbitmap(mbitmap, mmatrix, paint);
}
super.ondraw(canvas);
}
}
通过matrix的setvalues方法,将3*3的矩阵坐标值进行设置即可。
强调的一点是,在调用setmatrixvalues的时候需要调用invalidate方法,让view进行调用ondraw进行重绘。
矩阵的基本用法就是这些,往往在开发过程中,不直接通过矩阵坐标去实现变形,因为如果要实现选择,那么就比较复杂了,涉及到三角函数,对于数据早已经忘差不多的人,很是痛苦,当然如果非要用的话,算起来也不难。
那么为了避免直接使用矩阵坐标来操作变形,matrix类提供方法来进行变:
set方式:setscale, setskew, settranslate, setrotate
post方式:postscale, postskew, posttranslate, postrotate
pre方式:prescale, preskew, pretranslate, prerotate
set方式为直接设置,每一次调用set方法都会先重置矩阵。post可以理解成设置多次有效,效果是累加的。pre这里暂且理解成和post方式完全一样,后面3d的时候再纠结。
看代码:
public class matrixtransformview extends view {
private matrix mmatrix;
private paint mpaint = new paint(paint.anti_alias_flag);
private bitmap mbitmap;
public matrixtransformview(context context) {
super(context);
}
public matrixtransformview(context context, attributeset attrs) {
super(context, attrs);
}
public void setdrawable(int resid) {
mbitmap = bitmapfactory.decoderesource(getcontext().getresources(), resid);
}
/*
* 设置矩阵,并重绘
*/
public void setmatrixvalues(float[] array) {
if (mmatrix == null) {
mmatrix = new matrix();
}
mmatrix.reset();
mmatrix.setvalues(array);
invalidate();
}
public void postmatrixscale(float scalex, float scaley, float centerx, float centery) {
if (mmatrix == null) {
mmatrix = new matrix();
}
mmatrix.prescale(scalex, scaley, centerx, centery);
invalidate();
}
public void postmatrixskew(float skewx, float skewy, float centerx, float centery) {
if (mmatrix == null) {
mmatrix = new matrix();
}
mmatrix.postskew(skewx, skewy, centerx, centery);
invalidate();
}
public void postmatrixtranslate(float translatex, float translatey) {
if (mmatrix == null) {
mmatrix = new matrix();
}
mmatrix.posttranslate(translatex, translatey);
invalidate();
}
public void postmatrixrotate(float degree, float centerx, float centery) {
if (mmatrix == null) {
mmatrix = new matrix();
}
mmatrix.postrotate(degree, centerx, centery);
invalidate();
}
public void resetmatrix() {
if (mmatrix != null) {
mmatrix.reset();
}
invalidate();
}
@override
protected void ondraw(canvas canvas) {
if (mmatrix != null) {
paint paint = mpaint;
canvas.drawbitmap(mbitmap, mmatrix, paint);
}
super.ondraw(canvas);
}
}
matrix的基本用法就这么多。
扩展
变形是需要canvas来进行绘制的,canvas的绘制需要bitmap,所以这块利用一个继承自view的控件,通过setdrawable方式设置bitmap,那么选择目标必须是个bitmap,在文章的demo中,通过参数为int型resource的setdrawable方法进行bitmap获取,如果想对别的控件进行变形,例如viewgroup,可以通过如下方式:
matrix m = new matrix();
m.setvalues(new float[] {
1, 0, 0,
0, 1, 0,
0, 0, 1
});
bitmap bp = bitmap.createbitmap(viewgroup.getwidth(), viewgroup.getheight(), bitmap.config.rgb_565);
canvas can = new canvas(bp);
viewgroup.draw(can);
bp = bitmap.createbitmap(bp, 0, 0, bp.getwidth(), bp.getheight(), m, true);
img.setimagebitmap(bp);
通过将viewgroup转换成bitmap,然后自定义一个image来变形,隐藏viewgroup来达到效果。
疑问
1.如果谁知道post,pre的区别,请告诉我下,看看我的理解是否正确。
2.能否实现viewgroup直接变形,而非我上面讲的那种。