java - 如何在Vaadin Flow图表中将VaadinIcons用作标记符号？

我有一个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或直接设置它。

最佳答案

您可以按以下方式动态构建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包装构造函数public Icon(VaadinIcon icon)。

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

作为参考，我提供了Marker和Icon类的一些详细信息。

CLASS MARKER的详细信息

类Marker（扩展了抽象类AbstractConfigurationObject）具有成员MarkerSymbol，该成员仅实现接口Serializable。

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

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

类图标的详细信息

类Icon包装器构造函数public Icon(VaadinIcon icon)用VaadinIcon调用构造函数public Icon(String collection, String icon)，该构造函数使用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代表了唯一简单的解决方法。

关于java - 如何在Vaadin Flow图表中将VaadinIcons用作标记符号？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56837839/