自從我開始創建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是絕對像素值，所以結果很差。 您可以在下面看到我的問題。

我花了一些時間弄清楚該如何糾正。 最后，我唯一的想法是制作三個不同的區域并使用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; }

無論如何，當我嘗試它時，這就是我得到的結果。

??? 這是什么 ？？？ 為什么我在這里只看到一個圓圈……我不得不說我花了一些時間來理解默認值是true的fx-scale-shape和fx-position-shape屬性。 這里是這兩個css屬性的定義

-fx-位置-形狀	<布爾值>	真正	如果為true，則表示該形狀居于區域的寬度和高度的中心，否則該形狀位于其源位置。 如果未指定形狀字符串，則無效。
-fx比例形狀	<布爾值>	真正	如果為true，則將縮放形狀以適合區域的大小，否則，形狀處于其源大小，并且其位置取決于position-shape屬性的值。 如果未指定形狀字符串，則無效。

因此，我只需要將比例值設置為false即可……但是，當我這樣做時，更改控件大小時，無法正確調整區域的形狀大小……哎呀！

好吧，最終我嘗試縮放區域并在調整控件大小時設置其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); }

有效 ！！！

好吧，我不知道這是否是正確的方法，但這是我到目前為止發現的唯一方法……任何使用其他技巧解決我在本文中發現的問題的人，請在評論部分大聲分享！

刻度和currentCursor和targetCursor使用RadialFX的RadialMenuItem完成 。 現在，它不允許我通過css對其進行自定義，但是現在我開始了解它是如何工作的，下一步是使用css屬性來增強RadialFx RadialMenuItem。

在這里總結一下是我今天獲得的結果的一些視頻。

• 代碼也將很快在JFXtras上可用！

參考： JavaFX自定義控件–我們JCG合作伙伴 Laurent Nicolas的Nest Thermostat第2部分 ，位于LoNee先生的博客上。

翻譯自: https://www.javacodegeeks.com/2014/02/javafx-custom-control-nest-thermostat-part-2.html

總結

以上是生活随笔為你收集整理的JavaFX自定义控件– Nest Thermostat第2部分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。