Image中的transformation理解【swt.snippet】

xmind

浏览: 564496 次
性别:
来自: 北京

最近访客更多访客>>

louisliao

bishen

pkeropen

natiolmoon

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Java SWT

Eclipse IBM

/*******************************************************************************
 * 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也同理了。