javafx : PieChart incorrect data handles MouseEvent

Question

我昨天刚了解 JavaFX，现在正在测试图形选项。我在 Oracle 站点 ( http://docs.oracle.com/javafx/2/charts/pie-chart.htm ) 的饼图示例中注意到了这种行为，但我添加了更多数据点和一些悬停效果以使其更加引人注目。

当您将鼠标悬停在图表上时，MouseEvent 并不总是由正确的数据段处理。鼠标光标离饼图的中心越近，这种效果就越明显。据我所知，当靠近边缘时，行为是准确的。

谁能证实这一点？这是一个错误，还是我做错了什么？

尝试移动鼠标，从段的标记边缘开始，向内移动到中心，看看光标下的段是否正确指示。

我在玩这张图表时注意到的其他一些事情 –

1. 描边效果(此处为白色破折号)在部分。左边缘经常看起来被剪掉了
2. 如何在 Java 中更改工具提示页角？在 CSS 中是“.page-corner”
3. 有吗任何改变饼图标签线形状的方法，或删除圆端点一起？

编辑:忘记添加代码了!

package piechartsample;

import javafx.application.Application;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.EventHandler;
import javafx.geometry.Side;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.chart.*;
import javafx.scene.control.Label;
import javafx.scene.control.Tooltip;
import javafx.scene.effect.Glow;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.shape.StrokeType;
import javafx.scene.Node;

public class PieChartSample extends Application {

    private PieChart.Data selectedData;
    private Tooltip tooltip;

    @Override
    public void start(Stage stage) {

        ObservableList<PieChart.Data> pieChartData =
                FXCollections.observableArrayList(
                new PieChart.Data("Grapefruit", 13),
                new PieChart.Data("Orange", 25),
                new PieChart.Data("Plum", 10),
                new PieChart.Data("Pear", 22),
                new PieChart.Data("Banana", 10),
                new PieChart.Data("Peach", 5),
                new PieChart.Data("Apricot", 1),
                new PieChart.Data("Pineapple", 20),
                new PieChart.Data("Passion Fruit", 100),
                new PieChart.Data("Lychee", 5));

        final PieChart chart = new PieChart(pieChartData);
        chart.setTitle("Fruits Graph");
        chart.setLabelLineLength(10);
        chart.setLegendSide(Side.LEFT);

        final Label caption = new Label("");
        caption.setTextFill(Color.DARKORANGE);
        caption.setStyle("-fx-font: 24 arial;");

        tooltip = new Tooltip("");

        tooltip.setStyle("-fx-font: 14 arial;  -fx-font-smoothing-type: lcd;");// -fx-text-fill:black; -fx-background-color: linear-gradient(#e2ecfe, #99bcfd);");


        for (final PieChart.Data data : chart.getData()) {
            Tooltip.install(data.getNode(),tooltip);
            applyMouseEvents(data);
        }

        BorderPane pane = new BorderPane();
        pane.setCenter(chart);
        Scene scene = new Scene(pane);
        stage.setTitle("Fruits");
        stage.setScene(scene);
//        scene.getStylesheets().add("piechartsample/Chart.css");
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

    private void applyMouseEvents(final PieChart.Data data) {

        final Node node = data.getNode();

        node.setOnMouseEntered(new EventHandler<MouseEvent>() {

            @Override
            public void handle(MouseEvent arg0) {
                node.setEffect(new Glow());
                String styleString = "-fx-border-color: white; -fx-border-width: 3; -fx-border-style: dashed;";
                node.setStyle(styleString);
                tooltip.setText(String.valueOf(data.getName() + "\n" + (int)data.getPieValue()) ); 
            }
        });

        node.setOnMouseExited(new EventHandler<MouseEvent>() {

            @Override
            public void handle(MouseEvent arg0) {
                node.setEffect(null);
                node.setStyle("");
            }
        });

        node.setOnMouseReleased(new EventHandler<MouseEvent>() {

            @Override
            public void handle(MouseEvent mouseEvent) {
                    selectedData = data;
                    System.out.println("Selected data " + selectedData.toString());
            }
        });
    }

}

Answer 1

PieChart incorrect picking behaviour for MouseEvent

对于您的特定实现，我在使用 JavaFX 2.2 时没有遇到切片区域的拾取问题。

饼图切片区域的选择错误似乎是一个已知问题。问题似乎是 partially fixed对于 JavaFX 2.2 (jdk7u6)。有一个 outstanding issue与此相关的预定用于 JavaFX 3.0。任何人都可以注册访问权限以查看此答案中链接的 jira 问题。

JavaFX 2.2 developer preview可在此处获得。

---

How do you change the tooltip page-corner in java?

JavaFX css reference guide提供有关工具提示的 css 结构的信息。这表明子结构具有类 .page-corner。要查看 JavaFX 默认里海皮肤如何设置页面角的样式，您可以查看 caspian.css .此答案中的链接指向 2.2 版本。如果需要，您还可以从 jfxrt.jar 中为您的 JavaFX 安装提取 caspian.css。

有了 caspian.css 后，您可以搜索 Tooltip 以查看应用于 .page-corner css 类的特定样式。这是默认的 .page-corner 样式 =>

.page-corner {
  -fx-padding: 4.5 4.5 4.5 4.5;
  -fx-background-color: linear-gradient( from 0% 0% to 50% 50%, #fcf7b6, #a59c31);
  -fx-shape: "M0,0H9L0,9Z";
  -fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 4 , 0.0 , 0 , 0 );
}

要更改默认样式，请使用您对页角的特定定义加载您自己的用户 css 样式表。例如，以下样式类定义会将页面角变成一个发光的绿色吃 bean 人。

.page-corner {
  -fx-padding: 10;
  -fx-background-color: green;
  -fx-shape: "M30,20 h-15 a15,15 0 1,0 15,-15 z";
  -fx-effect: dropshadow( three-pass-box , derive(green, 40%), 10, 0.0 , 0 , 0 );
}

---

Is there any way to change the shape of the pie-label-line, or remove the round endpoint all together?

是的，但这并不完全简单。

pie-label-line 似乎是一个实现的单一路径，其样式如下:

.chart-pie-label-line {
  -fx-stroke: #aaaaaa;
  -fx-fill: #aaaaaa;
}

要更改路径的形状，您可以在图表显示后查找标签行并编写一些代码从中删除球元素；例如(Path) chart.lookup(".chart-pie-label-line") 或者您可以继承 PieChart 并覆盖 layoutChartChildren 方法。此版本的 PieChart source 中的第 670-6 行是生成标签行的。

---

The stroke effect (here a white dash) is not consistent on a segment. The left edge often looks clipped

剪裁是因为您将边框应用于饼图切片节点，并且饼图在内部布局，以便添加到图表的后面的项目覆盖前面的项目。当您添加粗边框时，(最后绘制的切片除外)边框将与下一个绘制的饼图切片重叠。您可以通过调用 node.toFront() 来解决这个问题在您的鼠标输入方法中。

然而，笔划还有其他偏移问题，它应该更好地对齐饼图切片。如果笔划宽度设置为 1，它会很好地对齐，如果它设置为更大的数字(如 10)，它最终不会对齐。我的猜测是这是边框样式的 css 处理中的一些错误，会鼓励注册一个帐户并记录一个 jira issue。在 JavaFX 问题跟踪器中对此进行了讨论。

---

将与问题标题无关的其他一些问题作为单独的 stackoverflow 问题发布可能会更好。