JavaFX中使用SVGPath实现自定义Echart图表-基础篇_java代码通过svg画图-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_34912208/article/details/145645970

在JavaFX中，SVGPath是一个强大的工具，它允许开发者通过解析SVG（Scalable Vector Graphics）路径数据来构造形状。本文将详细介绍SVGPath的定义、作用、功能、常用用法、命令和参数，并提供具体的示例，旨在为开发自定义类似于Apache Echarts图表（如柱状图、折线图、饼图）打下坚实的基础。后续将此文章链接到开发自定义图表的总篇章里面。

先贴一张正在开发的图表，目标是使用JavaFX实现自定义echarts图表，实现自定义效果。为了解决如JavaFX中原生的BarChart的图形无法显示具体的数值，使用自定义方式可以实现。![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/804e7af70eaf4cbf8cc747c48f05446f.png

在这里插入图片描述

一、定义与作用

SVGPath类扩展了JavaFX中的Shape类，表示通过解析来自字符串的SVG路径数据构造的简单形状。SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标记语言，能够用来表示各种图形，包括线条、多边形、曲线和文本等。SVGPath的主要作用是在JavaFX应用程序中嵌入和操作这些矢量图形。

二、功能概述

SVGPath提供了以下核心功能：

路径解析：能够解析标准的SVG路径字符串，将其转换为JavaFX中的形状。
形状构造：通过路径数据构造出复杂的形状，如曲线、多边形、折线等。
变换操作：支持缩放、位移、旋转等几何变换，使得路径的变换更加灵活。

三、常用用法

1. 创建SVGPath对象

首先，创建一个SVGPath对象，并设置其路径数据。路径数据是通过setContent方法设置的，它是一个SVG路径编码字符串，遵循W3C的SVG路径语法。

import javafx.scene.shape.SVGPath;

SVGPath svgPath = new SVGPath();
svgPath.setContent("M10 10 H 90 V 90 H 10 Z"); // 绘制一个矩形

2. 常用设置

SVGPath还提供了setFillRule方法来设置填充规则，确定路径内部的填充方式。填充规则可以是FillRule.EVEN_ODD或FillRule.NON_ZERO。

svgPath.setFillRule(FillRule.NON_ZERO); // 填充规则
svgPath.setStroke(Color.RED); // 设置线条颜色
svgPath.setStrokeWidth(2); // 设置线条宽度
svgPath.setRotate(45); // 设置旋转角度
svgPath.setScaleX(2); // X轴方向放大或缩小倍数
svgPath.setScaleY(0.5); // Y轴方向放大或缩小倍数
// 鼠标进入和退出命令，这个功能可以实现鼠标进入svgPath区域（其它JavaFX元素均可）时显示图例、数值的效果
svgPath.setOnMouseEntered(event -> { // 鼠标进入命令
    System.out.println("鼠标移开");
});
svgPath.setOnMouseExited(event -> { 
    System.out.println("鼠标移开");
});
// 这是目前使用到的基本命令，待后续开发中再进行补充说明

四、命令与参数

SVG路径字符串由一系列命令和参数组成，每个命令都以一个大写或小写字母开头，后面跟着一个或多个参数。大写字母表示绝对坐标，小写字母表示相对坐标。

1. 移动命令（M/m）

M x y：将画笔移动到绝对坐标(x, y)。
m dx dy：将画笔相对移动到当前位置(dx, dy)。

2. 直线命令（L/l）

L x y：从当前点画一条直线到绝对坐标(x, y)。
l dx dy：从当前点画一条直线到相对坐标(dx, dy)。

3. 水平/垂直直线命令（H/h, V/v）

此命令可以实现绘制X轴及Y轴坐标系效果。

H x：画一条水平线到绝对坐标x。
h dx：画一条水平线到相对坐标dx。
V y：画一条垂直线到绝对坐标y。
v dy：画一条垂直线到相对坐标dy。

4. 三次贝塞尔曲线命令（C/c）

C x1 y1, x2 y2, x y：从当前点画一条三次贝塞尔曲线到(x, y)，控制点为(x1, y1)和(x2, y2)。
c dx1 dy1, dx2 dy2, dx dy：相对版本的三次贝塞尔曲线。

5. 二次贝塞尔曲线命令（Q/q）

Q x1 y1, x y：从当前点画一条二次贝塞尔曲线到(x, y)，控制点为(x1, y1)。
q dx1 dy1, dx dy：相对版本的二次贝塞尔曲线。

6. 平滑曲线命令（S/s）

S x1 y1, x y：从当前点画一条平滑的三次贝塞尔曲线到(x, y)，根据前一个控制点推测出新的控制点。
s dx1 dy1, dx dy：相对版本的平滑三次贝塞尔曲线。

7. 弧线命令（A/a）

A rx ry xRotation largeArcFlag sweepFlag x y：从当前点画一条椭圆弧到(x, y)，参数包括x轴半径rx、y轴半径ry、x轴旋转角度xRotation、大弧标志largeArcFlag、扫掠标志sweepFlag。
a drx dry xRotation largeArcFlag sweepFlag dx dy：相对版本的椭圆弧。

8. 关闭路径命令（Z/z）

Z：关闭路径，连接起点与终点。
z：相对版本的关闭路径（实际上与Z效果相同）。

五、示例

示例1：绘制矩形

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.SVGPath;
import javafx.stage.Stage;

public class RectangleExample extends Application {
    @Override
    public void start(Stage primaryStage) {
        SVGPath svgPath = new SVGPath();
        svgPath.setContent("M10 10 H 90 V 90 H 10 Z"); // 绘制矩形
        svgPath.setFill(Color.BLUE);

        Pane root = new Pane();
        root.getChildren().add(svgPath);

        Scene scene = new Scene(root, 200, 200);
        primaryStage.setTitle("Rectangle Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

效果图：
在这里插入图片描述

示例2：绘制三次贝塞尔曲线

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.SVGPath;
import javafx.stage.Stage;

public class BezierCurveExample extends Application {
    @Override
    public void start(Stage primaryStage) {
        SVGPath svgPath = new SVGPath();
        svgPath.setContent("M50 200 C150 100, 250 300, 350 200"); // 绘制三次贝塞尔曲线
        svgPath.setStroke(Color.BLACK);
        svgPath.setStrokeWidth(2);
        svgPath.setFill(Color.TRANSPARENT);

        Pane root = new Pane();
        root.getChildren().add(svgPath);

        Scene scene = new Scene(root, 400, 250);
        primaryStage.setTitle("Bezier Curve Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

效果图：
在这里插入图片描述

示例3：绘制椭圆弧

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.SVGPath;
import javafx.stage.Stage;

public class ArcExample extends Application {
    @Override
    public void start(Stage primaryStage) {
        SVGPath svgPath = new SVGPath();
        svgPath.setContent("M100 100 A50 50 0 1 0 150 100"); // 绘制椭圆弧
        svgPath.setStroke(Color.RED);
        svgPath.setStrokeWidth(2);
        svgPath.setFill(Color.TRANSPARENT);

        Pane root = new Pane();
        root.getChildren().add(svgPath);

        Scene scene = new Scene(root, 200, 200);
        primaryStage.setTitle("Arc Example");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}