【JAVAFX 构建直角,圆角,斜角,共同面板组件】

• 问题简介
  Javafx 内部Rectangle面板组件能提供一个直角和圆角的组件,可以使用次Rectangle来定制窗口形状,当然Javafx 也可以使用Pane以及集成Pane的组件来实现Rectangle 方形的效果,但是当一个面板需要斜角,Rectangle就不能实现,但是Rectangle可以实现圆角啊,呵呵想想,当我需要四个角不同圆角怎么办, 如果我要两个角圆角,两个角直角效果的面板javafx默认的组件就实现不了了.在这里扩展了一个面板,它包括{直角,圆角,不同大小圆角,斜角},同时可以分别自定义.,虽然css可以定义,同时html css 也有实现, 但是javafx就不能实现,现在就让我们一起来看看实现吧.

• 实现思路
  当网上查找资料时基本没有这样的效果,其实说实话我发布的文章中的组件和效果基本网上也没有完整实例和可参考的资料.大部分都是头脑风暴实现的效果.本来想通过组件绘制的方式查看javafx源码组件,很多不能扩展和集成定义,那么只能退其次了,在查看中看到很多绘制组件都是以Shape为基础,但除了系统能继承外,其它方式不能继承,只能以Path来绘制面板组件了.通过添加不同绘制组件来构建一个面板容器.下面先来看看效果吧.

• 效果展示

  • 直角
    

  • 圆角
    

  • 斜角
    

  • 斜角圆角
    

  • 共有
    

• 源码实现

  package com.liangchao.eyes.utils.javafx.node;import javafx.beans.property.DoubleProperty;import javafx.beans.property.DoublePropertyBase;import javafx.scene.paint.Color;import javafx.scene.shape.*;/** * 改造 Rectangle 可以定义每一个圆角 * 版权所有, 转载请添加出处,谢谢 * @author Administrator * @version 1.0 * @class galacticeyes--LCH * @description: * @date 2022/4/17 17:28 */public class BoxPane extends Path {    private static final String  CSS_STYLE = "box";    private final DoubleProperty width;    private final DoubleProperty height;    // 左上圆弧    privateDouble  radius0;    // 右上圆弧    privateDouble  radius1;    // 右下圆弧    privateDouble  radius2;    // 左下圆弧    privateDouble  radius3;    privateType    type0;    privateType    type1;    privateType    type2;    privateType    type3;    public BoxPane() { this(0, 0, null, null, null, null);    }    public BoxPane(double width, double height, Double radius0, Double radius1, Double radius2, Double radius3) { this(width, height, null, radius0, radius1, radius2, radius3);    }    public BoxPane(double width, double height, Type type, Double radius0, Double radius1, Double radius2, Double radius3) { this(width, height, radius0, type, radius1, type, radius2, type, radius3, type);    }    /**     * @param width   宽度     * @param height  高度     * @param radius0 左上圆角     * @param radius1 右上圆角     * @param radius2 右下圆角     * @param radius3 左下圆角     * @param type0   类型     * @param type1   类型     * @param type2   类型     * @param type3   类型     */    public BoxPane(double width, double height, Double radius0, Type type0, Double radius1, Type type1, Double radius2, Type type2, Double radius3, Type type3) { this.type0 = type0; this.type1 = type1; this.type2 = type2; this.type3 = type3; this.width  = new NamelessClass_2(); this.height = new NamelessClass_1(); this.setWidth(width); this.setHeight(height); this.radius0 = (radius0 == null ? 0 : radius0); this.radius1 = (radius1 == null ? 0 : radius1); this.radius2 = (radius2 == null ? 0 : radius2); this.radius3 = (radius3 == null ? 0 : radius3); this.getStyleClass().add(CSS_STYLE); this.setStrokeWidth(1); this.setStroke(Color.BLACK); this.setFill(Color.WHITE); //构建容器 this.binds();    }    public BoxPane(double width, double height) { this(width, height, null, null, null, null);    }    /**     * 初始化组件 绑定数据     */    public void binds() { // 左上 if (this.radius0 != null && type0 != null) {     this.getElements().add(new MoveTo(0, this.radius0));     if (Type.ARC.equals(type0)) {  this.getElements().add(new ArcTo(this.radius0, this.radius0, 0, this.radius0, 0, false, true));     } else if (Type.BEVEL_ANGLE.equals(type0)) {  this.getElements().add(new LineTo(this.radius0, 0));     } } else {     this.getElements().add(new MoveTo(0, 0)); } //右上 if (this.radius1 != null && type1 != null) {     this.getElements().add(new LineTo(this.width.get() - this.radius1, 0));     if (Type.ARC.equals(type1)) {  this.getElements().add(new ArcTo(this.radius1, this.radius1, 0, this.width.get(), this.radius1, false, true));     } else if (Type.BEVEL_ANGLE.equals(type1)) {  this.getElements().add(new LineTo(this.width.get(), this.radius1));     } } else {     this.getElements().add(new LineTo(width.get(), 0)); } // 右下 if (this.radius2 != null && type2 != null) {     this.getElements().add(new LineTo(this.width.get(), this.height.get() - radius2));     if (Type.ARC.equals(type2)) {  this.getElements().add(new ArcTo(this.radius2, this.radius2, 0, this.width.get() - this.radius2, this.height.get(), false, true));     } else if (Type.BEVEL_ANGLE.equals(type2)) {  this.getElements().add(new LineTo(this.width.get() - this.radius2, this.height.get()));     } } else {     this.getElements().add(new LineTo(width.get(), height.get())); } //左下 if (this.radius3 != null && type3 != null) {     this.getElements().add(new LineTo(this.radius3, this.height.get()));     if (Type.ARC.equals(type3)) {  this.getElements().add(new ArcTo(this.radius3, this.radius3, 0, 0, this.height.get() - this.radius3, false, true));     } else if (Type.BEVEL_ANGLE.equals(type3)) {  this.getElements().add(new LineTo(0, this.height.get() - this.radius3));     } } else {     this.getElements().add(new LineTo(0, height.get())); } this.getElements().add(new ClosePath());    }    public final double getHeight() { return this.height.get();    }    public final void setHeight(double value) { this.height.set(value);    }    public final double getWidth() { return this.width.get();    }    public final void setWidth(double value) { this.width.set(value);    }    public final DoubleProperty heightProperty() { return this.height;    }    /**     * 设置圆角参数     */    public BoxPane radius(Double radius0, Type type0, Double radius1, Type type1, Double radius2, Type type2, Double radius3, Type type3) { this.type0 = type0; this.type1 = type1; this.type2 = type2; this.type3 = type3; this.radius0 = (radius0 == null ? 0 : radius0); this.radius1 = (radius1 == null ? 0 : radius1); this.radius2 = (radius2 == null ? 0 : radius2); this.radius3 = (radius3 == null ? 0 : radius3); return this;    }    /**     * 设置圆角参数     */    public BoxPane radius(Type type, Double radius0, Double radius1, Double radius2, Double radius3) { this.type0 = type; this.type1 = type; this.type2 = type; this.type3 = type; this.radius0 = (radius0 == null ? 0 : radius0); this.radius1 = (radius1 == null ? 0 : radius1); this.radius2 = (radius2 == null ? 0 : radius2); this.radius3 = (radius3 == null ? 0 : radius3); return this;    }    public final DoubleProperty widthProperty() { return this.width;    }    public enum Type { /**  * 圆角  */ ARC, /**  * 斜角  */ BEVEL_ANGLE    }    // 初始化宽度    class NamelessClass_2 extends DoublePropertyBase { NamelessClass_2() { } public Object getBean() {     return BoxPane.this; } public String getName() {     return "width"; }    }    // 初始化高度    class NamelessClass_1 extends DoublePropertyBase { NamelessClass_1() { } public Object getBean() {     return BoxPane.this; } public String getName() {     return "height"; }    }}