ï»??xml version="1.0" encoding="utf-8" standalone="yes"?>
This programm loads an image via java.awt.Toolkit
, scales it down to a user-defined resolution and saves it as a JPEG file. The first part, the loading of the original image, is done the same way as in Viewer. So if you don't know yet how loading images with Toolkit
works you might want to study that program first.
Different from Viewer, this program (Thumbnail) works on the command line. So you won't get any windows or other graphical user interface components. The only visual feedback is the word Done.
after the program successfully terminated.
To use this program do the following:
Thumbnail.java
(regard case). Thumbnail.java
is and compile it: javac Thumbnail.javaYou should now have a new class file
Thumbnail.class
.java Thumbnail c:\image.jpg c:\thumbnail.jpg 120 80 75The file
image.jpg
must exist already, thumbnail.jpg
will be created (and any existing file of that name overwritten).You will need Java 1.2 or higher to successfully run this program. The com.sun.image.codec.jpeg
package that will be used for saving the thumbnail is not available with all Java development kits, but as long as you are using a Sun JDK, it should be present.
With Java 1.4 a new way of writing JPEG files was introduced, the image I/O library in the package javax.imageio
. See the Screenshot.java example program. It saves as PNG, but all you have to do is change the second argument of ImageIO.write
from png
to jpg
. The advantage of ImageIO
: It is available with each 1.4+ JDK and JRE, not only those coming from Sun.
Now let's see how this program works. First, it is checked that we have exactly five arguments. If this is not the case, an error message is printed to output and the program terminates.
Next, the input image is loaded via Toolkit
and MediaTracker
just as it was done in Viewer.
The third and fourth program argument contain the maximum size of the thumbnail to be created. The actual size of the thumbnail will be computed from that maximum size and the actual size of the image (all sizes are given as pixels). The code that does this is not really very readable, and also not essential to loading and saving image files. But it is necessary to create a thumbnail that is scaled correctly.
As an example, if the two arguments for the maximum thumbnail size are both 100
and the image that was loaded is 400
times 200
pixels large, we want the thumbnail to be 100
times 50
pixels large, not 100
times 100
, because the original image is twice as wide as it is high. A 100
times 100
pixel thumbnail would contain a very skewed version of the original image.
Now that we have determined the size of the thumbnail we create a BufferedImage
of that size, named thumbImage
. We ask for a Graphics2D
object for that new thumbnail image and call its drawImage
method to draw the original image on that new image. The call to drawImage
does the actual scaling. The rendering hints for bilinear interpolation can be left out if quality is not that necessary and speed more important. For nicer results (at least in some cases) try RenderingHints.VALUE_INTERPOLATION_BICUBIC
instead of RenderingHints.VALUE_INTERPOLATION_BILINEAR
.
In order to save the scaled-down image to a JPEG file, we create a buffered FileOutputStream
with the second argument as name and initialize the necessary objects from the com.sun.image.codec.jpeg
package. The quality argument from the command line is converted from the interval 0
to 100
to the interval 0.0f
to 1.0f
, because that's what the codec expects (I mostly use 0.75f
). The higher that quality number is, the better the resulting thumbnail image quality, but also the larger the resulting file.
The call to System.exit(0);
is unfortunately necessary for some Java runtime environments (because of a bug that keeps the AWT thread from terminating).
import com.sun.image.codec.jpeg.*;
import java.awt.*;
import java.awt.image.*;
import java.io.*;
/**
* Thumbnail.java (requires Java 1.2+)
* Load an image, scale it down and save it as a JPEG file.
* @author Marco Schmidt
*/
public class Thumbnail {
public static void main(String[] args) throws Exception {
if (args.length != 5) {
System.err.println("Usage: java Thumbnail INFILE " +
"OUTFILE WIDTH HEIGHT QUALITY");
System.exit(1);
}
// load image from INFILE
Image image = Toolkit.getDefaultToolkit().getImage(args[0]);
MediaTracker mediaTracker = new MediaTracker(new Container());
mediaTracker.addImage(image, 0);
mediaTracker.waitForID(0);
// determine thumbnail size from WIDTH and HEIGHT
int thumbWidth = Integer.parseInt(args[2]);
int thumbHeight = Integer.parseInt(args[3]);
double thumbRatio = (double)thumbWidth / (double)thumbHeight;
int imageWidth = image.getWidth(null);
int imageHeight = image.getHeight(null);
double imageRatio = (double)imageWidth / (double)imageHeight;
if (thumbRatio < imageRatio) {
thumbHeight = (int)(thumbWidth / imageRatio);
} else {
thumbWidth = (int)(thumbHeight * imageRatio);
}
// draw original image to thumbnail image object and
// scale it to the new size on-the-fly
BufferedImage thumbImage = new BufferedImage(thumbWidth,
thumbHeight, BufferedImage.TYPE_INT_RGB);
Graphics2D graphics2D = thumbImage.createGraphics();
graphics2D.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
RenderingHints.VALUE_INTERPOLATION_BILINEAR);
graphics2D.drawImage(image, 0, 0, thumbWidth, thumbHeight, null);
// save thumbnail image to OUTFILE
BufferedOutputStream out = new BufferedOutputStream(new
FileOutputStream(args[1]));
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);
JPEGEncodeParam param = encoder.
getDefaultJPEGEncodeParam(thumbImage);
int quality = Integer.parseInt(args[4]);
quality = Math.max(0, Math.min(quality, 100));
param.setQuality((float)quality / 100.0f, false);
encoder.setJPEGEncodeParam(param);
encoder.encode(thumbImage);
out.close();
System.out.println("Done.");
System.exit(0);
}
}
摘自http://www-128.ibm.com/developerworks/cn/xml/x-BatikSvg/?ca=dwcn-newsletter-xml
陈柯
技术æ€È›‘, å—京安元¿U‘技
2005 òq?1 æœ?
本文是作者在 SVGGIS ¾pÈ»Ÿçš„å¼€å‘实践过½E‹ä¸å…³äºŽ SVG åæ ‡è½¬æ¢çš„æ€È»“。在æè¿° SVG åæ ‡å˜æ¢åŽŸç†çš„åŒæ—Óž¼Œä½¿ç”¨ Apache Batik ™å¹ç›®å®žçŽ°äº†ç›¸å…³ä¾‹åã€?/BLOCKQUOTE>SVG 是一¿U用 xml è¯è¨€æ¥æ˜qîCºŒ¾l´å›¾å½¢å¯¹è±¡çš„è¯è¨€åQŒSVG å…许三ç§å›‘ÖŞ对象åQ?åQŽçŸ¢é‡å›¾å½¢ï¼Œ2åQŽå›¾ç‰‡ï¼Œ3åQŽæ–‡æœ¬å¯¹è±¡ã€‚这三ç§å›‘ÖŞ对象都å¯ä»¥æ”¯æŒåˆ†¾l„ï¼Œä½¿ç”¨æ ·å¼æ¸²æŸ“åQŒè¿›è¡Œå‡ ä½•å˜æ¢ã€?/P>
SVG ˜q˜èƒ½å¤Ÿé€šè¿‡è„šæœ¬æ¥å®žçŽîCº¤äº’æ“ä½œå’ŒåŠ¨æ€æ˜¾½Cºã€‚å¯ä»¥é€šè¿‡å®šä¹‰åŠ¨ç”»å¯¹è±¡æˆ–ä‹É用script 脚本æ¥å®žçŽ°åŠ¨ç”…R€?/P>
1. SVG ä¸‹å‡ ¿U常è§çš„å‡ ä½•å˜æ¢æ–¹å¼
1.1 一ä¸?SVG 例å
å›?2. æ ähœ¬æ–‡æ¡£
我们首先æ¥çœ‹ä¸€ä¸?SVG 的例å,½H—å£å³ä¸Šè§’有四个色å—åQŒæ¯ä¸ªè‰²å—是一ä¸?0×50的矩形ã€?/P>
<?xml version="1.0"?> <svg > <g> <rect x="0" y="0" width="50" height="50" style="fill:red" /> <rect x="50" y="0" width="50" height="50" style="fill:yellow" /> <rect x="0" y="50" width="50" height="50" style="fill:green" /> <rect x="50" y="50" width="50" height="50" style="fill:black" /> </g> </svg>
1.2 使用 Adobe SVG Viewer 展示åœ?SVG 文档ä¸å®žçŽ°çš„å‡ ä½•å˜æ¢
¾~©æ”¾<g transform="scale(2)">òq³ç§»<g transform="translate(200 ,200)">
å›?4. òq³ç§»200åQ?00个åƒç´?/B>
![]()
æ—‹è{<g transform="rotate(45)">
横切<g transform="skewX(45)">
å›?6. ä»?y è½´äØ“åŸºçº¿åœ?X æ–¹å‘æ¨ªåˆ‡45åº?/B>
![]()
2. åœ?Batik 下实çŽ?SVG çš„å‡ ä½•å˜æ?/SPAN>
2.1 Batik 的基¼‹€çŸ¥è¯†
2.1.1 Batik 的用é€?/B>Batik 是基äº?java è¯è¨€å®žçŽ°çš„ä¸€ä¸?SVG 应用的工具集åQŒç”¨äºŽå®žçް坹 SVG 对象的显½Cºã€ç¼–辑以åŠå°† SVG 囑ÖÅžå¯¹è±¡è½¬æ¢æˆå…¶ä»–å›¾ç‰‡æ ¼å¼ï¼Œå¦?jpgã€gif ½{‰ã€?/P>
˜q™ä¸ª™å¹ç›®çš„ç›®æ ‡å°±æ˜¯ç»™å¼€å‘ähå‘˜ä¸€å¥—ç”¨äºŽå¤„ç†æˆ–应用 SVG 对象的基¼‹€æ ¸å¿ƒæ¨¡åž‹ã€‚作为Apache ™å¹ç›®æˆå‘˜ä¹‹ä¸€åQŒè¯¥™å¹ç›®ä¹Ÿäؓ开å‘äh员æä¾›äº†ä¸€ä¸ªå¼€å‘çš„å¯æ‰©å±•çš„òq›_°ã€‚åŒæ—?batik 也维护了一个å¯ä»¥æŸ¥çœ?SVG æ–‡äšgçš„æµè§ˆå™¨ã€‚虽ç„?batik ˜q˜æ²¡æœ‰å®Œå…¨å®žçŽ?SVG çš„æ‰€æœ‰æ ‡å‡†è¯æ³•å’Œæ ‡è®°åQŒä½†é€šè¿‡æ¯”较ä¸åŒç‰ˆæœ¬çš„区别就会å‘玎ͼŒä»–æ£åœ¨ä»¥å¾ˆé«˜çš„æ•ˆçŽ‡è¦†ç›?SVG æ‰€æœ‰çš„æ ‡å‡†ã€?/P>
2.1.2 让我们实çŽîC¸€ä¸ªç®€å•çš„ Batik ½E‹åº
首先让我们实çŽîC¸€ä¸ªç®€å•çš„åŸÞZºŽ Batik çš?SVG ‹¹è§ˆå™¨ã€‚Batik ž®è£…了org.apache.batik.swing.JSVGCanvas 对象å¯ä»¥ç”¨äºŽåœ?swing ä¸åµŒå…?SVG 昄¡¤ºå®¹å™¨åQŒåƈå¯ä»¥é€šè¿‡ org.apache.batik.swing.JSVGCanvas æä¾›çš„æ–¹æ³•对 SVG 文档和图åƒè¿›è¡Œæ“作。这个æµè§ˆå™¨å¯ä»¥æ”¯æŒå¤§éƒ¨åˆ?SVG çš„è¯æ³•å’Œæ ‡å‡†åŒ…æ‹¬è„šæœ¬äº¤äº’çš„åŠŸèƒ½ï¼Œä½†æš‚æ—¶è¿˜æ²¡æœ‰å¼•å…¥åŠ¨ç”»ã€‚å…³äºŽåŠ¨ç”Õd’Œè„šæœ¬äº¤äº’çš„å†…å®ÒŽˆ‘们会在以åŽçš„æ–‡ç« ä¸è®²˜qŽÍ¼Œä»Šå¤©å…ˆé›†ä¸è§£å†›_‡ ä½•å˜æ¢çš„问题ã€?/P>
å›?7. ˜q行½E‹åºæ‰“开我们¾~–写çš?SVG 的例å?/B>
![]()
å¯ä»¥é€šè¿‡è¯¥é¡µé¢å¼•坯D¿è¡Œè¯¥½E‹åºåQ?
å›?8. ž®†ä¸€ä¸?SVGCanvas æ·ÕdŠ åˆ°ç•Œé?/B>
从附件ä¸å¯ä»¥æŸ¥çœ‹è¯¥ç¨‹åºçš„完整代ç åQŒä¹Ÿå¯é€šè¿‡ ¾|‘上下è²åœ°å€ ˜q行该程åºã€?
private javax.swing.JPanel SVGPanel = new javax.swing.JPanel(); private JSVGCanvas svgCanvas = new org.apache.batik.swing.JSVGCanvas(); SVGPanel.add("Center", svgCanvas);
2.2 通过 Batik çš?GVT 模型实现 SVG çš„å‡ ä½•å˜æ?/SPAN>
2.2.1 ä¸ÞZ»€ä¹ˆè¦ä½¿ç”¨ Batik æ¥å®žçŽ?SVG çš„å‡ ä½•å˜æ?/B>当我们用 Batik 工具集作ä¸?SVG 客户端的解决æ–ÒŽ¡ˆæ—Óž¼Œå¦‚羃攑Öã^¿U»è¿™æ ïLš„æ“ä½œž®±åœ¨æ‰€éš‘օ了。但 Batik òq¶æ²¡æœ‰ç›´æŽ¥æ”¯æŒå¦‚ Adobe SVG Viewer é‚£æ ·çš„é¼ æ ‡æ‹–åŠ¨å‡ ä½•å˜æ¢çš„æ“ä½œåQŒè¿™ž®Þp¦æ±‚我们对˜q™äº›åŠŸèƒ½˜q›è¡Œ¾~–程处ç†ã€?/P>
在分æž?SVG çš„å‡ ä½•å˜æ¢çš„¾l†èЂ之å‰åQŒå…ˆè®©æˆ‘们了解一下基本的æ“作¾~–程方å¼ã€?/P>
2.2.2 Batik 下通过 java.awt.geom.AffineTransform æ¥å®žçŽ?SVG çš„å‡ ä½•å˜æ?/B>
JSVGCanvas æä¾›æ–ÒŽ³•å¯ä»¥èŽ·å– java.awt.geom.AffineTransform 对象。AffineTransform 是用于实çŽ?D å‡ ä½•å›‘ÖÅžåæ ‡å˜æ¢å¤„ç†çš„对象,å¯ä»¥é€šè¿‡è¯¥å¯¹è±¡è¿›è¡ŒäºŒ¾l´å‡ 何空间ä¸ä¸¤ä¸ªåæ ‡¾pÈš„ç›æ€º’æ˜ å°„å’Œå˜æ¢ã€?/P>
òq³ç§»:
//å‘左和å‘下åã^¿U?0个åƒç´? java.awt.geom.AffineTransform rat = svgCanvas.getRenderingTransform(); rat.translate(50,50); svgCanvas.setRenderingTransform(rat);
¾~©æ”¾:
//以å±òq•左上角原点为固定点˜q›è¡Œ¾~©æ”¾æ“作 java.awt.geom.AffineTransform rat = svgCanvas.getRenderingTransform(); rat.scale(0.5,0.5); svgCanvas.setRenderingTransform(rat);
æ—‹è{:
//以å±òq•左上角原点为固定点˜q›è¡Œæ—‹è{¾~©æ”¾ java.awt.geom.AffineTransform rat = svgCanvas.getRenderingTransform(); rat.rotate(3.1415926/4); svgCanvas.setRenderingTransform(rat);
å¤åˆå˜æ¢:
//一个综åˆåã^¿U…R€æ”¾å¤§å’Œæ—‹è{90度的å¤åˆå˜æ¢ java.awt.geom.AffineTransform rat = svgCanvas.getRenderingTransform(); rat.translate(50åQ?0); rat.scale(2åQ?); rat.rotate(3.1415926/4); svgCanvas.setRenderingTransform(rat);
3. 当我们需è¦è¿›è¡Œå¤åˆå‡ ä½•å˜æ¢çš„æ—¶å€?/SPAN>
3.1 å…ˆæ¥è®©æˆ‘们通过ä¸åŒçš„å˜æ¢ä»£ç 组åˆå®žçްå¤åˆå‡ ä½•å˜æ?/SPAN>
//攑֤§ä¸€å€å’Œòq³ç§»50个åƒç´ çš„å¤åˆå˜æ¢
先让我们看第一个例å?
AffineTransform rat = svgCanvas.getRenderingTransform(); rat.scale(2,2); rat.translate(50,50); svgCanvas.setRenderingTransform(rat);
å¯ä»¥çœ‹å¾—出æ¥åQŒè¿™ä¸ªå˜æ¢çš„æœ€¾lˆæ•ˆæžœæ˜¯åQšå›¾å½¢çš„形状攑֤§ä¸€å€ï¼ŒåŽŸå›¾å½¢çš„åQ?åQ?åQ‰åŽŸç‚¹åæ ‡åã^¿U?00个åƒç´ ã€?/P>
冿¥çœ‹ç¬¬äºŒä¸ªä¾‹å:
//攑֤§ä¸€å€å’Œòq³ç§»50个åƒç´ çš„å¤åˆå˜æ¢ AffineTransform rat = svgCanvas.getRenderingTransform(); rat.translate(50,50); rat.scale(2,2); svgCanvas.setRenderingTransform(rat);
˜q™ä¸ªå˜æ¢çš„æœ€¾lˆæ•ˆæžœæ˜¯åQšå›¾å½¢çš„形状攑֤§ä¸€å€ï¼ŒåŽŸå›¾å½¢çš„åQ?åQ?åQ‰åŽŸç‚¹åæ ‡åã^¿U?0个åƒç´ ã€?/P>
3.2 关键是顺�/SPAN>
比较一下这两ç§òq³ç§»åŽçš„æ•ˆæžœä¼šå‘çŽ?åªæ˜¯å› 䨓¾~©æ”¾å’Œåã^¿UÈš„™åºåºä¸åŒåQŒå˜æ¢åŽçš„结果就å‘生了区别。第一个例å实际åã^¿UÈš„䏿˜¯50个åƒç´?而是100个åƒç´ 。而第二个例å则是òq³ç§»äº?0个åƒç´ ã€?/P>有兴‘£çš„读者å¯ä»¥æ·»åŠ å…¶ä»–å‡ ä½•å˜æ¢æ–¹å¼ï¼Œòq¶æµ‹è¯•ä¸åŒçš„å˜æ¢™åºåºåQŒä¼šå‘现å¤åˆå˜æ¢çš„顺åºä¸Žå¤åˆå˜æ¢çš„æœ€¾lˆæ•ˆæžœæ˜¯ç´§å¯†ç›¸å…³çš„。那么如何分æžå’Œè®¡ç®—å¤åˆå˜æ¢çš„å˜æ¢ç»“果呢åQŸè¿™é‡Œæˆ‘们需è¦è¡¥å……一ç‚ÒŽ•°å¦çŸ¥è¯†äº†ã€?/P>
3.3 对å•ä¸€çš„å‡ ä½•å˜æ¢è¿›è¡Œæ•°å¦æ¨¡åž‹åˆ†æž?/SPAN>
对计½Ž—机囑ÖÅžå¦ä¸å›‘ÖÅžå˜æ¢ç›¸å…³ç†è®ºå¾ˆç†Ÿæ‚‰çš„人å¯ä»¥èŸ©˜q‡è¿™éƒ¨åˆ†ç›´æŽ¥çœ?Batik 的实现方å¼ã€‚这节ä‹Éç”¨çš„é½æ¬¡å¼å›¾ç‰‡å¼•用自 SVGæ ‡å‡†ä¸å…³äºŽåæ ‡å˜æ¢çš„齿¬¡å¼çš„例忒图ã€?首先我们æ¥äº†è§£ä¸€ä¸‹å›¾å½¢å˜æ¢çš„齿¬¡å¼è®¡½Ž—方法:
å›?11. åŸºæœ¬å‡ ä½• å˜æ¢é½æ¬¡å¼?/B>
![]()
˜q™æ˜¯ä¸€ä¸ªåŸºæœ¬å›¾å½¢å˜æ¢é½‹Æ¡å¼ã€‚ç‰å¼çš„æœ€åŒ™¾¹æ˜¯ä¸€ä¸ªåæ ‡ç‚¹æœªå˜æ¢å‰çš„åæ ‡çŸ©é˜µï¼Œæœ€å·¦è¾¹æ˜¯è¯¥åæ ‡ç‚¹å˜æ¢åŽæ‰€åœ¨ä½¾|®çš„ä¸€ä¸ªä¸‰è¡Œä¸€åˆ—çš„åæ ‡çŸ©é˜µåQŒä¸é—´é‚£ä¸ªä¸‰è¡Œä¸‰åˆ—的矩阵ž®±æ˜¯å˜æ¢çŸ©é˜µã€‚ä¸åŒçš„å˜æ¢æ–¹å¼ž®†å¯¹åº”ä¸åŒçš„å˜æ¢çŸ©é˜µåQŒå›¾å½¢åã^¿UÀL•ˆæžœå°±æ˜¯é€šè¿‡˜q™æ ·ä¸€ä¸ªå˜æ¢é½‹Æ¡å¼æ¥å®žçŽ°çš„ã€?/P>
òq³ç§»:如果需è¦å°†å›‘ÖÅžòq³ç§»åQˆtxåQŒtyåQ‰ä¸ªåæ ‡æ—Óž¼Œé‡‡ç”¨å¦‚ä¸‹çš„å˜æ¢çŸ©é˜µå¸¦å…¥å˜æ¢æ–¹½E‹ã€?/P>
¾~©æ”¾åQšå¦‚果需è¦åœ¨ x è½´æ–¹å‘实çŽ?sx å€ç¾ƒæ”¾ï¼Œåœ?y è½´æ–¹å‘实çŽ?sy 轴羃放时åQŒé‡‡ç”¨å¦‚ä¸‹çš„å˜æ¢çŸ©é˜µå¸¦å…¥å˜æ¢æ–¹ç¨‹ã€?/P>
æ—‹è{:如果需è¦å°†å›‘փ旋è{ a 度时åQŒä‹Éç”¨å¦‚ä¸‹çš„å˜æ¢çŸ©é˜µå¸¦å…¥å˜æ¢æ–¹ç¨‹ã€?/P>
3.4 采用å¤åˆå‡ ä½•å˜æ¢çš„æ•°å¦æ¨¡åž‹åˆ†æž?/SPAN>
3.4.1 æ•°å¦åˆ†æžå½“两¾l„å˜æ¢åŒæ—¶ä½œç”¨äºŽåŒä¸€ä¸ªå›¾åƒæ—¶åQŒè¿ž¾lä‹É用该½{‰å¼åQŒå¾—出如下ç‰å¼ã€‚由于åšå˜æ¢çš„æ—¶å€™æ˜¯ž®†å˜æ¢çŸ©é˜‰|”¾åœ¨çŸ©é˜ëЧ¯çš„左边,所以对于å¤åˆå˜æ¢çš„å¼ååQŒåº”该从å›_‘左进行读。对于如下的å¼ååQšä»ŽåŒ™‡³å·¦ä¾‹Æ¡æ˜¯å˜æ¢å‰çš„åæ ‡åQŒç¬¬ä¸€‹Æ¡è{æ¢çš„转æ¢çŸ©é˜µåQŒç¬¬äºŒæ¬¡è½¬æ¢çš„è{æ¢çŸ©é˜µï¼Œè½¬æ¢åŽçš„åæ ‡å€¹{€?/P>
å›?15. ˜q›è¡Œä¸¤æ¬¡å˜æ¢çš„å¤åˆçŸ©é˜?/B>
![]()
˜q›ä¸€æ¥æŽ¨å¯?n ‹Æ¡å‡ ä½•å˜æ¢çš„å¤åˆå˜æ¢½{‰å¼åQ?/P>
3.4.2 æ¥å®žè·µä¸€ä¸?/B>
使用˜q™æ ·ä¸€ä¸ªå¤åˆå˜æ¢æ–¹å¼ï¼š
<g transform="translate(50,90) rotate(-45) translate(130,160)">
æ ÒŽ®å‰é¢çš„分æžç»“æžœå¸¦å…¥å˜æ¢æ–¹½E‹ï¼Œå¾—出如下½{‰å¼
æ ÒŽ®è®¡ç®—åŽçš„å˜æ¢çŸ©é˜µåQŒå¯å¾—å˜æ¢ç»“果是囑ÖŞ整体òq³ç§»åˆŽÍ¼ˆ255.03,111.21åQ‰ï¼ŒåŒæ—¶å›‘ÖŞ自èín沉K¡ºæ—‰™’ˆæ–¹å‘æ—‹è{45åº¦ã€‚æŸ¥çœ‹å®žé™…å˜æ¢ç»“果,˜q™é‡Œæˆ‘们å¯ä»¥å‘现åQŒå¯¹äº?SVG çš„å˜æ¢æ¥è¯ß_¼Œè™½ç„¶æˆ‘ä»¬ä¹ æƒ¯ä¸Šä»Žå·¦å¾€å›_†™å˜æ¢å‚数的,实际上图形åšå˜æ¢çš„æ—¶å€™æ˜¯ä»Žå³è¾¹çš„å˜æ¢å‚æ•°å¼€å§‹ä¾‹Æ¡è¿›è¡Œå›¾å½¢å˜æ¢çš„ã€?/P>
3.5 分æžä¸€ä¸?Batik 是如何实çŽ?SVG çš„å¤åˆå‡ ä½•å˜æ¢çš„
3.5.1 先看½W¬ä¸€ä¸ªä¾‹å:˜q™ä¸ªå˜æ¢æ˜¯å…ˆæ”‘Ö¤§åŽåã^¿UÈš„å˜æ¢åQŒå…¶å˜æ¢æ•ˆæžœæœ€¾lˆæ˜¯åQŒå…ˆž®†å›¾å½¢çš„形状攑֤§ä¸€å€ï¼Œç„¶åŽž®†å›¾å½¢æ•´ä¸ªåã^¿U?00个åƒç´ 。这里我们å¯ä»¥çœ‹å‡ºï¼Œè™½ç„¶æˆ‘们是先˜q›è¡Œçš„æ”¾å¤§å˜æ¢ï¼ŒåŽè¿›è¡Œçš„òq³ç§»æ“作åQŒä½†å½“我们进行å¤åˆå˜æ¢çš„æ—¶å€™ç”±äºŽå®žé™…è¿½Ž—æ—¶ä¸Šæ˜¯å…ˆè¿›è¡Œäº†òq³ç§»åQŒåŽ˜q›è¡Œäº†ç¾ƒæ”¾ã€‚或者简å•çš„ç†è§£ä¸ÞZ»Žå·¦å‘å›_…ˆå†™ç¾ƒæ”„¡Ÿ©é˜µï¼Œå†å†™òq³ç§»çŸ©é˜µåQŒè¿™æ ·å¾—å‡ºçš„å˜æ¢çŸ©é˜µž®±å¯ä»¥å¯¹å˜æ¢åŽçš„æ•ˆæžœ˜q›è¡Œè®¡ç®—了ã€?/P>
//攑֤§ä¸€å€å’Œòq³ç§»50个åƒç´ çš„å¤åˆå˜æ¢ //<g transform=" scale(2 ) translate(50 50)"> AffineTransform rat = svgCanvas.getRenderingTransform(); rat.scale(2,2); rat.translate(50,50); svgCanvas.setRenderingTransform(rat);
我们å¯ä»¥ž®†è¿™ä¸ªå˜æ¢å¯¹åº”的计算矩阵写出æ¥ï¼š
å›?20. å¤åˆå˜æ¢ä¾‹ä¸€çš„å˜æ¢çŸ©é˜?/B>
![]()
æ ÒŽ®ä¸Šé¢çš„åˆ†æžæˆ‘们å¯ä»¥çœ‹çš„出åQŒå…ˆ˜q›è¡Œ¾~©æ”¾å˜æ¢åœ¨è¿›è¡Œåã^¿UÕd˜æ¢çš„å¤åˆå˜æ¢æ—Óž¼Œå˜æ¢åŽåŽŸå›‘Ö…ƒçš„åæ ‡ä¼šæ˜ 射到新的佾|®ï¼Œå…¶ä¸åQ?/P>
X1=Sx(X+dx)
Y1=Sy(Y+dy)3.5.2 冿¥çœ‹ç¬¬äºŒä¸ªä¾‹ååQ?/B>
˜q™ä¸ªå˜æ¢æ˜¯å…ˆæ”‘Ö¤§åŽåã^¿UÈš„å˜æ¢åQŒå…¶å˜æ¢æ•ˆæžœæœ€¾lˆæ˜¯åQŒå…ˆž®†å›¾å½¢æ•´ä¸ªåã^¿U?0个åƒç´ ,然厞®†å›¾å½¢çš„形状攑֤§ä¸€å€ã€?/P>
//攑֤§ä¸€å€å’Œòq³ç§»50个åƒç´ çš„å¤åˆå˜æ¢ //<g transform="translate(50åQ?0) scale(2 )"> AffineTransform rat = svgCanvas.getRenderingTransform(); rat.translate(50,50); rat.scale(2,2); svgCanvas.setRenderingTransform(rat);
我们å¯ä»¥ž®†è¿™ä¸ªå˜æ¢å¯¹åº”çš„ svg 文档实现写出æ¥ï¼š
<g transform="translate(50 50) scale(2 )">
å›?21. å¤åˆå˜æ¢ä¾‹äºŒçš„å˜æ¢çŸ©é˜?/B>
![]()
æ ÒŽ®ä¸Šé¢çš„åˆ†æžæˆ‘们å¯ä»¥çœ‹çš„出åQŒå…ˆ˜q›è¡Œòq³ç§»å˜æ¢å†è¿›è¡Œç¾ƒæ”‘Ö˜æ¢çš„å¤åˆå˜æ¢æ—Óž¼Œå˜æ¢åŽåŽŸå›‘Ö…ƒçš„åæ ‡ä¼šæ˜ 射到新的佾|®ï¼Œå…¶ä¸åQ?/P>
X1=Sx*X+dx
Y1=Sy*Y+dy3.5.3 实用˜q™ä¸¤ä¸ªä¾‹åçš„æˆæžœ
å‡è®¾æˆ‘们需è¦å°†å›‘ÖŞ原点的佾|®ç§»åŠ¨åˆ°åQ?50åQ?00åQ‰ï¼ŒåŒæ—¶å½¢çŠ¶æ”‘Ö¤§åˆ°åŽŸæ¥çš„3å€ï¼Œè¯¥å¦‚ä½•è¿›è¡Œå˜æ¢æ¥å®žçް˜q™æ ·çš„æ•ˆæžœå‘¢åQ?/P>
使用½W¬ä¸€ä¸ªä¾‹å的分枾l“æžœåQŒå…ˆ˜q›è¡Œ¾~©æ”¾å˜æ¢åQŒå†˜q›è¡Œòq³ç§»å˜æ¢çš„æ–¹½E‹å˜æ¢ï¼š
æ ÒŽ®æŽ¨å¯¼å¯çŸ¥éœ€å…ˆè¿›è¡?å€çš„¾~©æ”¾å˜æ¢åQŒå†òq³ç§»åQ?0åQ?00åQ‰ä¸ªåæ ‡ž®±å¯ä»¥å®žçŽ°æŒ‡å®šçš„å˜æ¢æ•ˆæžœã€‚实现程åºå¦‚ä¸?/P>
//<g transform=" scale(3 ) translate(50åQ?00)"> AffineTransform rat = svgCanvas.getRenderingTransform(); rat.scale(3,3); rat.translate(50,100); svgCanvas.setRenderingTransform(rat);
若先˜q›è¡Œòq³ç§»å˜æ¢åQŒå†˜q›è¡Œ¾~©æ”¾å˜æ¢çš„è¯åQŒæ ¹æ®ç¬¬äºŒä¸ªä¾‹å的推导结果:
å¯çŸ¥åº”å…ˆ˜q›è¡ŒåQ?50åQ?00åQ‰çš„òq³ç§»æ“作åQŒå†å®žçް3å€çš„¾~©æ”¾æ“作。实现程åºå¦‚下:
//<g transform=" translate(150åQ?00) scale(3 )"> AffineTransform rat = svgCanvas.getRenderingTransform(); rat.translate(150,300); rat.scale(3,3); svgCanvas.setRenderingTransform(rat);
4. 一个常用å¤åˆå˜æ¢å®žä¾‹çš„实现--å®šç‚¹å˜æ¢
上边我们分æžäº?Batik 实现 SVG 囑ÖÅžå˜æ¢çš„原ç†å’Œè®¡ç®—æ–ÒŽ³•ã€‚ä¸‹é¢æˆ‘们用分æžçš„结果实çŽîC¸€ä¸ªå¸¸ç”¨çš„å˜æ¢å®žä¾‹åQšå®šç‚¹å˜æ¢ã€‚å˜æ¢çš„¿U类包括¾~©æ”¾åQŒæ—‹è½¬ï¼ˆä¸€èˆ¬ä¸è€ƒè™‘定点òq³ç§»˜q™ä¸ªæ¦‚念åQ‰ã€?/P>æ‰€è°“å®šç‚¹å˜æ¢å°±æ˜¯åœ¨å›‘ÖÅžå˜æ¢ä¸æŒ‡å®šä¸€ä¸ªå›ºå®šçš„ç‚¹ï¼Œåœ¨å˜æ¢ç»“æŸåŽåQŒè¯¥ç‚¹çš„ä½ç½®ä¸å‘生å˜åŒ–ã€‚å®šç‚¹å˜æ¢åœ¨ GIS 的实际è¿ç”¨ä¸å¾ˆå¸¸è§ï¼Œæ¯”如ž®†åœ°å›¾æ”¾å¤§åˆ°æŒ‡å®šå€æ•°è€Œä¿æŒåœ°å›„¡š„æŸä¸ªä½ç½®åQˆå¦‚åQšé¼ æ ‡ç‚¹å‡Èš„ä½ç½®åQ‰ä¸å‘生å˜åŒ–。我们以定点¾~©æ”¾ä¸ÞZ¾‹æè¿°å®šç‚¹å˜æ¢çš„ä‹É用方法ã€?/P>
å‡è®¾æˆ‘们ç”?x1,y1)ç‚ÒŽ¥åšå®šç‚¹å˜æ¢çš„åŸºå‡†ç‚¹è¿›è¡Œå‡ ä½•å˜æ¢ï¼Œè¦æ±‚å®žçŽ°å˜æ¢åŽï¼ˆx1,y1åQ‰çš„ä½ç½®ä¸å˜ã€?/P>
å®šç‚¹å˜æ¢çš„åŸºæœ¬æ€æƒ³æ˜¯åŸºäºŽè¿™æ ·ä¸€ä¸ªç‰¹æ€§ï¼šå½“图åƒè¿›è¡Œç¾ƒæ”¾ï¼Œæˆ–æ—‹è½¬å˜æ¢çš„æ—¶å€™ï¼Œåæ ‡åŽŸç‚¹çš„ä½¾|®åƈä¸å‘生å˜åŒ–ã€‚å®šç‚¹å˜æ¢çš„实现æ–ÒŽ³•ž®±æ˜¯åQŒå…ˆž®†åŸºå‡†ç‚¹åQˆx1,y1åQ‰åã^¿UÕdˆ°åŽŸç‚¹å›_šä¸€‹Æ¡[-x1,-y1]å˜æ¢åQŒè¿›è¡Œå˜æ¢åŽå†å°†å˜æ¢åŽçš„原点òq³ç§»åˆŽÍ¼ˆx1,y1åQ‰å³å†è¿›è¡Œä¸€‹Æ¡[x1,y1]å˜æ¢ã€?/P>
å›?25. åŸÞZºŽåQˆx1,y1åQ‰å®šç‚¹å˜æ?/B>
![]()
实际¾~–ç¨‹çš„æ—¶å€™ï¼Œæˆ‘ä»¬æ— éœ€å¯¹å®šç‚¹å˜æ¢åšå¦‚æ¤å¤æ‚çš„è¿½Ž—ã€‚ä¾‹å¦‚å¯ä»¥é‡‡ç”¨å¦‚下的方å¼å®žçŽ°é’ˆå¯¹åQ?0,50åQ‰çš„å®šç‚¹å˜æ¢åQ?/P>
//以(50åQ?0åQ‰ç‚¹ä¸ºåŸºå‡†ç‚¹˜q›è¡Œå‡ ä½•å˜æ¢ //<g transform="translate(50åQ?0) …………â€?translate(-50åQ?50)"> AffineTransform rat = svgCanvas.getRenderingTransform(); rat.translate(50åQ?0); //å…¶ä»–å˜æ¢æ–¹å¼ ……………â€? ……………â€? ……………â€? rat.translate(-50,-50); svgCanvas.setRenderingTransform(rat);
- 有关 SVG 的背景知识,请阅è¯?developerWorks 上的教程åQ? å¯äŽ×¾~©å‘é‡å›¾å½¢ä»‹¾l?/A>"
- Scalable Vector Graphics (SVG) 1.0 Specification
- Batik™å¹ç›®ä»‹ç» http://xml.apache.org/batik/
Pudgy's World 2005-08-20 08:55 å‘表评论]]>