/******************************************************************************* * Copyright (c) 2000, 2005 IBM Corporation and others. * All rights reserved. This program and the accompanying materials * are made available under the terms of the Eclipse Public License v1.0 * which accompanies this distribution, and is available at * http://www.eclipse.org/legal/epl-v10.html * * Contributors: * IBM Corporation - initial API and implementation *******************************************************************************/ package org.eclipse.swt.snippets; /* * Use transformation matrices to reflect, rotate and shear images * * For a list of all SWT example snippets see * http://www.eclipse.org/swt/snippets/ */ import org.eclipse.swt.*; import org.eclipse.swt.events.*; import org.eclipse.swt.graphics.*; import org.eclipse.swt.layout.*; import org.eclipse.swt.widgets.*; public class Snippet207 { public static void main(String[] args) { final Display display = new Display(); final Image image = new Image(display, 110, 60); GC gc = new GC(image); Font font = new Font(display, "Times", 30, SWT.BOLD); gc.setFont(font); gc.setBackground(display.getSystemColor(SWT.COLOR_RED)); gc.fillRectangle(0, 0, 110, 60); gc.setForeground(display.getSystemColor(SWT.COLOR_WHITE)); gc.drawText("HOV", 10, 10, true); gc.setBackground(display.getSystemColor(SWT.COLOR_YELLOW)); gc.fillRectangle(0, 0, 10, 10); font.dispose(); gc.dispose(); final Rectangle rect = image.getBounds(); Shell shell = new Shell(display); shell.setText("Matrix Tranformations"); shell.setLayout(new FillLayout()); final Canvas canvas = new Canvas(shell, SWT.DOUBLE_BUFFERED); canvas.addPaintListener(new PaintListener () { public void paintControl(PaintEvent e) { GC gc = e.gc; gc.setAdvanced(true); if (!gc.getAdvanced()){ gc.drawText("Advanced graphics not supported", 30, 30, true); return; } // Original image int x = 30, y = 30; gc.setForeground(display.getSystemColor(SWT.COLOR_DARK_MAGENTA)); // gc.drawLine(20, 20, 580, 580); // gc.drawImage(image, x, y); Transform transform = new Transform(display); // transform.setElements(1, 0, 0, 1, 0 ,0); transform.scale(1, 1); // transform.translate(0.5f, 0.5f); // transform.invert(); gc.setTransform(transform); gc.drawImage(image, x, y); x += rect.width + 30; // Note that the tranform is applied to the whole GC therefore // the coordinates need to be adjusted too. // Reflect around the y axis. transform.setElements(-1, 0, 0, 1, 0 ,0); gc.setTransform(transform); //(-30-110-30-110,30) gc.drawImage(image, -1*x-rect.width, y); x = 30; y += rect.height + 30; // Reflect around the x axis. transform.setElements(1, 0, 0, -1, 0, 0); gc.setTransform(transform); //(30,-30-60-30-60) gc.drawImage(image, x, -1*y-rect.height); x += rect.width + 30; // Reflect around the x and y axes transform.setElements(-1, 0, 0, -1, 0, 0); gc.setTransform(transform); //(-30-110-30-110,-30-60-30-60) gc.drawImage(image, -1*x-rect.width, -1*y-rect.height); x = 30; y += rect.height + 30; // Shear in the x-direction transform.setElements(1, 0, -1, 1, 0, 0); gc.setTransform(transform); gc.drawImage(image, 300, y); // Shear in y-direction transform.setElements(1, -1, 0, 1, 0, 0); gc.setTransform(transform); gc.drawImage(image, 170, 475); // Rotate by 45 degrees float cos45 = (float)Math.cos(Math.PI/4); float sin45 = (float)Math.sin(Math.PI/4); System.out.println(cos45); System.out.println(sin45); transform.setElements(cos45, sin45, -sin45, cos45, 0, 0); gc.setTransform(transform); gc.drawImage(image, 250, 150); /* // Shear in x-y-direction transform.setElements(1, 1, 0, 1, 0, 0); gc.setTransform(transform); gc.drawImage(image, 170, 195); // Shear in x-y-direction transform.setElements(1, 1, 0, 1, 0, 0); gc.setTransform(transform); gc.drawImage(image, 280, -85); // Shear in y-direction transform.setElements(1, -1, 0, 1, 0, 0); // transform.translate(20, 20); gc.setTransform(transform); gc.drawImage(image, 280, 755); // gc.setTransform(transform); // gc.drawText("20,20", 20, 20, true); transform = new Transform(display); transform.rotate(30); gc.setTransform(transform); gc.drawImage(image, 350, 0); */ transform.dispose(); } }); shell.setSize(600, 600); shell.open(); while (!shell.isDisposed()) { if (!display.readAndDispatch()) display.sleep(); } image.dispose(); display.dispose(); } }
1,Instances of this class represent transformation matrices for points expressed as (x, y) pairs of floating point numbers.
org.eclipse.swt.graphics(package)
例子:org.eclipse.swt.snippets.Snippet207
实现:Use transformation matrices to reflect, rotate and shear images
Transform其实就是实现了坐标的转换,其实并没有改变图像本身。具体怎么改的我只是猜测,并在猜测后用程序去验证我的猜测。
Transform用途有:(这些都是针对于图像的)
1,放大,缩小。
2,旋转一定得角度。
3,根据矩形运算完成图像变换,X对称,Y对称,Y=X对称等等。
注意点:
1,Transform的变换是基于坐标系的变换,所以对所有点有效。这里要特别指出的是图像的起始坐标,也应跟着变换了。(简单想,不是太好理解,要认真分析Snippet207就可以看出)
2,
如何使用:
1,放大,缩小——scale(3,3)放大为原来的三倍。 scale(0.5f,0.5f)为1/2. 这里与ImageData的scaledTo不同,ImageData只是针对于图像变换,这是坐标系变大。
2,旋转一定得角度——rotate(45) 旋转45度,这里的參数直接是度数,而Math.cos()里面使用的弧度。坐标也转45度。
3,矩形运算——最复杂也最灵活。setElements(float m11, float m12, float m21, float m22, float dx, float dy)
transform.setElements(1, 0, 0, 1, 0 ,0)——原图不变。
transform.setElements(-1, 0, 0, 1, 0 ,0)——得到与原图Y对称的图。
transform.setElements(1, 0, 0, -1, 0 ,0)——得到与原图X对称的图。
transform.setElements(-1, 0, 0, -1, 0 ,0)——得到与原图Y=x对称的图。
transform.setElements(1, 0, -1, 1, 0 ,0)——X轴不变,Y轴向左转45度 的图。
transform.setElements(1, -1, 0, 1, 0 ,0)——Y轴不变,X轴向上转45度 的图。
上图就是Snippet207的效果图:
①,原图。
②,Y对称。
③,X对称。
④,Y=X对称。
⑤,X轴不变,Y轴向左转45度。
⑥,Y轴不变,X轴向上转45度。
⑦,X轴Y轴一起顺时针转45度,也可以看着是图像转。所以,transform.setElements(cos45, sin45, -sin45, cos45, 0, 0);和transform.rotate(30);等价。
矩阵运算的原理:
首先,看API文档上说了。
m11 - the first element of the first row of the matrix
m12 - the second element of the first row of the matrix
m21 - the first element of the second row of the matrix
m22 - the second element of the second row of the matrix
dx - the third element of the first row of the matrix
dy - the third element of the second row of the matrix
也就是说表示的矩形为,这里先不说dx和dy,马上最后说。
所以这里的坐标变换就成了。
(1, 0, 0, 1, 0 ,0)——(X,Y)——原图不变。
(-1, 0, 0, 1, 0 ,0)——(-X,Y)——得到与原图Y对称的图。
(1, 0, 0, -1, 0 ,0)——(X,-Y)——得到与原图X对称的图。
(-1, 0, 0, -1, 0 ,0)——(-X,-Y)——得到与原图Y=x对称的图。
(1, 0, -1, 1, 0 ,0)——(X-Y,Y)——X轴不变,Y轴向左转45度 的图。
(1, -1, 0, 1, 0 ,0)——(X,-X+Y)——Y轴不变,X轴向上转45度 的图。
上图展示了三种对称图。
对于其他如“(1, 0, -1, 1, 0 ,0)——(X-Y,Y)——X轴不变,Y轴向左转45度 的图”和“(1, -1, 0, 1, 0 ,0)——(X,-X+Y)——Y轴不变,X轴向上转45度 的图”我是采用点带入计算然后总结出坐标系的变换的。如下图:
这就是“(1, 0, -1, 1, 0 ,0)——(X-Y,Y)——X轴不变,Y轴向左转45度 的图”的变换。我取了四个点【(0,0),(0,Y),(X,0),(X,Y)】这样就可很明显地看出等价的坐标系的变换。当然“(1, -1, 0, 1, 0 ,0)——(X,-X+Y)——Y轴不变,X轴向上转45度 的图”也是同理了。所以,在遇到这个矩阵变换看不懂知道用这种方法就可以看出来。
最后说一下这个dx和dy,其实看了上面的坐标变换就可以很好想象dx和dy了。dx和dy就是实现坐标系的平移了。加入dx和dy,转换的公式就变成了:
再提一下还有个函数translate(float offsetX, float offsetY),这个的offsetX和offsetY就相当于dx和dy,这样就好理解了。
关于Transform基本上就讲完了,这里多说一下应用,矩形变化可以应用于任何的坐标系的变换。
这里补充一下为什么,(X,Y)旋转后,坐标变为了呢?顺便复习一下数学知识。
角坐标系和直角坐标系对应
所以:
当然Y也同理了。