Прямоугольник с закругленным углом как ProgressBar с использованием Path - PullRequest
Новая
       57

Прямоугольник с закругленным углом как ProgressBar с использованием Path

0 голосов
/ 20 ноября 2018

Мне нужно нарисовать прямоугольник с закругленными углами с прогрессбаром в javafx.
Я уже сделал некоторый код, который рисует прямоугольник с углом.но как мне показать эффект прогресса.Ниже приведен пример, которому я пытаюсь подражать.http://jsfiddle.net/m1erickson/P2qTq/

есть другой способ сделать это.Направь меня, спасибо. 

void drawLine(double x1,double  y1,double x2,double y2) {
    MoveTo move= new MoveTo(x1, y1);
    path.getElements().add(move);
    LineTo line= new LineTo(x2,y2);
    path.getElements().add(line);
    path.setStroke(Paint.valueOf("#000000"));
}

void drawCorner(double x0,double y0,double x1,double y1) {
    QuadCurveTo quadCurveTo=new QuadCurveTo();
    quadCurveTo.setX(x0);
    quadCurveTo.setY(y0);
    quadCurveTo.setControlX(x1);
    quadCurveTo.setControlY(y1);
    path.getElements().add(quadCurveTo);
}

    Group group=new Group();
    double angleTRX=offsetX+horizontalLength+cornerRadius;
    double angleTRY=offsetY+cornerRadius;
    double TRCornerX=offsetX+horizontalLength+cornerRadius;
    double TRCornerY=offsetY;
    double bottomRY=angleTRY+verticalLength;

    //draw top line
    drawLine(offsetX, offsetY, offsetX + horizontalLength, offsetY);
    //draw top right corner
    drawCorner(angleTRX, offsetY+cornerRadius, TRCornerX, offsetY);
    //draw right line
    drawLine(angleTRX,angleTRY, angleTRX,bottomRY);
    //draw bottom right corner
    drawCorner(offsetX+horizontalLength,offsetY+verticalLength+cornerRadius*2,
            offsetX+horizontalLength+cornerRadius,offsetY+verticalLength+cornerRadius*2);
    //draw bottom line
    drawLine(offsetX+horizontalLength,offsetY+verticalLength+cornerRadius*2,
            offsetX,offsetY+verticalLength+cornerRadius*2);
    //draw left bottom corner
    drawCorner(offsetX-cornerRadius,offsetY+verticalLength+cornerRadius,
            offsetX-cornerRadius,offsetY+verticalLength+cornerRadius*2);
    //draw left line
    drawLine(offsetX-cornerRadius,offsetY+verticalLength+cornerRadius,
            offsetX-cornerRadius,offsetY+cornerRadius);
    //draw top left corner
    drawCorner(offsetX,offsetY,offsetX-cornerRadius,offsetY);
    group.getChildren().add(path);

-> Обновление <- </p>

Я нашел другой способ сделать это.используя Rectangle со смещением штриха., но все еще сталкиваются с одним ударом проблемы, начиная с по часовой стрелке . 

Rectangle rectangle= new Rectangle();
        rectangle.setX(offsetX);
        rectangle.setY(offsetY);
        rectangle.setArcHeight(cornerRadius);
        rectangle.setArcWidth(cornerRadius);
        rectangle.setWidth(200);
        rectangle.setHeight(200);
        rectangle.setStroke(Paint.valueOf("#000000"));
        rectangle.setFill(Paint.valueOf("#ffffff"));
        rectangle.setStrokeWidth(5);
        rectangle.setStrokeMiterLimit(5);
        rectangle.setSmooth(true);
        rectangle.setStrokeLineCap(StrokeLineCap.ROUND);
        rectangle.setStrokeLineJoin(StrokeLineJoin.ROUND);
        double length=rectangle.getWidth()*2+rectangle.getHeight()*2;
        //set stroke dash length
        rectangle.getStrokeDashArray().addAll(length);
        //display empty stroke/border
        rectangle.setStrokeDashOffset(length);
        group.getChildren().add(rectangle);
        container.add(group,0,0);

        slider.valueProperty().addListener((observable, oldValue, newValue) -> {
            rectangle.setStrokeDashOffset(length-(length*(newValue.doubleValue()/100)));
        });

если вы знаете лучшее решение, пожалуйста, дайте мне знать.

1 Ответ

0 голосов
/ 21 ноября 2018

Я решил это используя Rectangle и stroke-dash-offset.это может помочь другим и сэкономить драгоценное время. 

    Rectangle rectangle= new Rectangle();
    rectangle.setX(offsetX);
    rectangle.setY(offsetY);
    rectangle.setWidth(200);
    rectangle.setHeight(200);
    rectangle.setStroke(Paint.valueOf("#000000"));
    rectangle.setFill(Color.TRANSPARENT);
    rectangle.setStrokeWidth(5);
    rectangle.setStrokeMiterLimit(5);
    rectangle.setSmooth(true);
    rectangle.setStrokeLineCap(StrokeLineCap.ROUND);
   // rectangle.setStrokeLineJoin(StrokeLineJoin.ROUND);
    double length=rectangle.getWidth()*2+rectangle.getHeight()*2;

    //set stroke dash length
    rectangle.getStrokeDashArray().addAll(length);

   //display empty stroke/border
    rectangle.setStrokeDashOffset(length);

    group.getChildren().add(rectangle);
    container.add(group,0,0);

    slider.valueProperty().addListener((observable, oldValue, newValue) -> {
            double offset=length-((length*(newValue.doubleValue()/100)));
            rectangle.setStrokeDashOffset(-offset);
    });
...