Zeichnen Sie ein semi-ring - JavaFX

Ich würde gerne wissen, wie man zeichnen Sie einen Halbkreis in JavaFX. Ich habe versucht, Form und QuadCurve, aber ich konnte nicht machen Sie einen perfekten Halbkreis.

Hier ist ein Bild von dem, was ich bin versucht zu zeichnen :

InformationsquelleAutor AwaX | 2012-07-30

Dem Bild, das Sie verknüpft, ist eigentlich ein semi-ring. Sie können es in JavaFX von verschachtelten Zeichnung 2 Bögen und ein paar Zeilen. Aber meine bevorzugte Methode ist die Verwendung der Path.

public class SemiDemo extends Application {

    @Override
    public void start(Stage primaryStage) {

        Group root = new Group();
        root.getChildren().add(drawSemiRing(120, 120, 100, 50, Color.LIGHTGREEN, Color.DARKGREEN));
        root.getChildren().add(drawSemiRing(350, 350, 200, 30, Color.LIGHTSKYBLUE, Color.DARKBLUE));

        Scene scene = new Scene(root, 300, 250);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    private Path drawSemiRing(double centerX, double centerY, double radius, double innerRadius, Color bgColor, Color strkColor) {
        Path path = new Path();
        path.setFill(bgColor);
        path.setStroke(strkColor);
        path.setFillRule(FillRule.EVEN_ODD);

        MoveTo moveTo = new MoveTo();
        moveTo.setX(centerX + innerRadius);
        moveTo.setY(centerY);

        ArcTo arcToInner = new ArcTo();
        arcToInner.setX(centerX - innerRadius);
        arcToInner.setY(centerY);
        arcToInner.setRadiusX(innerRadius);
        arcToInner.setRadiusY(innerRadius);

        MoveTo moveTo2 = new MoveTo();
        moveTo2.setX(centerX + innerRadius);
        moveTo2.setY(centerY);

        HLineTo hLineToRightLeg = new HLineTo();
        hLineToRightLeg.setX(centerX + radius);

        ArcTo arcTo = new ArcTo();
        arcTo.setX(centerX - radius);
        arcTo.setY(centerY);
        arcTo.setRadiusX(radius);
        arcTo.setRadiusY(radius);

        HLineTo hLineToLeftLeg = new HLineTo();
        hLineToLeftLeg.setX(centerX - innerRadius);

        path.getElements().add(moveTo);
        path.getElements().add(arcToInner);
        path.getElements().add(moveTo2);
        path.getElements().add(hLineToRightLeg);
        path.getElements().add(arcTo);
        path.getElements().add(hLineToLeftLeg);

        return path;
    }

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

Finden Form API von JavaFX für weitere Informationen über die Formen, die im code verwendet werden.

Screenshot:

Zeichnen Sie ein semi-ring - JavaFX

Jahr, perfekt ! 😀 Es ist genau das was ich brauche ^^ Danke sehr !
Wissen Sie, ob es eine einfache Möglichkeit, ändern Sie das drehen-Punkt von einem Pfad ?
Pfad.setRotate(45);
Nein Nein ^^ ich meine den Punkt, wo die rotation angewendet wird, da es standardmäßig für einen Pfad der rotate Punkt ist der erste Punkt gezeichnet in der Szene, so dass, wenn durch Zufall Sie wissen, ein einfacher Weg, um das zu ändern, wäre es toll 🙂
direkt 2 Kreise. Subtrahiert den einen vom anderen.

InformationsquelleAutor Uluk Biy

4

Vorschläge:
- Wenn Sie nicht brauchen eine vollständige Gliederung Pfad können Sie einfach einen Bogen.
- Wenn Sie nicht brauchen, den Bogen ausgefüllt und will nur zeichnen Sie die Umrisse Pfad des Bogens, dann legen Sie die Füllung des Bogens auf null.
- Wenn Sie wollen, dass die Gliederung Pfad des Bogens dick, dann legen Sie die Parameter des Pinselstrichs auf den Bogen.
- Wenn benötigen Sie einen dicken Bogen, ist auch skizziert, dann ist es am besten zu definieren, die einen vollständigen arc-wie in Uluk ' s Antwort.
Beispielcode:
```
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.*;
import javafx.stage.Stage;

public class SemiCircleSample extends Application {
  @Override public void start(Stage stage) {
    Arc arc = new Arc(50, 50, 25, 25, 0, 180);
    arc.setType(ArcType.OPEN);
    arc.setStrokeWidth(10);
    arc.setStroke(Color.CORAL);
    arc.setStrokeType(StrokeType.INSIDE);
    arc.setFill(null);

    stage.setScene(new Scene(new Group(arc), 100, 80));
    stage.show();
  }

  public static void main(String[] args) { launch(args); }
}
```
Danke, aber es ist ein voller Halbkreis, was ich zeichnen möchte, ist ein halb Kreis leer in der Mitte. Ich habe ein Beispiel in meinem vorherigen post zeigt genau das, was ich versuche zu zeichnen.
Aktualisierte Antwort zu zeigen, zeichnen Sie einen Bogen mit einem Strich angegeben und keine Füllung (die erzeugen einen halben ring Bild).
Ich danke Ihnen sehr viel für Sie aktualisieren, Ihre Lösung ist bequemer, aber Sie können nicht füllen Sie den Bogen, wie Sie sagte, so dass ich denke, ich werde die andere Lösung.

InformationsquelleAutor jewelsea

Als ein experiment, ich habe versucht, das gleiche zu tun, die auf eine Leinwand. Dies ist, was ich kam mit einer RadialGradient und die Funktion GraphicsContext.fillArc:

/**
 *
 * @param x Coordinate x of the centre of the arc
 * @param y Coordinate y of the centre of the arc
 * @param outer Outer radius of the arc
 * @param innerPercentage Inner radius of the arc, from 0 to 1 (as percentage)
 * @param arcStartAngle Start angle of the arc, in degrees
 * @param arcExtent Extent of the arc, in degrees
 */
private void drawSemiCircle(float x, float y, float outer, float innerPercentage, float arcStartAngle, float arcExtent) {
    RadialGradient rg = new RadialGradient(
            0,
            0,
            x,
            y,
            outer,
            false,
            CycleMethod.NO_CYCLE,
            new Stop((innerPercentage + (.0 * innerPercentage)), Color.TRANSPARENT),
            new Stop((innerPercentage + (.1 * innerPercentage)), Color.RED),
            new Stop((innerPercentage + (.6 * innerPercentage)), Color.YELLOW),
            new Stop((innerPercentage + (1 * innerPercentage)), Color.GREEN)
    );
    gc.setFill(rg);
    gc.fillArc(
            x - outer,
            y - outer,
            outer * 2,
            outer * 2,
            arcStartAngle,
            arcExtent,
            ArcType.ROUND
    );
}

Wichtigsten Punkte hier sind die arc-Typ als ArcType.RUNDE und der Einsatz von Farbe.TRANSPARENT wie die erste Farbe.

Dann kann es verwendet werden, etwas entlang der Linie:

drawSemiCircle(100, 100, 100, .5f, -45, 270);

Es ist keine perfekte Lösung, aber es funktionierte für mich.

InformationsquelleAutor Leonel B.

Weg.arcTo() der parameter SweepAngle bezieht sich auf die Drehung Grad, wenn sweepAngle positiv ist wird der Bogen im Uhrzeigersinn, wenn sweepAngle negativ ist der Bogen wird gegen den Uhrzeigersinn.

Dieser code wird verwendet in meiner Produktionsumgebung, es zieht einen Halbkreis ring mit einem bitmap-Bild, der Pfad geht im Uhrzeigersinn auf dem äußeren radius, und gegen den Uhrzeigersinn, auf den inneren radius:

drawpercent = 0.85; //this draws a semi ring to 85% you can change it using your code.
DegreesStart = -90;
DegreesRotation = 180;

radiusPathRectF = new android.graphics.RectF((float)CentreX - (float)Radius, (float)CentreY - (float)Radius,  (float)CentreX + (float)Radius, (float)CentreY + (float)Radius);
innerradiusPathRectF = new android.graphics.RectF((float)CentreX - (float)InnerRadius, (float)CentreY - (float)InnerRadius, (float)CentreX + (float)InnerRadius, (float)CentreY + (float)InnerRadius);

Path p = new Path(); //TODO put this outside your draw() function,  you should never have a "new" keyword inside a fast loop.

                degrees = (360 + (DegreesStart)) % 360;
                radians = (360 - degrees + 90) * Math.PI / 180.0;
                //radians = Math.toRadians(DegreesStart);
                int XstartOuter = (int)Math.round((Math.cos(radians) * Radius + CentreX));
                int YstartOuter = (int)Math.round((Math.sin(-radians)* Radius + CentreY));
                int XstartInner = (int)Math.round((Math.cos(radians) * InnerRadius + CentreX));
                int YstartInner = (int)Math.round((Math.sin(-radians) * InnerRadius + CentreY));

                degrees = (360 + (DegreesStart + drawpercent * DegreesRotation)) % 360;
                //radians = degrees * Math.PI /180.0;
                radians = (360 - degrees + 90) * Math.PI / 180.0;
                //radians = Math.toRadians(DegreesStart + drawpercent * DegreesRotation);
                int XendOuter = (int)Math.round((Math.cos(radians) * Radius + CentreX));
                int YendOuter = (int)Math.round((Math.sin(-radians) * Radius + CentreY));
                int XendInner = (int)Math.round((Math.cos(radians) * InnerRadius + CentreX));
                int YendInner = (int)Math.round((Math.sin(-radians) * InnerRadius + CentreY));

                //draw a path outlining the semi-circle ring.
                p.moveTo(XstartInner, YstartInner);
                p.lineTo(XstartOuter, YstartOuter);
                p.arcTo(radiusPathRectF, (float)DegreesStart - (float)90, (float)drawpercent * (float)DegreesRotation);
                p.lineTo(XendInner, YendInner);
                p.arcTo(innerradiusPathRectF, (float)degrees - (float)90, -1 * (float)drawpercent * (float)DegreesRotation);
                p.close();

                g.clipPath(p);

                g.drawBitmap(bitmapCircularBarImage, bitmapRect0, bitmapRectXY, paint);

InformationsquelleAutor hamish

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.