이 기사에 제공된 예제 실행을 시작하려면 JDK 1.2 이상( http://java.sun.com )이 필요합니다. JSP를 지원하는 웹 서버도 필요합니다. 나는 그래픽 데이터를 인코딩하기 위해 com.sun.image.codec.jpeg 클래스(Sun Java 2 SDK에서 릴리스됨)를 사용하는 Tomcat에서 이 예제를 테스트했습니다.
재사용 가능한 배경을 원하므로 제목 영역과 외부 테두리를 포함한 레이아웃을 관리하는 Java 클래스를 생성해야 합니다. 그림 A 와 같습니다.
그림 A
보시다시피 제목 영역과 외부 테두리 모두에 그림자를 적용했습니다. 제목에는 흰색의 1픽셀 너비 테두리가 있고 그래픽 영역에는 얇은 검정색 테두리가 있습니다. 이 테두리는 그림자에 정의를 추가합니다.
경계는 쉽게 만들 수 있습니다. Graphics2D 객체의 Fill() 메서드를 사용하여 파란색 제목 사각형을 채운 다음 draw() 메서드를 사용하여 다른 색상으로 테두리를 그립니다.
그림자 효과를 만드는 것도 매우 간단합니다. 먼저 fill() 메서드를 사용하여 그림자를 그립니다. 그런 다음 7픽셀의 오프셋에 제목을 그립니다. 이 오프셋은 3차원 효과를 만들어 그림자 효과를 발생시킵니다.
농산물을 판매하는 회사가 있고 매출을 표시하기 위해 히스토그램이 필요하다고 가정해 보겠습니다. 실제 애플리케이션에서는 데이터베이스나 XML 파일에서 이 데이터를 가져와야 하지만 단순화를 위해 판매 데이터가 다음 두 배열에 저장되어 있다고 가정해 보겠습니다.
String datanames[] = {"사과", "오렌지", "복숭아", "레몬", "자몽"};
int datavalues[] = {11, 62, 33, 102, 50};
첫 번째 배열에는 회사에서 판매하는 다양한 농산물에 대한 항목이 포함됩니다. 두 번째 배열은 각 농산물에 해당하는 판매량이다.
히스토그램은 JPEG 형식으로 표시 및 저장되므로 콘텐츠 유형인 MIME을 올바르게 설정해야 합니다. 브라우저는 MIME 유형을 사용하여 반응 방법을 결정합니다. 다음 코드는 MIME 유형을 설정합니다.
response.setContentType("image/jpeg");
다음으로 이미지를 나타내는 객체가 필요합니다. Java 2D API는 픽셀 데이터를 메모리에 저장하고 관리하는 방법을 제공하는 BufferedImage 클래스를 지원합니다. 우리는 그래픽을 컬러로 표현하기를 원하므로 TYPE_INT_RGB 그래픽 유형을 사용합니다. 두 개의 정수 데이터 WIDTH 및 HEIGHT 는 이미지의 너비와 높이를 픽셀 단위로 지정하는 데 사용됩니다.
BufferedImage bi = new BufferedImage(WIDTH, HEIGHT, BufferedImage.TYPE_INT_RGB);
이제 BufferedImage 객체가 있으므로 객체의 createGraphics() 메서드를 호출하여 Graphics2D 의 내용을 설정할 수 있습니다.
Graphics2D biContext = bi.createGraphics();
그래프를 만든 프로그래머는 그래프의 중요도와 페이지의 전체 레이아웃을 기반으로 WIDTH 매개변수를 설정해야 합니다. 그래픽 요소는 그래픽 너비의 변화에 따라 자동으로 크기가 조정됩니다.
제목의 너비와 경계 영역은 물론 그래픽의 가장 긴 직선 정사각형도 WIDTH 매개변수를 기준으로 계산해야 합니다. 이것의 목적은 모든 그래픽 요소가 그래픽 너비를 초과하지 않고 그래픽의 오른쪽 테두리를 넘지 않도록 하는 것입니다.
표시해야 하는 데이터 항목의 수에 따라 그래프의 HEIGHT 매개변수가 결정됩니다. datavalues[] 및 datanames[] 배열에 새 요소가 추가되면 필요한 표시 영역 크기를 수용할 수 있도록 그래픽 높이가 그에 따라 커져야 합니다.
최대 매개변수는 가장 긴 직선 사각형에 사용됩니다. 그런 다음 다른 직사각형 블록의 너비는 최대값을 기준으로 계산됩니다.
int barWidth = (innerWIDTH * currentValue) / 최대값;
위 알고리즘은 그래픽의 최대 값과 innerWIDTH (그래픽 영역)의 두 값을 사용하여 WIDTH 값이 변경됨에 따라 사각형이 자동으로 확장 및 축소되도록 합니다.
그래픽을 표시하려면 배경 이미지를 만든 후 그래픽 데이터를 추가해야 합니다. 먼저 graphBG 객체를 생성하고 draw() 메서드를 호출합니다.
graphBG gr = 새로운 graphBG();
gr.draw(biContext, WIDTH, HEIGHT, "농산물", "전체 평균: " + 평균);
draw() 메서드의 매개변수에는 그래픽 콘텐츠, biContext , WIDTH 및 HEIGHT가 포함되며, graphBG 클래스는 제목과 그래픽 영역의 너비와 높이를 결정하는 데 사용합니다. 마지막으로 평균 데이터 값이 계산되어 제목에 표시되는 텍스트에 추가됩니다.
각 직사각형 블록의 수직 좌표(y축) 위치는 다음 공식에 따라 계산됩니다: y_pos = i * displayHeight + headerOffset . displayHeight는 직선 정사각형의 텍스트 높이에 직선 정사각형의 높이를 더한 값과 같으며, headerOffset은 제목 영역과 그림자의 높이를 포함하여 그래픽 상단으로부터의 수직 거리를 나타냅니다.
이전에 제목 테두리를 만들 때 사용한 것과 동일한 기술을 사용하여 이러한 직사각형과 테두리를 만들었습니다. 직사각형 테두리의 너비와 높이에서 1픽셀을 빼서 각 직사각형에 빨간색 테두리가 표시되도록 하고, 흰색 배경에 안쪽 테두리를 그려서 빼기 효과를 쉽게 만들었습니다.
메모리에 이미지를 생성했으며 이제 이를 인코딩하여 사용자에게 표시합니다. 기본 JSP 출력 스트림을 사용하여 JPEG를 처리할 수 없으므로 response.getOutputStream()을 사용하여 응답 객체에서 스트림을 가져와야 합니다. 출력 스트림을 사용하여 JPEGImageEncoder 객체를 생성하고 encode()를 호출하여 이전에 생성한 BufferedImage 객체를 전달할 수 있습니다.
JPEGImageEncoder 인코더 = JPEGCodec.createJPEGEncoder(출력);
인코더.인코드(bi);
결과 이미지는 상대적으로 작으며 용량이 13.7KB에 불과합니다. 그림 B는 최종 효과를 나타냅니다.
그림 B
두 경우 모두 index.jsp 의 출력은 JPEG 이미지입니다. 바탕 화면에 저장하거나 PrintScreen 키를 눌러 스크린샷을 찍을 수 있습니다. 동일한 페이지에 여러 그래픽을 표시해야 하거나 다른 콘텐츠에 그래픽을 도입해야 하는 경우 HTML img 태그(< img src = "index.jsp"> )를 사용한 다음 필요할 때 그래픽을 배치할 수 있습니다. 형태.
아마도 동적으로 생성된 그래픽을 위한 가장 오래된 인터넷 기술 중 하나는 이미지 표시 이외 의 작업을 수행할 수 있을 것입니다. 이 이미지의 시청자 수를 기록해야 한다고 상상해 보십시오(광고 클릭 수를 기록하는 것과 유사). 그런 다음 index.jsp 에서 클릭 수 계산, 데이터베이스 또는 파일 액세스와 같은 작업을 구현해야 하며 처리할 수 있습니다. 이러한 작업은 사용자에게 버퍼링된 페이지 전환을 사용할 필요가 없습니다.
본 논문에서는 깔끔하고 보기 좋게 보이는 히스토그램을 생성하는 방법을 조사했습니다. 우리는 그래픽의 크기를 변경하고 이를 JPEG 형식으로 인코딩하는 작업을 능숙하게 처리했으며 결과 이미지를 페이지의 다른 위치에 배치하도록 HTML 코드를 수정하는 방법에 대해 논의했습니다.