外文翻譯----淺談swt 圖像

1、<p>　　Taking a look at SWT Images</p><p>　　SummarySWT's Image class can be used to display images in a GUI. The most common source of images is to load from a standard file format such as GIF, JPEG

2、, PNG, or BMP. Some controls, including Buttons and TreeItems, are able to display an Image directly through the setImage(Image) method, but any control's paint event allows images to be drawn through the callback

3、9;s graphic context. SWT's ImageData class represents the raw data making up an SWT Image and determines the color for each pixel coo</p><p>　　By Joe Winchester, IBMSeptember 10th, 2003</p><p

4、>　　This first section of this article gives an introduction to colors and shows how an image records the color value of each pixel. </p><p>　　Introduction </p><p>　　Image lifecycle </p>

5、<p>　　ImageData </p><p><b>　　Color </b></p><p>　　PaletteData </p><p>　　Indexed palette </p><p>　　Direct palette </p><p>　　The next secti

6、on describes image transparency, alpha blending, animation, and how to scale images. </p><p>　　Transparency </p><p>　　Manipulating ImageData </p><p>　　Saving Images </p><

7、p><b>　　Blending </b></p><p>　　Single alpha value </p><p>　　Different alpha value per pixel </p><p>　　Image effects </p><p>　　GIF animation </p>&l

8、t;p><b>　　Scaling </b></p><p>　　Finally, the article shows how to create cursors from images, by using a source image together with a mask. </p><p><b>　　Cursors </b><

9、;/p><p>　　Platform cursors </p><p>　　Custom cursors </p><p>　　Introduction</p><p>　　The simplest way to create an SWT Image is to load it from a recognized graphic file fo

10、rmat. This includes GIF, BMP (Windows format bitmap), JPG, and PNG. The TIFF format is also supported in more recent Eclipse releases. Images can be loaded from a known location in the file system using the constructor I

11、mage(Display display, String fileLocation): </p><p>　　Image image = new Image(display,   "C:/eclipse/eclipse/plugins/org.eclipse.platform_2.0.2/eclipse_lg.gif"); </p><p>　　I

12、nstead of hard-coding the location of the image, it's more common to load the Image from a folder location relative to a given class. This is done by creating an InputStream pointing to the file with the method Class

13、.getResourceAsStream(String name), and using the result as the argument to the constructor Image(Display display, InputStream inputStream). </p><p>　　The Eclipse package explorer below shows the class com.fo

14、o.ShellWithButtonShowingEclipseLogo and the eclipse_lg.gif in the same folder. To following code would load the graphic from its location relative to the class. </p><p>　　Image image = new Image(display, &#

15、160;   ShellWithButtonShowingEclipseLogo.class.getResourceAsStream(      "eclipse_lg.gif")); </p><p>　　Once the image has been created it can be used as par

16、t of a control such as a Button or Label that is able to render the graphic as part of their setImage(Image image) methods. </p><p>　　Button button = new Button(shell,SWT.PUSH);button.setImage(image); </

17、p><p>　　Images can be drawn onto using a graphics context that is created with the constructor GC(Drawable drawable) with the Image as the argument. </p><p>　　GC gc = new GC(image);gc.setForegroun

18、d(display.getSystemColor(SWT.COLOR_WHITE));gc.drawText("I've been drawn on",0,0,true);gc.dispose(); </p><p>　　Using a GC to draw onto an Image permanently alters the graphic. More information

19、 on how to use a GC is covered in the article Graphics Context - Quick on the draw. </p><p>　　Image lifecycle</p><p>　　When an image is loaded, the first step is to create device independent Ima

20、geData represented by the class org.eclipse.swt.graphics.ImageData. Following this, the data is prepared for a specific device by creating an actual Image instance. </p><p>　　As well as loading an Image dire

21、ctly from a file, you can separately create the ImageData object and then construct the Image using Image(Device device, ImageData imageData). The data for an existing Image can be retrieved using getImageData(), althoug

22、h this will not be the same object that was used to create the image. This is because when preparing an image to be drawn onto a screen, properties such as its color depth might be different from the initial image data.

23、</p><p>　　Instances of Image represent an underlying resource that has been prepared for a specific device and they must be disposed when they are no longer required to free up the allocated resource. There

24、is no finalization of resources in SWT when an object is garbage collected. For more information see SWT: The Standard Widget Toolkit: Managing Operating System Resources. </p><p><b>　　ImageData</b&

25、gt;</p><p>　　ImageData can be thought of as the model for an image, whereas the Image is the view that's been prepared for output onto a specific device. The ImageData has a width and height, and a pixel

26、 value for each coordinate. The raw data of the image is a byte[], and the depth of the image specifies the number of bits that are used for each coordinate. An image depth of 1 can store two possible values for each pix

27、el (0 and 1), a depth of 4 can store 2^4=16, a depth of 8 can store 2^8=256 values and a d</p><p>　　The next section describes how colors are represented by their RGB values, and how PaletteData maps a map p

28、ixel value to a particular color. </p><p><b>　　Color</b></p><p>　　The class org.eclipse.swt.graphics.Color is used to manage resources that implement the RGB color model. Each color

29、is described in terms of its red, green and blue component (each expressed as an integer value from 0 for no color to 255 for full color). </p><p>　　Color cyanColor = new Color(display,0,255,255);// ... Cod

30、e to use the ColorcyanColor.dispose(); </p><p>　　The convenience class org.eclipse.swt.graphics.RGB exists in SWT that combines a color's red, green and blue values into a single object. </p><

31、;p>　　RGB cyanRGB = new RGB(0,255,255);Color cyanColor = new Color(display,cyanRGB);// ... Code to use the ColorcyanColor.dispose(); </p><p>　　The Color instance should be disposed when it is no longer

32、required, whereas the RGB has no need to be disposed. This is similar to the relationship between an Image and its ImageData, where Color and Image are device specific objects using underlying native resources, while RGB

33、 and ImageData are the underlying model data. </p><p>　　To avoid having to create and manage instances of the commonly used colors, the Display class allow these to be retrieved using the method Display.getS

34、ystemColor(int id). </p><p>　　Color cyanColor = display.getSystemColor(SWT.COLOR_CYAN) </p><p>　　When a Color is obtained by an SWT program using the method Display.getSystemColor(int id) method

35、, it must not be disposed. The rule of thumb that works for any SWT resource is "If you created it, you are responsible for disposing it". Because the statement above retrieved the cyan color instance, and didn

36、't explicitly construct it, it should not be disposed. </p><p>　　How a Color is actually represented on the display depends on factors such as the resolution and depth of the display. For more informatio

37、n on this and the SWT color model see SWT Color Model. </p><p>　　PaletteData</p><p>　　There are two kinds of PaletteData, an indexed palette and a direct palette. PaletteData is a model of how p

38、ixel values map to RGB values, and because they do not represent an underlying resource, they do not require disposing. </p><p>　　Indexed palette</p><p>　　With an indexed palette each pixel valu

39、e represents a number that is then cross indexed with the palette to determine the actual color. The range of allowable pixel values is the depth of the image. </p><p>　　The example below is a 48 by 48 squar

40、e image created with a depth of 1, and an indexed color palette. The indexed palette assigns 0 to be red and 1 to be green (by virtue of their order in the RGB[] in the constructor). The ImageData's un-initialized pi

41、xel values will initially be 0 (red), and two for loops set a 34 by 34 square in the center of the ImageData to be 1 (green). </p><p>　　PaletteData paletteData = new PaletteData(    

42、0;   new RGB[] {new RGB(255,0,0), new RGB(0,255,0)});    ImageData imageData = new ImageData(48,48,1,paletteData);for(int x=11;x<35;x++){        for(int y

43、=11;y<35;y++){            imageData.setPixel(x,y,1);        }    }    Image image = new Image

44、(display,imageData); </p><p>　　The above example has a depth of 1 so it can store 2 colors, but as the color depth of the ImageData increases then so can the number of colors in the palette.  An indexed

45、 palette can have a 1, 2, 4, or 8 bit depths, and an 8 bit depth provides 2^8 = 256 possible colors.  To have a higher color depth (such as 16, 24, or 32) a direct palette must be used. </p><p>　　Direct

46、 palette</p><p>　　Instead of having each pixel value represent an index in the palette corresponding to its color, a direct palette allows each pixel value to directly record its red, green and blue componen

47、t.  A direct PaletteData defines red, green and blue masks.  These masks are number of bits required to shift a pixel value to the left so the high bit of the mask aligns with the high bit of the first byte of

48、color.  For example, a 24 bit direct palette can divide itself into 3 portions, storing red in the lo</p><p>　　The value for each pixel represents a combination of the red, green and blue components int

49、o a single 24 bit integer. To construct an indexed palette the constructor used allows the red, green and blue color masks to be specified. </p><p>　　PaletteData palette = new PaletteData(0xFF , 0xFF00 , 0xF

50、F0000);    ImageData imageData = new ImageData(48,48,24,palette); </p><p>　　Using the same technique as earlier, the code iterates over every pixel coordinate setting it to either 0xFF (for r

51、ed) or 0xFF00 (for green). </p><p>　　for (int x=0;x<48;x++){        for(int y=0;y<48;y++){            if(y &g

52、t; 11 && y < 35 && x > 11 && x < 35){             imageData.setPixel(x,y,0xFF00);   // Set the center to green 

53、;           } else {                imageData.setPixel(x,y,0xFF);   // and everythin

54、g else to red         }        }    };    Image image = new Image(display,imageData); </p><p>　　Th

55、is creates the result below where the image is red with a green center. </p><p>　　Because you can use color depths of 16, 24 and 32 bits with direct palettes, you can represent more colors than are available

56、 with an indexed palette whose maximum depth is 8. A color depth of 24 allows you to represent 16 million colors (2^24). The tradeoff however is size, because an indexed palette with a depth of 8 requires one byte per im

57、age coordinate whereas a direct palette with a depth of 24 requires three bytes per image coordinate. </p><p>　　With both direct and indexed palettes you can go from an RGB to a pixel value and vice-versa us

58、ing the public methods int getPixel(RGB rgb) and RGB getRGB(int pixelValue). </p><p>　　Transparency</p><p>　　The purpose of transparency is to make a portion of the image non-opaque, so when it

59、is drawn on a GUI surface the original background shows through. This is done by specifying that one of the image colors is transparent. Whenever a pixel with the transparent color value is drawn, instead of using the RG

60、B value defined in the palette the original destination background pixel color is used instead. The effect to the user is that the areas of the image that equal the transparent pixel show the bac</p><p>　　Wh

61、en Images are used directly on controls such as Button or Label the native behavior may be that transparent pixels are ignored and drawn in the pixel color specified by the source. Native image transparency however is su

62、pported in SWT for operations involving a GC. To illustrate this the following file Idea.gif has a color depth of 8, and the white pixel (index 255 in the palette) set to be the transparent pixel. </p><p>　　

63、The shell below has a Label on the left with a Canvas next to it. The Idea.gif is used as the label's image, and also in the paint event of the Canvas. Because the Label does not support native transparency the origi

64、nal white color of the transparent pixel is used as the background, however the GC in the paint event respects the transparent pixel and the grey background shows through. </p><p>　　Image ideaImage = new Ima

65、geData(getClass().getResourceAsStream("Idea.gif"));    Label label = new Label(shell,SWT.NONE);label.setImage(ideaImage);    Canvas canvas = new Canvas(shell,SWT.NO_REDRAW_RESIZ

66、E);    canvas.addPaintListener(new PaintListener() {        public void paintControl(PaintEvent e) {         e.gc.drawImage(ide

67、aImage,0,0);        }    }); </p><p>　　For the above example I stacked the deck in my favor, because I didn't actually use the idea graphic that is inc

68、luded with eclipse articles in their banner. The reason is that the original graphic is a JPG file which doesn't support transparency, so I used a graphics tool to convert it to a GIF and set the value of the white p

69、ixel in the palette to be the transparency pixel. The original Idea.jpg is shown below, and although it looks the same as the Idea.gif, this is because it is on the white b</p><p>　　By using the original JPG

70、 file this offers a good example of how we to achieve a transparency effect progrmatically by manpulating its ImageData. The ImageData class has a public field transparentPixel to specify which pixel is transparent that

71、can be set once a persisted image file is loaded into an ImageData instance, irrespective of whether the persisted file format supports transparency. </p><p>　　The code below loads the Idea.jpg file in an Im

72、ageData object and sets the transparent pixel for the ImageData to be the pixel value of the color white in the palette. The pixel value in the indexed palette that represents white is retrieved by using getPixel(RGB). T

73、he manipulated ImageData is used to create an Image transparentIdeaImage that now has the white pixel value specified to be transparent. </p><p>　　ImageData ideaData = new ImageData(    

74、    getClass().getResourceAsStream("Idea.jpg"));int whitePixel = ideaData.palette.getPixel(new RGB(255,255,255));ideaData.transparentPixel = whitePixel;    Image transparentIdea

75、Image = new Image(display,ideaData); </p><p>　　Next a Shell uses the newly created image in a native Label and also in the paint event of a Canvas. A Windows Label does not support native transparency so it

76、still appears with a white background, however the GC for the Canvas uses the existing background color whenever a white pixel is encountered in the source image, so the image appears as transparent. </p><p>

77、;　　Label transparentIdeaLabel = new Label(shell,SWT.NONE);transparentIdeaLabel.setImage(transparentIdeaImage);    Canvas canvas = new Canvas(shell,SWT.NONE);    canvas.addPaintListener(ne

78、w PaintListener() {        public void paintControl(PaintEvent e) {         e.gc.drawImage(transparentIdeaImage,0,0);    &

79、#160;   }    }); </p><p>　　As can be seen from the second of the two images (drawn on the Canvas with the white pixel set to transparent), there are still some patches of white. Clo

80、ser analysis reveals that this is not a bug, but that these regions are not pure white (255,255,255), but are slighly off-white (such as 255,254,254). The transparent pixel of an ImageData can only be used for a single v

81、alue. This now presents the next problem to be solved - locate all of the off-white pixels in the ImageData and convert them t</p><p>　　Manipulating ImageData</p><p>　　Because the graphic Idea.j

82、pg isn't as white as we'd like it, we'll iterate over its imageData and convert the off-white pixels to pure white and then we'll save this into a new file Idea_white.jpg. In practice it's unlikely th

83、at you'd ever do this kind of programming in SWT, however it's a good example to use showing how ImageData can be analyzed and manipulated. </p><p>　　The first step is to load the image and then iter

84、ate over each pixel individually looking at its color. Because Idea.jpg is using a direct palette, the pixel value is an int that contains the red, green and blue component as masked bit areas. These mask value can be ob

85、tained from the palette. </p><p>　　ImageData ideaImageData = new ImageData(    getClass().getResourceAsStream("Idea.jpg"));int redMask = ideaImageData.palette.redMask;int blueMask

86、 = ideaImageData.palette.blueMask;int greenMask = ideaImageData.palette.greenMask; </p><p>　　For any pixel value we can bitwise AND it with the mask to see what the color component is. The red component is

87、the low order bits so this will be the actual value (from 0 to 255), however the green and blue values need adjusting as they are the high order bits in the pixel value. To make this adjustment the color component can be

88、 bit shifted to the right using the >> operator. If you are writing generic code to do this kind of manipulating, take care that direct palettes for color depths of 24</p><p>　　Two for loops will itera

89、te over the imageData. The first is traversing the image from top to bottom a line at a time, and creates an int[] to hold each line of data. The method ImageData.getPixels(int x, int y, int getWidth, int[] pixels, int s

90、tartIndex) is used to extract a line at a time from the imageData's bytes. The API for this method is slightly irregular, because rather than returning the resulting data it instead is declared as void, and the resul

91、ting pixel data is injected into the int</p><p>　　int[] lineData = new int[ideaImageData.width];    for (int y = 0; y < ideaImageData.height; y++) {     ideaImageData.

92、getPixels(0,y,width,lineData,0);        // Analyze each pixel value in the line        for (int x=0; x<lineData.length; x++){   &

93、#160;       // Extract the red, green and blue component            int pixelValue = lineData[x];      

94、   int r = pixelValue & redShift;         int g = (pixelValue & greenShift) >> 8;         int b = (pixelValue &

95、; blueShift) >> 16;         if (r > </p><p>　　Having manipulated the raw bytes making up the ImageData we have now successfully changed the off-white values

96、to pure white. </p><p>　　Saving Images</p><p>　　Now that we have the ImageData where all of the whitish pixels have been converted to white, and the transparency pixel of the palette has been se

97、t to be the color white, we'll save this image so that next time an SWT program needs the pure white JPF it can just load the file and use it as is. To save ImageData into a file use the class org.eclipse.swt.graphic

98、s.ImageLoader. The image loader has a public field data typed to ImageData[]. The reason the data field is an array of ImageData is to sup</p><p>　　ImageLoader imageLoader = new ImageLoader();imageLoader.da

99、ta = new ImageData[] {ideaImageData};imageLoader.save("C:/temp/Idea_PureWhite.jpg",SWT.IMAGE_JPEG); </p><p>　　The finished result is shown below. </p><p>　　It doesn't look much di

100、fferent to the original Idea.jpg because it is drawn on a white background, but when it is drawn on a Canvas with the white pixel set to be the transparent pixel the background shows through achieving the desired effect.

101、 </p><p>　　ImageData pureWhiteIdeaImageData =        new ImageData("C:/temp/Idea_PureWhite.jpg");pureWhiteIdeaImageData.transparentPixel =  

102、0;     pureWhiteIdeaImageData.palette.getPixel(new RGB(255,255,255));    final Image transparentIdeaImage = new Image(display,pureWhiteIdeaImageData);    Canvas

103、canvas = new Canvas(shell,SWT.NONE);    canvas.addPaintListener(new PaintListener() {       public void paintControl(PaintEvent e) {      

104、e.gc.drawImage(transparentIdeaImage,0,0);        }  </p><p>　　It might seem odd that in the above code that after loading the Idea_PureWhite.jpg file the transp

105、arent pixel was set to be white. Why not set the transparent pixel before we used the ImageLoader to create the persisted Idea_PureWhite.jpg file? The reason is that the JPEG image file format does not support transparen

106、cy. A GIF file supports native transparency, however changing the file type to SWT.IMAGE_GIF on the ImageLoader would not have worked, because GIF supports a maximum image depth of 8</p><p>　　We have shown h

107、ow an ImageData is an array of int values representing each pixel coordinate, and how each pixel value is mapped to a color through the palette. This allowed us to iterate over the image data for the Idea.jpg, query pixe

108、l values that were close to white, and convert these to a pure white RGB value. The end result of this was that we were able to create the Idea_PureWhite.jpg file that can be used as a transparent JPG by setting the whit