自从我开始创建Nest恒温器FX自定义控件以来,已经有一段时间了! 因此,上次,如Gerrit Grunwald所建议,我花了一些时间用inkscape复制Nest恒温器设计,这是构建JavaFX版本的第一步。

今天,我想与大家分享我尝试在JavaFX中创建它时所犯的错误,以及最终结果。

首先,我开始使用css文件来制作背景,该背景由我的inkscape版本的三个圆组成,带有三个线性渐变和twoa笔触。 正如Gerrit所建议的那样,我仅使用了一个Region并使用CSS设置了样式。

.nest{}

.nest .frame {
  -fx-background-radius		: 1024px;
  -fx-background-insets		: 1, 4, 20;
  -fx-background-color 		: linear-gradient(from 27.1% 6.5% to 77.35% 91%,  
                                      	#e8e8e8 0%, 
                                      	#c6c6c6 50%, 
                                      	#a6a6a6 100%),
                                  linear-gradient(from 27.1% 6.5% to 77.35% 91%, 
                                      	#fdfdfd 0%,
  					#ededed 3.552646%,
  					#d7d7d7 7.277831%,
  					#d2d2d2 11.973317%,
  					#c7c7c7 18.269639%,
  					#c1c1c1 25.449407%,
  					#b0b0b0 32.21809%,
  					#999999 37.210315%,
  					#868686 43.145844%,
  					#747474 49.577036%,
  					#5c5c5c 55.667913%,
  					#5a5a5a 61.299348%,
  					#5e5e5e 68.340749%,
  					#676767 76.115692%,
  					#706e6f 82.365692%,
  					#838383 88.148153%,
  					#959595 93.637025%,
  					#a8a8a8 100%),
  				linear-gradient(from 27.1% 6.5% to 77.35% 91%, 
                                      	#1c1715 0%, 
                                       	#181818 50%, 
                                       	#3a3a3a 100%); 
  -fx-border-radius		: 1024px;
  -fx-border-insets		: 0, 5, 20;
  -fx-border-width		: 0, 2, 1;
  -fx-border-color	 	: transparent, 
  				  linear-gradient(from 27.1% 6.5% to 77.35% 91%, 
                                    	#d5d5d5 0%, 
                                     	#747474 50%, 
                                     	#8f8f8f 100%), 
                                  #212121;
}

最终结果很好,但是当我调整控件大小时,由于-fx-background-insets和-fx-border-width是绝对像素值,所以结果很差。 您可以在下面看到我的问题。

javafx自定义图标 javafx自定义组件_人工智能
我花了一些时间弄清楚该如何纠正。 最后,我唯一的想法是制作三个不同的区域并使用svg路径值。 它将纠正-fx-background-insets像素值,而不是笔划值。

.nest{}

.nest .frame {
  -fx-shape			: "m 519.18435,179.4957 a 266.9594,266.9594 0 1 1 -0.72682,-2.0685";
  -fx-background-insets	        : 1;
  -fx-background-color 	        : linear-gradient(from 27.1% 6.5% to 77.35% 91%,  
                                     	#e8e8e8 0%, 
                                      	#c6c6c6 50%, 
                                       	#a6a6a6 100%);
}

.nest .frame1 {
  -fx-shape			: "m 514.32688,181.18013 a 261.81818,261.81818 0 1 1 -0.71283,-2.02866";
  -fx-background-color 	        : linear-gradient(from 27.1% 6.5% to 77.35% 91%, 
                                    	#fdfdfd 0%,
					#ededed 3.552646%,
					#d7d7d7 7.277831%,
					#d2d2d2 11.973317%,
					#c7c7c7 18.269639%,
					#c1c1c1 25.449407%,
					#b0b0b0 32.21809%,
					#999999 37.210315%,
					#868686 43.145844%,
					#747474 49.577036%,
					#5c5c5c 55.667913%,
					#5a5a5a 61.299348%,
					#5e5e5e 68.340749%,
					#676767 76.115692%,
					#706e6f 82.365692%,
					#838383 88.148153%,
					#959595 93.637025%,
					#a8a8a8 100%);      						
  -fx-border-width		: 2;
  -fx-border-color	 	: linear-gradient(from 27.1% 6.5% to 77.35% 91%, 
                                      	#d5d5d5 0%, 
                                      	#747474 50%, 
                                       	#8f8f8f 100%);
}

.nest .frame2 {
  -fx-shape			: "m 497.45305,187.03163 a 243.95858,243.95858 0 1 1 -0.66421,-1.89028";
  -fx-background-color 	        : linear-gradient(from 27.1% 6.5% to 77.35% 91%, 
                                     	#1c1715 0%, 
                                      	#181818 50%, 
                                      	#3a3a3a 100%); 
  -fx-border-width		: 1;
  -fx-border-color	 	: #212121;
}

javafx自定义图标 javafx自定义组件_java_02

无论如何,当我尝试它时,这就是我得到的结果。

??? 这是什么 ??? 为什么我在这里只看到一个圆圈……我不得不说我花了一些时间来理解默认值是true的fx-scale-shape和fx-position-shape属性。 这里是这两个css属性的定义

-fx-位置-形状

<布尔值>

真正

如果为true,则表示该形状居于区域的宽度和高度的中心,否则该形状位于其源位置。 如果未指定形状字符串,则无效。

-fx比例形状

<布尔值>

真正

如果为true,则将缩放形状以适合区域的大小,否则,形状处于其源大小,并且其位置取决于position-shape属性的值。 如果未指定形状字符串,则无效。

因此,我只需要将比例值设置为false即可……但是,当我这样做时,更改控件大小时,无法正确调整区域的形状大小……哎呀!

javafx自定义图标 javafx自定义组件_javafx自定义图标_03

好吧,最终我尝试缩放区域并在调整控件大小时设置其prefSize。 所以我使用下面的代码片段:

private void resize() {
   size = getWidth() < getHeight() ? getWidth() : getHeight();
   final double scaleRatio = size / initialSize;
   frame.setPrefSize(size, size);
   frame.setScaleX(scaleRatio);
   frame.setScaleY(scaleRatio);

   frame1.setPrefSize(size, size);
   frame1.setScaleX(scaleRatio);
   frame1.setScaleY(scaleRatio);

   frame2.setPrefSize(size, size);
   frame2.setScaleX(scaleRatio);
   frame2.setScaleY(scaleRatio);
}

javafx自定义图标 javafx自定义组件_css_04

有效 !!!

好吧,我不知道这是否是正确的方法,但这是我到目前为止发现的唯一方法……任何使用其他技巧解决我在本文中发现的问题的人,请在评论部分大声分享!

刻度和currentCursor和targetCursor使用RadialFX的RadialMenuItem完成 。 现在,它不允许我通过css对其进行自定义,但是现在我开始了解它是如何工作的,下一步是使用css属性来增强RadialFx RadialMenuItem。

在这里总结一下是我今天获得的结果的一些视频。

  • 代码也将很快在JFXtras上可用!



参考: JavaFX自定义控件–我们JCG合作伙伴 Laurent Nicolas的Nest Thermostat第2部分 ,位于LoNee先生的博客上。