0

我有一个Vaadin Charts Flow 6折线图，想将一些VaadinIcons定义为标记符号。

我怎样才能做到这一点？

MarkerSymbol是一个接口，实现为

  • MarkerSymbolEnum用于提供预定义的标记，例如。圆形、方形、菱形等
  • MarkerSymbolUrl，用于提供应用作标记的图像的 URL
AtomicInteger xValue = new AtomicInteger(0);
List<Double> yValues = new Random( ).doubles(10, -10, 10).boxed( ).collect(Collectors.toList( ));        
List<DataSeriesItem> items = yValues.stream( )
                             .map(yValue -> new DataSeriesItem(xValue.getAndIncrement( ), yValue))
                             .collect(Collectors.toList( )); 

/* Instead of MarkerSymbolEnum or MarkerSymbolUrl, retrieve a VaadinIcon*/
items.forEach(item -> item.getMarker( ).setSymbol(MarkerSymbolEnum.DIAMOND));
items.forEach(item -> item.getMarker( ).setSymbol(new MarkerSymbolUrl("foo/bar.png")));
// new Icon(VaadinIcon.CHEVRON_UP);

DataSeries series = new DataSeries("example");
series.setData(items);

Chart chart = new Chart(ChartType.LINE);
chart.getConfiguration( ).addSeries(series);

我没有看到有机会检索VaadinIcon的 URL或直接设置它。

4

1 回答 1

0

你可以动态地构造一个指向 VaadinIcon 资源的 URL，如下所示：

String loc = "https://github.com/vaadin/vaadin-icons/blob/master/assets/png/"
String url = loc + VaadinIcon.CHEVRON_UP.name().toLowerCase().replace('_', '-');
items.forEach(item -> item.getMarker( ).setSymbol(new MarkerSymbolUrl(url)));

Vaadin 还在 GitHub 上发布了svg VaadinIcon 资产。或者，您可能更喜欢指向本地目录路径。

用于创建 url 的逻辑来自Icon wrapper constructor public Icon(VaadinIcon icon)。

Vaadin 目前（截至 2019 年 7 月）似乎不允许直接使用 VaadinIcons 作为标记符号。

作为参考，我已经包含了类 Marker 和 Icon 的一些细节。

类标记详细信息

类Marker（扩展抽象类AbstractConfigurationObject）具有成员MarkerSymbol，它简单地实现接口Serializable。

类MarkerSymbolUrl实现了接口 MarkerSymbol，并且似乎代表了一个简单的 getter/setter 包装类，围绕着 String url。

类MarkerSymbolEnum仅实现枚举值的静态列表，因此不相关。

类图标详细信息

类Icon包装器构造函数public Icon(VaadinIcon icon)调用public Icon(String collection, String icon)带有VaadinIcon的构造函数，它使用 Icon 超类Component功能来调用继承的成员函数Element。setAttribute(...)，它存储计算的 VaadinIcon 属性字符串（我相信这最终会写在 div 标签中）：

public Icon(VaadinIcon icon) {
    this(ICON_COLLECTION_NAME, icon.name().toLowerCase().replace('_', '-'));
}

public Icon(String collection, String icon) {
    // iron-icon's icon-attribute uses the format "collection:name",
    // e.g. icon="vaadin:arrow-down"
    getElement().setAttribute(ICON_ATTRIBUTE_NAME, collection + ':' + icon);
}

Element 扩展了抽象类Node，它实现了 Serializable 接口。

下一步

最终，这似乎表明类 Marker/MarkerSymbol 和 Icon 不共享一个公共超类（Object 除外），因此没有互操作性。

为了更深入地了解，我将看看各种 Vaadin 组件如何使用生成的标记呈现 UI，但目前看来，使用 MarkerSymbolUrl 和来自 VaadinIcon 的动态计算 URL 是唯一直接的解决方法。

于 2019-07-01T15:49:25.207 回答