JavaFX自定义控件– Nest Thermostat第3部分

嗨，经过与同事的讨论，我今天决定展示css方法不是唯一可用于创建自定义控件的方法。当然，它允许提供一些外观扩展点，但是可以使用代码API使用相同的方法（与向JavaFX的转换）一起使用。

这是图形初始化方法，通过调用JavaFX对象API替换了CSS初始化代码（现在已注释掉）。

private void initGraphcis() {// frame = new Region();// frame.getStyleClass().setAll("frame");frame = new Circle();frame.setFill(FRAME_FILL);shadow = new DropShadow();shadow.setBlurType(BlurType.ONE_PASS_BOX);shadow.setColor(Color.rgb(0, 0, 0, 0.4));frame.setEffect(shadow);frame1 = new Circle();// frame1.getStyleClass().setAll("frame1");frame1.setFill(FRAME1_FILL);frame1.setStroke(FRAME1_STROKE);frame1.setStrokeWidth(2.0);frame2 = new Circle();// frame2.getStyleClass().setAll("frame2");frame2.setFill(FRAME2_FILL);frame2.setStroke(FRAME2_STROKE);frame3 = new Circle();// frame3.getStyleClass().setAll("frame3");frame3.setFill(Color.web("#c44f1a"));line = new SVGPath();// line.getStyleClass().setAll("line");line.setContent("M 0.75,1.806272 C 0.75,1.806272 67.422114,-2.659598 118.06708,1.085452 130.59357,2.011752 166.81696,11.039202 185.35089,11.189052 206.02921,11.356252 242.24677,2.052122 255.84883,1.085452 304.58057,-2.377808 372.89963,1.806272 372.89963,1.806272");line.setFill(Color.web("#ffffff00"));line.setStroke(Color.web("#4d4d4d"));line.setStrokeWidth(1.5);line1 = new SVGPath();// line.getStyleClass().setAll("line1");line1.setContent("M 0.75,1.806272 C 0.75,1.806272 67.422114,-2.659598 118.06708,1.085452 130.59357,2.011752 166.81696,11.039202 185.35089,11.189052 206.02921,11.356252 242.24677,2.052122 255.84883,1.085452 304.58057,-2.377808 372.89963,1.806272 372.89963,1.806272");line.setFill(Color.web("#ffffff00"));line.setStroke(Color.web("#141414"));line.setStrokeWidth(1.5);lightEffect = new Ellipse();lightEffect.setFill(Color.rgb(255, 255, 255, 0.7));lightEffect.setEffect(new BoxBlur(90, 90, 5));lightEffect.setCache(true);getChildren().setAll(frame, frame1, frame2, frame3, line, line1, lightEffect );}

节点大小的管理如下（无论如何，css方法都应做同样的事情）。

private void resize() {size = getWidth() < getHeight() ? getWidth() : getHeight();// frame.setPrefSize(size, size);frame.setRadius(size / 2.0);frame.setTranslateX(size / 2.0);frame.setTranslateY(size / 2.0);frame1.setRadius(frame1Ratio * size / 2.0);frame1.setTranslateX(size / 2.0);frame1.setTranslateY(size / 2.0);shadow.setOffsetX(size * shadowXOffset);shadow.setOffsetY(size * shadowYOffset);shadow.setRadius(size * shadowSizeOffset);shadow.setSpread(0.099);frame2.setRadius(frame2Ratio * size / 2.0);frame2.setTranslateX(size / 2.0);frame2.setTranslateY(size / 2.0);frame3.setRadius(frame3Ratio * size / 2.0);frame3.setTranslateX(size / 2.0);frame3.setTranslateY(size / 2.0);final double scaleRatio = size / initialSize;line1.setScaleX(scaleRatio);line1.setScaleY(scaleRatio);final double lineWidth = line1.getBoundsInLocal().getWidth();line1.setTranslateX(size / 2.0 - lineWidth / 2.0);line1.setTranslateY(size * 408.72054 / initialSize);line.setScaleX(scaleRatio);line.setScaleY(scaleRatio);line.setTranslateX(size / 2.0 - lineWidth / 2.0);line.setTranslateY(size * 410.08419 / initialSize);lightEffect.setRotate(lightEffectRotate);lightEffect.setTranslateX(lightEffectXRatio * size);lightEffect.setTranslateY(lightEffectYRatio * size);lightEffect.setRadiusX(lightEffectXRadiusRatio * size);lightEffect.setRadiusY(lightEffectYRadiusRatio * size);}

下一步将是混合两种方法，为用户提供两种工作方法。一个人将能够使用css方法来自定义Nest表示形式，其他人将能够使用良好的代码API方法。这将使我看到对代码有什么影响（是否沉重或不同时使用这两种方法），以及在继续使代码尽可能简单之前是否可以在css和代码API之间做出选择。

参考： JavaFX自定义控件–我们JCG合作伙伴 Laurent Nicolas的Nest Thermostat第3部分，请访问LoNee先生博客。