Dessiner un anneau semi - JavaFX

Je voudrais savoir comment dessiner un demi-cercle en JavaFX. J'ai essayé d'utiliser la Forme et la QuadCurve mais je ne pouvais pas faire un parfait demi-cercle.

Voici une photo de ce que je suis en train de dessiner :

Dessiner un anneau semi - JavaFX

InformationsquelleAutor AwaX | 2012-07-30
  1. 13

    L'image que vous avez associé est en fait un semi-anneau. Vous pouvez l'obtenir en JavaFX par le dessin imbriquée 2 arcs et de quelques lignes. Mais ma préférée est d'utiliser le 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);
}
}

    Reportez-vous à La forme de l'API de JavaFX pour plus d'informations sur les formes utilisées dans le code.

    Capture d'écran:

    Dessiner un anneau semi - JavaFX

    • Année, parfait ! 😀 C'est exactement ce dont j'ai besoin ^^ Merci beaucoup !
    • Savez-vous si il existe un moyen simple pour modifier le point de rotation d'un chemin d'accès ?
    • chemin d'accès.setRotate(45);
    • Non non ^^ je veux dire le point où la rotation est appliquée, parce que par défaut pour un chemin d'accès le point de rotation est le premier point sur la scène, donc si par hasard vous connaissez un moyen simple pour modifier et que ce serait génial 🙂
    • S'il vous plaît commencer un nouveau Q&Une entrée. De cette façon vous serez en expliquant le problème avec plus de précision et d'avoir plus de réponses pour le plus rapide.
    • Non c'est ok, c'était juste une simple question, merci 🙂
    • Hey @AwaX. Essayez cette voie.getTransforms().add(new Rotation(45, centerX + rayon, centerY)); où 2ème 3ème params sont pivotX pivotY coordonnées respectivement.
    • pour faire pivoter de 180 : arcToInner.setSweepFlag(true);
    • que faire si je veux faire un full ring ??? quels sont les changements que je dois faire ?
    • utiliser directement les 2 cercles. Soustraire l'un de l'autre.

    InformationsquelleAutor Uluk Biy
  2. 4

    Suggestions:

    • Si vous n'avez pas besoin d'une décrivant le chemin, vous pouvez simplement utiliser un Arc.
    • Si vous n'avez pas besoin de l'arc rempli et vous voulez juste pour tracer le contour chemin de l'arc, puis définir le remplissage de l'arc à null.
    • Si vous voulez le contour chemin de l'arc d'épaisseur, puis définissez les paramètres du trait sur l'arc.
    • Si vous avez besoin d'une épaisseur de l'arc qui est également décrit, alors il est préférable de définir une pleine arc en Uluk de réponse.

    Exemple de code:

    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); }
}
    • Je vous remercie, mais c'est d'un demi-cercle, ce que je veux dessiner un demi-cercle vide au centre. J'ai inclus un exemple dans mon post précédent montrant exactement ce que je suis en train de dessiner.
    • Mise à jour de répondre à démontrer le dessin d'un arc avec un contour spécifié et pas de remplissage (qui va générer un demi-anneau de l'image).
    • Merci beaucoup pour la mise à jour, votre solution est plus pratique, mais vous ne pouvez pas remplir à l'arc comme vous l'avez dit, donc je pense que je vais prendre l'autre solution.
    InformationsquelleAutor jewelsea
  3. 2

    Comme une expérience, j'ai essayé de faire la même chose sur une Toile. C'est ce que j'ai trouvé, en faisant usage d'un RadialGradient et la fonction 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
);
}

    Points clés sont ici le type d'arc que ArcType.RONDE et l'utilisation de la Couleur.TRANSPARENT que la première couleur.

    Alors il peut être utilisé quelque chose le long de la ligne:

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

    Ce n'est pas une solution parfaite, mais il a travaillé pour moi.

    InformationsquelleAutor Leonel B.
  4. 0

    Chemin.arcTo() le paramètre SweepAngle se réfère à la rotation de degré, si sweepAngle est positive, l'arc dans le sens horaire, si sweepAngle est négative, l'arc est dans le sens antihoraire.

    Ce code est utilisé dans mon environnement de production, il dessine un demi-cercle de l'anneau à l'aide d'une image bitmap, le chemin se poursuit dans le sens horaire sur le rayon extérieur et dans le sens antihoraire sur le rayon intérieur:

    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