将EventHandler添加到Label中包含的ImageView中

Question

我最近开始研究Java FX，并希望创建一个自定义标签，其中将包含ImageView。

这是我的自定义标签的代码。

Image image = new Image(getClass().getResourceAsStream("/img/remove.png"), 20, 20, true, true);
ImageView removeImageView = new ImageView(image);

Label customLabel = new Label(labelText, removeImageView);
customLabel.setFont(Font.font("Arial", FontWeight.BOLD, 20));

这是我的自定义标签的外观。

现在，我想向ImageView添加鼠标单击EventHandler。这是我处理鼠标点击的代码。

removeImageView.addEventHandler(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() {
      @Override
      public void handle(MouseEvent event) {
        System.out.println("Imageview Clicked");
      }
    });

但是当我点击cross图片时，该事件没有被捕获。

我做了一些尝试，并尝试将EventHandler添加到customLabel中。标签可以捕获鼠标单击。

在我看来，由于ImageView包含在Label中，因此我面临此问题。我想知道的是，这是对JFX的限制，还是有其他替代方法可以实现此功能。谢谢。

Answer 1

这似乎是修复JDK-8117199的结果。 fix向LabeledSkinBase#updateChildren()添加了以下内容：

// RT-19851 Only setMouseTransparent(true) for an ImageView.  This allows the button
// to be picked regardless of the changing images on top of it.
if (graphic instanceof ImageView) {
    graphic.setMouseTransparent(true);
}

如您所见，当Labeled控件的图形为ImageView时，将其设置为鼠标透明。一种解决方法是将ImageView的鼠标透明度设置为false。

ImageView view = new ImageView();
view.mouseTransparentProperty().addListener((observable, oldVal, newVal) -> {
    if (newVal) {
        view.setMouseTransparent(false);
    }
});

由于您没有使用CSS来根据悬停/布防状态更改图像，因此不会引起与错误相关的问题。不过，我会保持谨慎。以防万一。

---

@fabian提到的一种更好的解决方法是将ImageView包装在其他Node（例如Pane）中。

Label customLabel = new Label(labelText, new Pane(removeImageView));

这使图形成为Pane，这意味着ImageView中的特殊updateChildren()处理不会发生。

Answer 2

#!/usr/bin/env python3 # -*- coding: utf-8 -*- # # baz documentation build configuration file, created by # sphinx-quickstart on Sat Sep 15 20:54:54 2018. # # This file is execfile()d with the current directory set to its # containing dir. # # Note that not all possible configuration values are present in this # autogenerated file. # # All configuration values have a default; values that are commented out # serve to show the default. # If extensions (or modules to document with autodoc) are in another directory, # add these directories to sys.path here. If the directory is relative to the # documentation root, use os.path.abspath to make it absolute, like shown here. # import os import sys sys.path.insert(0, os.path.abspath('../')) # -- General configuration ------------------------------------------------ # If your documentation needs a minimal Sphinx version, state it here. # # needs_sphinx = '1.0' # Add any Sphinx extension module names here, as strings. They can be # extensions coming with Sphinx (named 'sphinx.ext.*') or your custom # ones. extensions = ['sphinx.ext.autodoc'] # Add any paths that contain templates here, relative to this directory. templates_path = ['_templates'] # The suffix(es) of source filenames. # You can specify multiple suffix as a list of string: # # source_suffix = ['.rst', '.md'] source_suffix = '.rst' # The master toctree document. master_doc = 'index' # General information about the project. project = 'baz' copyright = '2018, Me' author = 'Me' # The version info for the project you're documenting, acts as replacement for # |version| and |release|, also used in various other places throughout the # built documents. # # The short X.Y version. version = '1.2.0' # The full version, including alpha/beta/rc tags. release = '1.2.0' # The language for content autogenerated by Sphinx. Refer to documentation # for a list of supported languages. # # This is also used if you do content translation via gettext catalogs. # Usually you set "language" from the command line for these cases. language = None # List of patterns, relative to source directory, that match files and # directories to ignore when looking for source files. # This patterns also effect to html_static_path and html_extra_path exclude_patterns = ['_build', 'Thumbs.db', '.DS_Store'] # The name of the Pygments (syntax highlighting) style to use. pygments_style = 'sphinx' # If true, `todo` and `todoList` produce output, else they produce nothing. todo_include_todos = False # -- Options for HTML output ---------------------------------------------- # The theme to use for HTML and HTML Help pages. See the documentation for # a list of builtin themes. # html_theme = 'alabaster' # Theme options are theme-specific and customize the look and feel of a theme # further. For a list of options available for each theme, see the # documentation. # # html_theme_options = {} # Add any paths that contain custom static files (such as style sheets) here, # relative to this directory. They are copied after the builtin static files, # so a file named "default.css" will overwrite the builtin "default.css". html_static_path = ['_static'] # Custom sidebar templates, must be a dictionary that maps document names # to template names. # # This is required for the alabaster theme # refs: http://alabaster.readthedocs.io/en/latest/installation.html#sidebars html_sidebars = { '**': [ 'relations.html', # needs 'show_related': True theme option to display 'searchbox.html', ] } # -- Options for HTMLHelp output ------------------------------------------ # Output file base name for HTML help builder. htmlhelp_basename = 'tmpdoc' # -- Options for LaTeX output --------------------------------------------- latex_elements = { # The paper size ('letterpaper' or 'a4paper'). # # 'papersize': 'letterpaper', # The font size ('10pt', '11pt' or '12pt'). # # 'pointsize': '10pt', # Additional stuff for the LaTeX preamble. # # 'preamble': '', # Latex figure (float) alignment # # 'figure_align': 'htbp', } # Grouping the document tree into LaTeX files. List of tuples # (source start file, target name, title, # author, documentclass [howto, manual, or own class]). latex_documents = [ (master_doc, 'tmp.tex', 'tmp Documentation', 'Me', 'manual'), ] # -- Options for manual page output --------------------------------------- # One entry per manual page. List of tuples # (source start file, name, description, authors, manual section). man_pages = [ (master_doc, 'tmp', 'tmp Documentation', [author], 1) ] # -- Options for Texinfo output ------------------------------------------- # Grouping the document tree into Texinfo files. List of tuples # (source start file, target name, title, author, # dir menu entry, description, category) texinfo_documents = [ (master_doc, 'tmp', 'tmp Documentation', author, 'tmp', 'One line description of project.', 'Miscellaneous'), ] 是鼠标透明的另一种解决方法（请参见Slaw answer）是处理ImageView父对象（ImageView）上的事件并重新触发它：

Lable

Answer 3

处理这种情况的一种方法是使用HBox。与其将ImageView传递给Label的构造函数，而是将ImageView和Label设置为HBox的子节点

ImageView removeImageView = new ImageView(image); 
Label customLabel = new Label("rito");
customLabel.setFont(Font.font("Arial", FontWeight.BOLD, 20));


HBox hbox = new HBox(removeImageView,customLabel);
root.getChildren().add(hbox);

removeImageView.setOnMouseClicked(e->{
            System.out.println("ImageView clicked");
        });


customLabel.setOnMouseClicked(e->{
            System.out.println("Lable clicked");
        });