几周前，由于Hendrik Ebbers的出色文章 ，我决定花一些时间观看有关JavaFX的JavaOne讨论。 我不得不说我已经学到了很多东西，只是看这些视频（即使我还没有完成）！

Gerrit的“使用力，路克”或使用JavaFX功能的技巧和窍门的演讲使我将我的（基本）墨迹和设计技能与JavaFX知识联系起来。 我决定花点时间尝试创建一个完整的自定义JavaFX控件，如Gerrit在其使用inkscape和CSS的演讲中所述。 我认为这将是学习CSS的好方法！

这是我将尝试在JavaFX中重现的真实对象。 这是Nest创建的恒温器。

因此，正如Gerrit所述，我首先制作了一个Inkscape原型，以了解图像的构建方式。 首先将图像导入到inkscape中，然后从图像的外部开始并转到中心详细信息。 我使用了很多对象对齐和分布，以及带有颜色选择器的重复对象（Ctrl + d）和渐变。 在下一张图像上，您可以看到我执行的步骤以及所构建的最终图像。

即使我没有完成某些效果，最终结果也与原始结果很接近。 例如，我对非对称的外部圆渐变遇到了一些麻烦。 所以我决定得到更亮的部分并使它对称！ 这是我的inkscape版本（左）和原始版本（右）的完整比较：

我不得不说，通过在Inscakep中获取真实图像并使用颜色选择工具选择颜色来使用渐变，确实是一种简单而强大的再现灯光效果的方法。 再次感谢Gerrit的这次真正有益的演讲。

下一步是大部分使用CSS在JavaFX中导入全局形状，如Talk所示。

• 对于那些对自定义控件感兴趣的人，请真正单击此处 。

更新1：我重新设计了我的inkscape版本，因为关于光效果有些不对劲，并且我发现，我的外圆渐变与光方向不对齐，与之正交！ 这是新的屏幕截图！

更新2：对于那些愿意看一下inkscape文件的人， 这里就是 ！

翻译自: https://www.javacodegeeks.com/2014/01/javafx-custom-control-nest-thermostat-part-1.html