Android中图像变换Matrix的原理应用

38. {

39. private Bitmap bitmap;

40. private Matrix matrix;

41. public TransformMatrixView(Context context)

42. {

43. super(context);

44. bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.sophie);

45. matrix = new Matrix();

46. }

47. @Override

48. protected void onDraw(Canvas canvas)

49. {

50. // 画出原图像

51. canvas.drawBitmap(bitmap, 0, 0, null);

52. // 画出变换后的图像

53. canvas.drawBitmap(bitmap, matrix, null);

54. super.onDraw(canvas);

55. }

56. @Override

57. public void setImageMatrix(Matrix matrix)

58. {

59. this.matrix.set(matrix);

60. super.setImageMatrix(matrix);

61. }

62. public Bitmap getImageBitmap()

63. {

64. return bitmap;

65. }

66. }

67. public boolean onTouch(View v, MotionEvent e)

68. {

69. if(e.getAction() == MotionEvent.ACTION_UP)

70. {

71. Matrix matrix = new Matrix();

72. // 输出图像的宽度和高度(162 x 251)

73. Log.e(“TestTransformMatrixActivity”, "image size: width x height = " +  view.getImageBitmap().getWidth() + " x " + view.getImageBitmap().getHeight());

74. // 1. 平移

75. matrix.postTranslate(view.getImageBitmap().getWidth(), view.getImageBitmap().getHeight());

76. // 在x方向平移view.getImageBitmap().getWidth()，在y轴方向view.getImageBitmap().getHeight()

77. view.setImageMatrix(matrix);

78. // 下面的代码是为了查看matrix中的元素

79. float[] matrixValues = new float[9];

80. matrix.getValues(matrixValues);

81. for(int i = 0; i < 3; ++i)

82. {

83. String temp = new String();

84. for(int j = 0; j < 3; ++j)

85. {

86. temp += matrixValues[3 * i + j ] + “\t”;

87. }

88. Log.e(“TestTransformMatrixActivity”, temp);

89. }

90. //          // 2. 旋转(围绕图像的中心点)

91. //          matrix.setRotate(45f, view.getImageBitmap().getWidth() / 2f, view.getImageBitmap().getHeight() / 2f);

92. //

93. //          // 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠

94. //          matrix.postTranslate(view.getImageBitmap().getWidth() * 1.5f, 0f);

95. //          view.setImageMatrix(matrix);

96. //

97. //          // 下面的代码是为了查看matrix中的元素

98. //          float[] matrixValues = new float[9];

99. //          matrix.getValues(matrixValues);

100. //          for(int i = 0; i < 3; ++i)

101. //          {

102. //              String temp = new String();

103. //              for(int j = 0; j < 3; ++j)

104. //              {

105. //                  temp += matrixValues[3 * i + j ] + “\t”;

106. //              }

107. //              Log.e(“TestTransformMatrixActivity”, temp);

108. //          }

109. //          // 3. 旋转(围绕坐标原点) + 平移(效果同2)

110. //          matrix.setRotate(45f);

111. //          matrix.preTranslate(-1f * view.getImageBitmap().getWidth() / 2f, -1f * view.getImageBitmap().getHeight() / 2f);

112. //          matrix.postTranslate((float)view.getImageBitmap().getWidth() / 2f, (float)view.getImageBitmap().getHeight() / 2f);

113. //

114. //          // 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠

115. //          matrix.postTranslate((float)view.getImageBitmap().getWidth() * 1.5f, 0f);

116. //          view.setImageMatrix(matrix);

117. //

118. //          // 下面的代码是为了查看matrix中的元素

119. //          float[] matrixValues = new float[9];

120. //          matrix.getValues(matrixValues);

121. //          for(int i = 0; i < 3; ++i)

122. //          {

123. //              String temp = new String();

124. //              for(int j = 0; j < 3; ++j)

125. //              {

126. //                  temp += matrixValues[3 * i + j ] + “\t”;

127. //              }

128. //              Log.e(“TestTransformMatrixActivity”, temp);

129. //          }

130. //          // 4. 缩放

131. //          matrix.setScale(2f, 2f);

132. //          // 下面的代码是为了查看matrix中的元素

133. //          float[] matrixValues = new float[9];

134. //          matrix.getValues(matrixValues);

135. //          for(int i = 0; i < 3; ++i)

136. //          {

137. //              String temp = new String();

138. //              for(int j = 0; j < 3; ++j)

139. //              {

140. //                  temp += matrixValues[3 * i + j ] + “\t”;

141. //              }

142. //              Log.e(“TestTransformMatrixActivity”, temp);

143. //          }

144. //

145. //          // 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠

146. //          matrix.postTranslate(view.getImageBitmap().getWidth(), view.getImageBitmap().getHeight());

147. //          view.setImageMatrix(matrix);

148. //

149. //          // 下面的代码是为了查看matrix中的元素

150. //          matrixValues = new float[9];

151. //          matrix.getValues(matrixValues);

152. //          for(int i = 0; i < 3; ++i)

153. //          {

154. //              String temp = new String();

155. //              for(int j = 0; j < 3; ++j)

156. //              {

157. //                  temp += matrixValues[3 * i + j ] + “\t”;

158. //              }

159. //              Log.e(“TestTransformMatrixActivity”, temp);

160. //          }

161. //          // 5. 错切 - 水平

162. //          matrix.setSkew(0.5f, 0f);

163. //          // 下面的代码是为了查看matrix中的元素

164. //          float[] matrixValues = new float[9];

165. //          matrix.getValues(matrixValues);

166. //          for(int i = 0; i < 3; ++i)

167. //          {

168. //              String temp = new String();

169. //              for(int j = 0; j < 3; ++j)

170. //              {

171. //                  temp += matrixValues[3 * i + j ] + “\t”;

172. //              }

173. //              Log.e(“TestTransformMatrixActivity”, temp);

174. //          }

175. //

176. //          // 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠

177. //          matrix.postTranslate(view.getImageBitmap().getWidth(), 0f);

178. //          view.setImageMatrix(matrix);

179. //

180. //          // 下面的代码是为了查看matrix中的元素

181. //          matrixValues = new float[9];

182. //          matrix.getValues(matrixValues);

183. //          for(int i = 0; i < 3; ++i)

184. //          {

185. //              String temp = new String();

186. //              for(int j = 0; j < 3; ++j)

187. //              {

188. //                  temp += matrixValues[3 * i + j ] + “\t”;

189. //              }

190. //              Log.e(“TestTransformMatrixActivity”, temp);

191. //          }

192. //          // 6. 错切 - 垂直

193. //          matrix.setSkew(0f, 0.5f);

194. //          // 下面的代码是为了查看matrix中的元素

195. //          float[] matrixValues = new float[9];

196. //          matrix.getValues(matrixValues);

197. //          for(int i = 0; i < 3; ++i)

198. //          {

199. //              String temp = new String();

200. //              for(int j = 0; j < 3; ++j)

201. //              {

202. //                  temp += matrixValues[3 * i + j ] + “\t”;

203. //              }

204. //              Log.e(“TestTransformMatrixActivity”, temp);

205. //          }

206. //

207. //          // 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠

208. //          matrix.postTranslate(0f, view.getImageBitmap().getHeight());

209. //          view.setImageMatrix(matrix);

210. //

211. //          // 下面的代码是为了查看matrix中的元素

212. //          matrixValues = new float[9];

213. //          matrix.getValues(matrixValues);

214. //          for(int i = 0; i < 3; ++i)

215. //          {

216. //              String temp = new String();

217. //              for(int j = 0; j < 3; ++j)

218. //              {

219. //                  temp += matrixValues[3 * i + j ] + “\t”;

220. //              }

221. //              Log.e(“TestTransformMatrixActivity”, temp);

222. //          }

223. //          7. 错切 - 水平 + 垂直

224. //          matrix.setSkew(0.5f, 0.5f);

225. //          // 下面的代码是为了查看matrix中的元素

226. //          float[] matrixValues = new float[9];

227. //          matrix.getValues(matrixValues);

228. //          for(int i = 0; i < 3; ++i)

229. //          {

230. //              String temp = new String();

231. //              for(int j = 0; j < 3; ++j)

232. //              {

233. //                  temp += matrixValues[3 * i + j ] + “\t”;

234. //              }

235. //              Log.e(“TestTransformMatrixActivity”, temp);

236. //          }

237. //

238. //          // 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠

239. //          matrix.postTranslate(0f, view.getImageBitmap().getHeight());

240. //          view.setImageMatrix(matrix);

241. //

242. //          // 下面的代码是为了查看matrix中的元素

243. //          matrixValues = new float[9];

244. //          matrix.getValues(matrixValues);

245. //          for(int i = 0; i < 3; ++i)

246. //          {

247. //              String temp = new String();

248. //              for(int j = 0; j < 3; ++j)

249. //              {

250. //                  temp += matrixValues[3 * i + j ] + “\t”;

251. //              }

252. //              Log.e(“TestTransformMatrixActivity”, temp);

253. //          }

254. //          // 8. 对称 (水平对称)

255. //          float matrix_values[] = {1f, 0f, 0f, 0f, -1f, 0f, 0f, 0f, 1f};

256. //          matrix.setValues(matrix_values);

257. //          // 下面的代码是为了查看matrix中的元素

258. //          float[] matrixValues = new float[9];

259. //          matrix.getValues(matrixValues);

260. //          for(int i = 0; i < 3; ++i)

261. //          {

262. //              String temp = new String();

263. //              for(int j = 0; j < 3; ++j)

264. //              {

265. //                  temp += matrixValues[3 * i + j ] + “\t”;

266. //              }

267. //              Log.e(“TestTransformMatrixActivity”, temp);

268. //          }

269. //

2
85. //          // 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠

286. //          matrix.postTranslate(0f, view.getImageBitmap().getHeight() * 2f);

287. //          view.setImageMatrix(matrix);

288. //

289. //          // 下面的代码是为了查看matrix中的元素

290. //          matrixValues = new float[9];

291. //          matrix.getValues(matrixValues);

292. //          for(int i = 0; i < 3; ++i)

293. //          {

294. //              String temp = new String();

295. //              for(int j = 0; j < 3; ++j)

296. //              {

297. //                  temp += matrixValues[3 * i + j ] + “\t”;

298. //              }

299. //              Log.e(“TestTransformMatrixActivity”, temp);

300. //          }

301. //          // 9. 对称 - 垂直

302. //          float matrix_values[] = {-1f, 0f, 0f, 0f, 1f, 0f, 0f, 0f, 1f};

303. //          matrix.setValues(matrix_values);

304. //          // 下面的代码是为了查看matrix中的元素

305. //          float[] matrixValues = new float[9];

306. //          matrix.getValues(matrixValues);

307. //          for(int i = 0; i < 3; ++i)

308. //          {

309. //              String temp = new String();

310. //              for(int j = 0; j < 3; ++j)

311. //              {

312. //                  temp += matrixValues[3 * i + j ] + “\t”;

313. //              }

314. //              Log.e(“TestTransformMatrixActivity”, temp);

315. //          }

316. //

317. //          // 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠

318. //          matrix.postTranslate(view.getImageBitmap().getWidth() * 2f, 0f);

319. //          view.setImageMatrix(matrix);

320. //

321. //          // 下面的代码是为了查看matrix中的元素

322. //          matrixValues = new float[9];

323. //          matrix.getValues(matrixValues);

324. //          for(int i = 0; i < 3; ++i)

325. //          {

326. //              String temp = new String();

327. //              for(int j = 0; j < 3; ++j)

328. //              {

329. //                  temp += matrixValues[3 * i + j ] + “\t”;

330. //              }

331. //              Log.e(“TestTransformMatrixActivity”, temp);

332. //          }

333. //          // 10. 对称(对称轴为直线y = x)

334. //          float matrix_values[] = {0f, -1f, 0f, -1f, 0f, 0f, 0f, 0f, 1f};

335. //          matrix.setValues(matrix_values);

336. //          // 下面的代码是为了查看matrix中的元素

337. //          float[] matrixValues = new float[9];

338. //          matrix.getValues(matrixValues);

339. //          for(int i = 0; i < 3; ++i)

340. //          {

341. //              String temp = new String();

342. //              for(int j = 0; j < 3; ++j)

343. //              {

344. //                  temp += matrixValues[3 * i + j ] + “\t”;

345. //              }

346. //              Log.e(“TestTransformMatrixActivity”, temp);

347. //          }

348. //

349. //          // 做下面的平移变换，纯粹是为了让变换后的图像和原图像不重叠

350. //          matrix.postTranslate(view.getImageBitmap().getHeight() + view.getImageBitmap().getWidth(),

351. //                  view.getImageBitmap().getHeight() + view.getImageBitmap().getWidth());

352. //          view.setImageMatrix(matrix);

353. //

354. //          // 下面的代码是为了查看matrix中的元素

355. //          matrixValues = new float[9];

356. //          matrix.getValues(matrixValues);

357. //          for(int i = 0; i < 3; ++i)

358. //          {

359. //              String temp = new String();

360. //              for(int j = 0; j < 3; ++j)

361. //              {

362. //                  temp += matrixValues[3 * i + j ] + “\t”;

363. //              }

364. //              Log.e(“TestTransformMatrixActivity”, temp);

365. //          }

366. view.invalidate();

367. }

368. return true;

369. }

370. }
     

371. 
       

第三部分 应用

在这一部分，我们会将前面两部分所了解到的内容和Android手势结合起来，利用各种不同的手势对图像进行平移、缩放和旋转，前面两项都是在实践中经常需要用到的功能，后一项据说苹果也是最近才加上的，而实际上在Android中，咱们通过自己的双手，也可以很轻松地实现之。

首先创建一个Android项目PatImageView，同时创建一个Activity：PatImageViewActivity。完成这一步后， 记得在AndroidManifest.xml中增加如下许可：

uses-permissionandroid:name=_“android.permission.VIBRATE”_/

因为我们将要通过短按还是长按，来确定将图片到底是缩放还是旋转。

现在来创建一个ImageView的派生类：PatImageView，其代码(PatImageView.java)如下(2011-11-22 revised)：

[java]  view plain copy

1. package com.pat.imageview;

2. import android.app.Service;

3. import android.content.Context;

4. import android.graphics.Matrix;

5. import android.graphics.PointF;

6. import android.os.Vibrator;

7. import android.util.FloatMath;

8. import android.view.GestureDetector;

9. import android.view.MotionEvent;

10. import android.view.View;

11. import android.widget.ImageView;

12. public class PatImageView extends ImageView

13. {

14. private Matrix matrix;

15. private Matrix savedMatrix;

16. private boolean long_touch = false;

17. private static int NONE = 0;

18. private static int DRAG = 1;    // 拖动

19. private static int ZOOM = 2;    // 缩放

20. private static int ROTA = 3;    // 旋转

21. private int mode = NONE;

22. private PointF startPoint;

23. private PointF middlePoint;

24. private float oldDistance;

25. private float oldAngle;

26. private Vibrator vibrator;

27. private GestureDetector gdetector;

28. public PatImageView(final Context context)

29. {

30. super(context);

31. matrix = new Matrix();

32. savedMatrix = new Matrix();

33. matrix.setTranslate(0f, 0f);

34. setScaleType(ScaleType.MATRIX);

35. setImageMatrix(matrix);

36. startPoint = new PointF();

37. middlePoint = new PointF();

38. oldDistance = 1f;

39. gdetector = new GestureDetector(context, new GestureDetector.OnGestureListener()

40. {

41. @Override

42. public boolean onSingleTapUp(MotionEvent e)

43. {

44. return true;

45. }

46. @Override

47. public void onShowPress(MotionEvent e)

48. {

49. }

50. @Override

51. public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY)

52. {

53. return true;

54. }

55. @Override

56. public void onLongPress(MotionEvent e)

57. {

58. long_touch = true;

59. vibrator = (Vibrator) context.getSystemService(Service.VIBRATOR_SERVICE);

60. // 振动50ms，提示后续的操作将是旋转图片，而非缩放图片

61. vibrator.vibrate(50);

62. }

63. @Override

64. public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY)

65. {

66. return true;

67. }

68. @Override

69. public boolean onDown(MotionEvent e)

70. {

71. return true;

72. }

73. });

74. setOnTouchListener(new OnTouchListener()

75. {

76. public boolean onTouch(View view, MotionEvent event)

77. {

78. switch(event.getAction() & MotionEvent.ACTION_MASK)

79. {

80. case MotionEvent.ACTION_DOWN:           // 第一个手指touch

81. savedMatrix.set(matrix);

82. startPoint.set(event.getX(), event.getY());

83. mode = DRAG;

84. long_touch = false;

85. break;

86. case MotionEvent.ACTION_POINTER_DOWN:   // 第二个手指touch

87. oldDistance = getDistance(event);   // 计算第二个手指touch时，两指之间的距离

88. oldAngle = getDegree(event);        // 计算第二个手指touch时，两指所形成的直线和x轴的角度

89. if(oldDistance > 10f)

90. {

91. savedMatrix.set(matrix);

92. middlePoint = midPoint(event);

93. if(!long_touch)

94. {

95. mode = ZOOM;

96. }

97. else

98. {

99. mode = ROTA;

100. }

101. }

102. break;

103. case MotionEvent.ACTION_UP:

104. mode = NONE;

105. break;

106. case MotionEvent.ACTION_POINTER_UP:

107. mode = NONE;

108. break;

109. case MotionEvent.ACTION_MOVE:

110. if(vibrator != null)    vibrator.cancel();

111. if(mode == DRAG)

112. {

113. matrix.set(savedMatrix);

114. matrix.postTranslate(event.getX() - startPoint.x, event.getY() - startPoint.y);

115. }

116. if(mode == ZOOM)

117. {

118. float newDistance = getDistance(event);

119. if(newDistance > 10f)

120. {

121. matrix.set(savedMatrix);

122. float scale = newDistance / oldDistance;

123. matrix.postScale(scale, scale, middlePoint.x, middlePoint.y);

124. }

125. }

126. if(mode == ROTA)

127. {

128. float newAngle = getDegree(event);

129. matrix.set(savedMatrix);

130. float degrees = newAngle - oldAngle;

131. matrix.postRotate(degrees, middlePoint.x, middlePoint.y);

132. }

133. break;

134. }

135. setImageMatrix(matrix);

136. invalidate();

137. gdetector.onTouchEvent(event);

138. return true;

139. }

140. });

141. }

142. // 计算两个手指之间的距离

143. private float getDistance(MotionEvent event)

144. {

145. float x = event.getX(0) - event.getX(1);

146. float y = event.getY(0) - event.getY(1);

147. return FloatMath.sqrt(x * x + y * y);

148. }

149. // 计算两个手指所形成的直线和x轴的角度

150. private float getDegree(MotionEvent event)

151. {

152. return (float)(Math.atan((event.getY(1) - event.getY(0)) / (event.getX(1) - event.getX(0))) * 180f);

153. }

154. // 计算两个手指之间，中间点的坐标

155. private PointF midPoint( MotionEvent event)

156. {

157. PointF point = new PointF();

158. float x = event.getX(0) + event.getX(1);

159. float y = event.getY(0) + event.getY(1);

160. point.set(x / 2, y / 2);

161. return point;

162. }

163. }

下面完善PatImageViewActivity.java的代码，使之如下：

[java]  view plain copy