JavaFX和SVG：绘制一条线 [英] JavaFX and SVG : drawing a line

问题描述

我正在使用JavaFX来渲染一些SVG的东西。我定义了很多方法，返回不同SVG形状的路径（省略号，圆形，矩形，线条等）。除线法外，所有这些似乎都有效。 JavaFX不会返回错误（意味着路径可能正确），但它不会绘制任何内容。这是我的方法。

  public static SVGPath line（float startX，float endX，float startY，float endY，PositionType positionType）
 {
 SVGPath path = new SVGPath（）; 
 path.setContent（positionType.getMoveto（）+ startX +，+ startY + positionType.getLineto（l）+ endX +，+ endY）; 
 
返回路径; 
} 
  

方法 getMoveto（）返回 M 或 m ，具体取决于 PositionType 和 getLineto（）返回 L 或 l 。

以下是一个示例方法调用：

  SVGPath test2 = SVGPrimitives .line（20f，30.1f，23f，89.21f，PositionType.ABSOLUTE）; 
  

以下是返回的路径：

  M20.0,23.0 L 30.1,89.21 
  

It对我来说似乎有效，但没有画出来......

解决方案

一个

  root.getChildren（）。addAll（line（32），line（48），line（64））; 
 ... 
私有SVGPath行（int size）{
 SVGPath path = new SVGPath（）; 
 path.setStroke（Color.BLUE）; 
 path.setContent（M0,0L+ size +，+ size +z）; 
返回路径; 
} 
  

这同样适用于显示的更复杂的路径

  import java.util.function.IntFunction; 
 import javafx.application.Application; 
 import javafx.geometry.Insets; 
 import javafx.geometry.Pos; 
 import javafx.scene.Scene; 
 import javafx.scene.layout.HBox; 
 import javafx.scene.layout.VBox; 
 import javafx.scene.paint.Color; 
 import javafx.scene.shape.SVGPath; 
 import javafx.stage.Stage; 
 
 / ** 
 * @see http://www.w3.org/TR/SVG/paths.html 
 * @see http://raphaeljs.com/ icons / 
 * / 
公共类SVGIcons扩展Application {
 
 private static final int SIZE = 16; 
 
 @Override 
 public void start（阶段阶段）{
 VBox root = new VBox（10）; 
 root.setAlignment（Pos.CENTER）; 
 root.setPadding（new Insets（10））; 
 root.getChildren（）。add（createRow（this :: lines））; 
 root.getChildren（）。add（createRow（this :: curve））; 
 root.getChildren（）。add（createRow（this :: arc））; 
场景场景=新场景（根）; 
 stage.setTitle（SVGIcons）; 
 stage.setScene（场景）; 
 stage.show（）; 
} 
 
私有HBox createRow（IntFunction< SVGPath>路径）{
 HBox row = new HBox（10）; 
 row.setAlignment（Pos.CENTER）; 
 for（int i = 2; i< 6; i ++）{
 row.getChildren（）。add（path.apply（i * SIZE））; 
} 
返回行; 
} 
 
私有SVGPath行（int size）{
 SVGPath path = new SVGPath（）; 
 path.setFill（Color.ALICEBLUE）; 
 path.setStroke（Color.BLUE）; 
 path.setContent（M0，+ size +L+ size / 2 +，0
 + size +，+ size ++ size / 2 +， + 2 * size / 3 +z）; 
返回路径; 
} 
 
私有SVGPath曲线（int size）{
 SVGPath path = new SVGPath（）; 
 path.setFill（Color.HONEYDEW）; 
 path.setStroke（Color.GREEN）; 
 path.setContent（M0,0Q+ size +，0，
 + size +，+ size +L0，+ size +z）; 
返回路径; 
} 
 
 private SVGPath arc（int size）{
 SVGPath path = new SVGPath（）; 
 path.setFill（Color.MISTYROSE）; 
 path.setStroke（Color.RED）; 
 path.setContent（M0,0A+ size / 2 +，+ size 
 +，0,1,0，+ size +，0z）; 
返回路径; 
} 
 
 public static void main（String [] args）{
 launch（args）; 
} 
} 
  

I am using JavaFX to render some SVG stuff. I defined many methods, returning the paths of different SVG shapes (ellipsis, circle, rectangle, lines, etc). All of them seem to work, except the line method. JavaFX doesn't return an error (meaning that the path is probably correct), yet it doesn't draw anything. Here is my method.

public static SVGPath line(float startX, float endX, float startY, float endY, PositionType positionType)
{
    SVGPath path = new SVGPath();
    path.setContent(positionType.getMoveto()+startX+","+startY+positionType.getLineto("l")+endX+","+endY);    

    return path;    
}

The method getMoveto() returns either M or m, depending on the PositionType, and getLineto() returns either L or l.

Here is a sample method call :

SVGPath test2 = SVGPrimitives.line(20f, 30.1f, 23f, 89.21f, PositionType.ABSOLUTE);

And here is the path that's returned :

M20.0,23.0 L 30.1,89.21

It does seem valid to me, yet nothing is drawn...

解决方案

An SVGPath containing a single line encloses no area, so no pixels will be rendered. To see the effect, you can use setStroke() on the path, which "Defines parameters of a stroke that is drawn around the outline of a Shape."

root.getChildren().addAll(line(32), line(48), line(64));
…
private SVGPath line(int size) {
    SVGPath path = new SVGPath();
    path.setStroke(Color.BLUE);
    path.setContent("M0,0L" + size + "," + size + "z");
    return path;
}

The same applies to more complex paths shown here. In the example below, note the following

• A path can be scaled as a function of the size; a slightly different effect can be achieved by altering the scale of the enclosing Pane, as shown here.

• As an aid in composition, Java 8 makes it easier to pass a function as a parameter, as suggested here.

• More complex paths can be constructed using an available SVG editor.

Finally, "Consider a builder when faced with many constructor parameters."

import java.util.function.IntFunction;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.SVGPath;
import javafx.stage.Stage;

/**
 * @see http://www.w3.org/TR/SVG/paths.html
 * @see http://raphaeljs.com/icons/
 */
public class SVGIcons extends Application {

    private static final int SIZE = 16;

    @Override
    public void start(Stage stage) {
        VBox root = new VBox(10);
        root.setAlignment(Pos.CENTER);
        root.setPadding(new Insets(10));
        root.getChildren().add(createRow(this::lines));
        root.getChildren().add(createRow(this::curve));
        root.getChildren().add(createRow(this::arc));
        Scene scene = new Scene(root);
        stage.setTitle("SVGIcons");
        stage.setScene(scene);
        stage.show();
    }

    private HBox createRow(IntFunction<SVGPath> path) {
        HBox row = new HBox(10);
        row.setAlignment(Pos.CENTER);
        for (int i = 2; i < 6; i++) {
            row.getChildren().add(path.apply(i * SIZE));
        }
        return row;
    }

    private SVGPath lines(int size) {
        SVGPath path = new SVGPath();
        path.setFill(Color.ALICEBLUE);
        path.setStroke(Color.BLUE);
        path.setContent("M0," + size + "L" + size / 2 + ",0 "
            + size + "," + size + " " + size / 2 + "," + 2 * size / 3 + "z");
        return path;
    }

    private SVGPath curve(int size) {
        SVGPath path = new SVGPath();
        path.setFill(Color.HONEYDEW);
        path.setStroke(Color.GREEN);
        path.setContent("M0,0Q" + size + ",0,"
            + size + "," + size + "L0," + size + "z");
        return path;
    }

    private SVGPath arc(int size) {
        SVGPath path = new SVGPath();
        path.setFill(Color.MISTYROSE);
        path.setStroke(Color.RED);
        path.setContent("M0,0A" + size / 2 + "," + size
            + ",0,1,0," + size + ",0z");
        return path;
    }

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

这篇关于JavaFX和SVG：绘制一条线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！