javafx 自定義控件

自從我開(kāi)始創(chuàng)建Nest恒溫器FX自定義控件以來(lái)，已經(jīng)有一段時(shí)間了！ 因此，上次，正如Gerrit Grunwald所建議的那樣，我花了一些時(shí)間使用inkscape復(fù)制Nest恒溫器設(shè)計(jì)，這是構(gòu)建JavaFX版本的第一步。

今天，我想與大家分享我嘗試在JavaFX中創(chuàng)建它時(shí)所犯的錯(cuò)誤，以及最終結(jié)果。

首先，我開(kāi)始使用css文件來(lái)制作背景，該背景由我的inkscape版本的三個(gè)圓組成，帶有三個(gè)線性漸變和twoa筆觸。 正如Gerrit所建議的那樣，我僅使用了一個(gè)Region并使用CSS設(shè)置了樣式。

.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; }

最終結(jié)果很好，但是當(dāng)我調(diào)整控件大小時(shí)，由于-fx-background-insets和-fx-border-width是絕對(duì)像素值，因此結(jié)果很差。 您可以在下面看到我的問(wèn)題。

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

無(wú)論如何，當(dāng)我嘗試它時(shí)，這就是我得到的結(jié)果。

??? 這是什么 ？？？ 為什么我在這里只看到一個(gè)圓圈...嗯，我不得不說(shuō)我花了一些時(shí)間來(lái)理解默認(rèn)值是true的fx-scale-shape和fx-position-shape屬性。 這里是這兩個(gè)css屬性的定義

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

因此，我只需要將比例值設(shè)置為false即可……但是，當(dāng)我這樣做時(shí)，更改控件大小時(shí)，無(wú)法正確調(diào)整區(qū)域中的形狀大小……哎呀！

好吧，最終我嘗試縮放區(qū)域并在調(diào)整控件大小時(shí)設(shè)置其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); }

有效 ！！！

好吧，我不知道這是否是正確的方法，但這是我到目前為止發(fā)現(xiàn)的唯一方法……任何使用其他技巧來(lái)解決我在本文中發(fā)現(xiàn)的問(wèn)題的人，請(qǐng)?jiān)谠u(píng)論部分大聲分享！

刻度和currentCursor和targetCursor使用RadialFX的RadialMenuItem完成 。 現(xiàn)在，它不允許我通過(guò)css對(duì)其進(jìn)行自定義，但是現(xiàn)在我開(kāi)始了解它是如何工作的，下一步是使用css屬性來(lái)增強(qiáng)RadialFx RadialMenuItem。

在這里總結(jié)一下，是我今天取得的結(jié)果的一些視頻。

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

參考： JavaFX自定義控件–我們JCG合作伙伴 Laurent Nicolas的Nest Thermostat第2部分 ，請(qǐng)?jiān)L問(wèn)LoNee先生博客。

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

javafx 自定義控件

總結(jié)

以上是生活随笔為你收集整理的javafx 自定义控件_JavaFX自定义控件– Nest Thermostat第2部分的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。