GWTCanvas－GWT封装javascript实现绘图

GWT官方和其他一些开源的项目都有提供绘图的功能，只要添加相关的jar包就可以了。我自己因为需要一些灵活的功能，只好自己去封装相关javascript来实现一些特殊的需求了。

这里我们先从附件下载别人写好的绘图javascript库。然后在我们的主html页面中添加引用

<script type="text/javascript" language="javascript" src="wz_jsgraphics.js"></script>

 

下面我们就可以对其用GWT进行封装了，核心是利用GWT的JSNI来实现java和js的通信。大家可以注意下，下面几乎每一个native方法都对应了一个java方法。这样我们就实现了GWTCanvas，可以用他来绘图了。

 

 

package com.yingxia.tonglin.client.commoncontrol;

public class GWTCanvas {

	private Object jsGraphics;
	
	public GWTCanvas(String panelId) {
		this.jsGraphics = this.createJsGraphics(panelId);
	}
	
	public void setStroke(int width) {
		setStroke(jsGraphics, width);
	}
	
	public void setColor(String color) {
		setColor(jsGraphics, color);
	}
	
	public void setFont(String fontFamily, String fontSize, String fontStyle) {
		setFont(jsGraphics, fontFamily, fontSize, fontStyle);
	}
	
	public void drawLine(int x1, int y1, int x2, int y2) {
		drawLine(jsGraphics, x1, y1, x2, y2);
	}
	
	public void drawEllipse(int x, int y, int width, int height) {
		drawEllipse(jsGraphics, x, y, width, height);
	}
	
	public void fillArc(int x, int y, int width, int height, int startAngle, int endAngle) {
		fillArc(jsGraphics, x, y, width, height, startAngle, endAngle);
	}
	
	public void drawString(String text, int x, int y) {
		drawString(jsGraphics, text, x, y);
	}
	
	public void paint() {
		paint(jsGraphics);
	}
	
	public void clear() {
		clear(jsGraphics);
	}
	
	private native void drawLine(Object jsGraphics, int x1, int y1, int x2, int y2) /*-{
		jsGraphics.drawLine(x1, y1, x2, y2);
	}-*/;
	
	private native void drawEllipse(Object jsGraphics, int x, int y, int width, int height) /*-{
		jsGraphics.drawEllipse(x, y, width, height);
	}-*/;
	
	private native void fillArc(Object jsGraphics, int x, int y, int width, int height, int startAngle, int endAngle) /*-{
		jsGraphics.fillArc(x, y, width, height, startAngle, endAngle);
	}-*/;
	
	private native void drawString(Object jsGraphics, String text, int x, int y) /*-{
		jsGraphics.drawString(text, x, y);
	}-*/;
	
	private native void paint(Object jsGraphics) /*-{
		jsGraphics.paint();
	}-*/;
	
	private native void clear(Object jsGraphics) /*-{
		jsGraphics.clear();
	}-*/;
	
	private native void setStroke(Object jsGraphics, int width) /*-{
		jsGraphics.setStroke(width);
	}-*/;
	
	private native void setColor(Object jsGraphics, String color) /*-{
		jsGraphics.setColor(color);
	}-*/;
	
	private native void setFont(Object jsGraphics, String fontFamily, String fontSize, String fontStyle) /*-{
		jsGraphics.setFont(fontFamily, fontSize, fontStyle);
	}-*/;
	
	private native Object createJsGraphics(String panelId) /*-{
		return new $wnd.jsGraphics(panelId);
	}-*/;
}

 

这里是我写程序，读取一个List集合，循环生成的一条链路图