Graphics畫布

Graphics 應該算是AWT時代的產物, 但是基本的思想很值得學習.
學習 Graphics 可以分為作為以下幾種用途

• 用 Graphics 來修改默認的UI組件樣式, 那么你可以輕松實現圓形按鈕,橢圓按鈕 ,徽章 等等h5中常見的UI風格
• 用Graphics來實現圖表, 如果h5沒有echarts threejs 你也需要去學習2D 或3D的畫圖, 但是swing可能也有一些框架jfreechart JGraphT等,所以重點學習的應該是畫布的思維方式
• Graphics在游戲中可能更偏重一些,比如你想開發一個五子棋游戲. 當然如果用PS進行切圖 也可以實現底圖的繪制, 只是性能和UI 你更喜歡哪種的問題

Graphics可以與h5的canvas來作為對比去理解.

使用 Graphics繪制常見的圖形

PS

記住畫圖最重要的一些元素,

• 坐標系與 原點
• 點的 x軸坐標 y軸坐標, 點與點之間可以形成的一些 隱藏知識正弦 余弦 正切 余切 ,
• 面與面之間的交集 差集 補集 全集
• 線的長度 位置 角度 等等

代碼

import cn.hutool.core.lang.Console; import cn.hutool.core.util.NumberUtil; import cn.hutool.core.util.RandomUtil; import cn.hutool.json.JSONUtil; import com.formdev.flatlaf.FlatLightLaf; import com.mynote.core.ui.ColorBuilder; import com.mynote.core.util.FrameUtil; import com.mynote.example.demo.AbstractDefaultPanel; import lombok.Getter; import lombok.Setter; import net.miginfocom.swing.MigLayout;import javax.swing.*; import java.awt.*;/*** @description: Graphics測試* @author: jee*/ public class GraphicsTest extends AbstractDefaultPanel {@Overrideprotected void init() {}@Overrideprotected void render() {view.setLayout(new MigLayout("wrap 1"));JTabbedPane layouts = new JTabbedPane(JTabbedPane.LEFT);layouts.addTab("直線", new GraphicsLine());layouts.addTab("折線", new GraphicsPolyline());layouts.addTab("矩形", new GraphicsRect());layouts.addTab("圓形", new GraphicsCircle());layouts.addTab("多邊形", new GraphicsCustom());layouts.setSelectedIndex(layouts.getTabCount() - 1);view.add(layouts, "w 800,center");super.add(view, "w 100%,h 100%");}@Overrideprotected void bindEvents() {}/*** 標題panel*/private class DocPanel extends JPanel {public DocPanel(String title) {super();this.setBorder(BorderFactory.createTitledBorder(title));}}/*** 創建隨機一組點*/private int[] createRandomPoints(int start, int repeat, int offset, boolean isNegative) {int index = 0;int[] randomOffsets = {-2, -1, 1, 2};int randomOffset = 1;int[] points = new int[repeat];while (index < repeat) {if (isNegative) {randomOffset = randomOffsets[RandomUtil.randomInt(randomOffsets.length)];} else {randomOffset += 1;}points[index] = start + offset * randomOffset;index++;}return points;}/*** 線*/private class GraphicsLine extends JPanel {public GraphicsLine() {super.setLayout(new MigLayout("wrap 1"));super.add(createLine("直線", 50, 50, 200, 50), "w 100%,h 120");super.add(createLine("斜線1", 50, 100, 100, 50), "w 100%,h 120");super.add(createLine("斜線2", 50, 50, 100, 100), "w 100%,h 120");}private DocPanel createLine(String title, int x1, int y1, int x2, int y2) {return new DocPanel(title) {@Overridepublic void paint(Graphics g) {super.paint(g);Graphics2D g2 = (Graphics2D) g;g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);g2.setColor(ColorBuilder.BG_BLANK_COLOR1);g2.drawLine(x1, y1, x2, y2);g2.dispose();}};}}/*** 折線*/private class GraphicsPolyline extends JPanel {public GraphicsPolyline() {super.setLayout(new MigLayout("wrap 1"));createPolyline("折線1", 10);createPolyline("折線2", 30);}public void createPolyline(String title, int count) {int[] xPoints = createRandomPoints(50, count, 20, false);int[] yPoints = createRandomPoints(50, count, 10, true);super.add(createPolyline(title, xPoints, yPoints, count), "w 100%,h 200");}private DocPanel createPolyline(String title, int[] xPoints, int[] yPoints, int nPoints) {return new DocPanel(title) {@Overridepublic void paint(Graphics g) {super.paint(g);Graphics2D g2 = (Graphics2D) g;g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);g2.setColor(ColorBuilder.BG_BLANK_COLOR1);g2.drawPolyline(xPoints, yPoints, nPoints);g2.dispose();}};}}/*** 矩形*/private class GraphicsRect extends JPanel {public GraphicsRect() {super.setLayout(new MigLayout("wrap 1"));super.add(createRect("空心矩形", 50, 50, 200, 50, false), "w 100%,h 120");super.add(createRect("填充矩形", 50, 50, 200, 50, true), "w 100%,h 120");super.add(createRoundRect("圓角矩形", 50, 50, 200, 50, 10), "w 100%,h 120");}private DocPanel createRect(String title, int x, int y, int width, int height, boolean isFill) {return new DocPanel(title) {@Overridepublic void paint(Graphics g) {super.paint(g);Graphics2D g2 = (Graphics2D) g;g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);g2.setColor(ColorBuilder.BG_BLANK_COLOR1);g2.drawRect(x, y, width, height);if (isFill) {g2.setColor(ColorBuilder.BG_BLANK_COLOR1);g2.fillRect(x, y, width, height);}g2.dispose();}};}private DocPanel createRoundRect(String title, int x, int y, int width, int height, int r) {return new DocPanel(title) {@Overridepublic void paint(Graphics g) {super.paint(g);Graphics2D g2 = (Graphics2D) g;g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);g2.setColor(ColorBuilder.BG_BLANK_COLOR1);g2.drawRoundRect(x, y, width, height, r, r);// g2.fillRoundRect 填充顏色g2.dispose();}};}}/*** 圓形*/private class GraphicsCircle extends JPanel {public GraphicsCircle() {super.setLayout(new MigLayout("wrap 1"));super.add(createCircle("空心圓形", 50, 50, 100, false), "w 100%,h 200");super.add(createCircle("實心圓形", 50, 50, 100, true), "w 100%,h 200");super.add(createOval("橢圓", 50, 50, 100, 50, false), "w 100%,h 200");}private DocPanel createCircle(String title, int x, int y, int r, boolean isFill) {return createOval(title, x, y, r, r, isFill);}private DocPanel createOval(String title, int x, int y, int width, int height, boolean isFill) {return new DocPanel(title) {@Overridepublic void paint(Graphics g) {super.paint(g);Graphics2D g2 = (Graphics2D) g;g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);g2.setColor(ColorBuilder.BG_BLANK_COLOR1);g2.drawOval(x, y, width, height);if (isFill) {g2.setColor(ColorBuilder.BG_BLANK_COLOR1);g2.fillOval(x, y, width, height);}g2.dispose();}};}}@Setter@Getterprivate class GraPoint {int x;int y;public GraPoint(int x, int y) {this.x = x;this.y = y;}}/*** 自定義*/private class GraphicsCustom extends JPanel {public GraphicsCustom() {super.setLayout(new MigLayout("wrap 2"));super.add(createSimpleTriangle(), "w 50%,h 150");super.add(createQuadrilateral("平行四邊形", false), "w 50%,h 150");super.add(createQuadrilateral("直角梯形", true), "w 50%,h 150");int[] xPoints = {25, 50, 100, 125, 100, 50, 25};int[] yPoints = {75, 50, 50, 75, 100, 100, 75};super.add(createPolygon("六邊形", xPoints, yPoints, xPoints.length), "w 50%,h 150");super.add(createSector("70°扇形", 50, 30, 100), "w 50%,h 150");super.add(createSector("120°扇形", 60, 30, 150), "w 50%,h 150");}private DocPanel createSimpleTriangle() {GraPoint p1 = new GraPoint(50, 50);GraPoint p2 = new GraPoint(200, 50);GraPoint p3 = new GraPoint(150, 100);return createPolygon("三角形", p1, p2, p3, p1);}private DocPanel createQuadrilateral(String title, boolean isTrapezoidal) {int x = 50;int y = 50;int l = 100;int nx = 40;int ny = 100;GraPoint p1 = new GraPoint(x, y);GraPoint p2 = new GraPoint(nx, ny);GraPoint p3 = new GraPoint(nx + l, ny);GraPoint p4 = new GraPoint(x + l, y);if (isTrapezoidal) {p4 = new GraPoint(nx + l, y);}return createPolygon(title, p1, p2, p3, p4, p1);}private DocPanel createParallelogram() {int x = 50;int y = 50;int l = 100;int nx = 40;int ny = 100;GraPoint p1 = new GraPoint(x, y);GraPoint p2 = new GraPoint(nx, ny);GraPoint p3 = new GraPoint(nx + l, ny);GraPoint p4 = new GraPoint(x + l, y);return createPolygon("平行四邊形", p1, p2, p3, p4, p1);}private DocPanel createPolygon(String title, GraPoint... points) {int n = points.length;int[] xPoints = new int[n];int[] yPoints = new int[n];for (GraPoint p : points) {n--;xPoints[n] = p.getX();yPoints[n] = p.getY();}return createPolygon(title, xPoints, yPoints, points.length);}/*** 多邊形** @return*/private DocPanel createPolygon(String title, int[] xPoints, int[] yPoints, int nPoints) {return new DocPanel(title) {@Overridepublic void paint(Graphics g) {super.paint(g);Graphics2D g2 = (Graphics2D) g;g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);g2.setColor(ColorBuilder.BG_BLANK_COLOR1);g2.drawPolygon(xPoints, yPoints, nPoints);g2.dispose();}};}/*** 扇形** @return*/private DocPanel createSector(String title, int r, int startAngle, int endAngle) {return new DocPanel(title) {@Overridepublic void paint(Graphics g) {super.paint(g);Graphics2D g2 = (Graphics2D) g;g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);// 原點int startX = 50;int startY = 50;// 弧度int arcAngle = endAngle - startAngle;// 中心點int centerX = startX + r;int centerY = startY + r;g2.setColor(Color.RED);// 標注起始點g2.drawLine(startX - 1, startY - 1, startX + 1, startY + 1);g2.setColor(ColorBuilder.BG_BLANK_COLOR1);g2.drawArc(startX, startY, r * 2, r * 2, startAngle, arcAngle);// ps: 逆時針畫的// 計算扇形弧線起點int x2 = centerX + NumberUtil.parseInt(Math.ceil(r * Math.cos(Math.toRadians(startAngle))) + "");int y2 = centerY - NumberUtil.parseInt(Math.ceil(r * Math.sin(Math.toRadians(startAngle))) + "");// 計算扇形弧線終點int x1 = centerX - NumberUtil.parseInt(Math.ceil(r * Math.cos(Math.toRadians(180 - endAngle))) + "");int y1 = centerY - NumberUtil.parseInt(Math.ceil(r * Math.sin(Math.toRadians(180 - endAngle))) + "");Console.log("start x,y:{},{} === end x,y:{},{}", x1, y1, x2, y2);g2.setColor(ColorBuilder.BG_BLANK_COLOR1);g2.drawLine(x1, y1, centerX, centerY);g2.setColor(ColorBuilder.BG_BLANK_COLOR1);g2.drawLine(centerX, centerY, x2, y2);g2.dispose();}};}}public static void main(String[] args) {FlatLightLaf.install();FrameUtil.launchTest(new GraphicsTest());}}

總結

以上是生活随笔為你收集整理的swing-基础Graphics画布的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。