Color Sampler、Magnifier 和 Desktop Sampler Toolbar

作者 Sandip Chitale (sandip.chitale@sun.com ) Sun Microsystems 公司 Sun Java Studio Creator 的高级工程师
2005 年 8 月 26 日

摘要

本文介绍如何向 NetBeans Platform 添加自定义工具作为工具栏。我们将使用 java.awt.Robot API 来执行两个示例工具,即 Color Sampler 和 Magnifier。使用 Color Sampler,可以在桌面上对任何像素的颜色进行取样;而使用 Magnifier,可以放大桌面的区域并以各种放大倍数进行查看。

您将学习如何使用 JColorChooser API 将 Color Sampler 和 Magnifier 工具组合在一起,以用来构建custom color chooser 面板。基于此,我们将创建自定义工具栏,从而通过 NetBeans Platform 便可以使用方便的 Color Chooser 功能。

NetBeans IDE、Sun Java Studio Enterprise、Sun Java Studio Creator 以及任何基于 J2EE 标准的工具中都可以使用工具栏。


简介

本教程中使用的 Java API

java.awt.Robot 类已添加到 1.3. 版本的 J2SE 中,该类包含几个有趣的 API:

public Color getPixelColor(int x, int y)
getPixel() API 返回给定屏幕坐标处像素的颜色。使用此 API 来构建可以在桌面上拾取任何像素颜色的 Color Sampler。大多数现在的绘图程序(如 Adobe Photoshop(TM))的工具调色板上都有颜色取样工具。每次需要通过提供 Hex、RGB 或 HSB 颜色值指定颜色时,都可以使用该工具。

public BufferedImage createScreenCapture(Rectangle screenRect)
createScreenCapture() API 创建一个图像,用来包含读取自屏幕的像素。使用此 API 可构建 Magnifier,它可以选择桌面的任何区域并以各种放大倍数进行查看。这种 Magnifier 工具可以提高可读性,因此提高了视障人士的可访问性。

Color Chooser 的应用

我们将 Magnifier 与 Color Sampler 结合使用以创建用于更精确颜色取样的新工具:javax.swing.JColorChoosercustom color chooser 面板将添加到 NetBeans Platform 中。

NetBeans IDE 是一个功能强大的开放源码 IDE。它提供使用 Java AWT/Swing 组件构建 Java 桌面 GUI 的可视窗体编辑器。IDE 还支持使用 HTML/CSS/JSP 和 Java Beans 创建 Web GUI。所有这些开发活动都涉及定义颜色设置,要求您提供精确的 Hex、RGB 或 HSB 颜色值。

在下面各种环境中,必须采用不同的方法设置颜色值的格式。

  • 在 HTML 文件中,将颜色定义为十六进制的 RGB 值,格式为 #hhhhhh
  • 在 CSS 文件中,可以使用十六进制的 #hhhhhhrgb(r,g,b)
  • 在 JSP 文件中,以 #hhhhhh 格式指定颜色;
  • 在 Property 表中,将键入属性值的颜色指定为 [r,g,b]
  • 使用 JavaBeans 属性编辑器初始化 Java 字符串的方式是 new Color(r,g,b)

由于可以采用不同的方式输出取样的颜色值,Color Sampler 可以帮助您快速输入正确的颜色格式。NetBeans IDE 从该域中的 Color Sampler 和 Magnifier 工具的功能中受益非浅。

步骤

为了向 NetBeans IDE 添加 Color Chooser 功能,我们将创建一个工具栏。该工具栏在基于 NetBeans 的其他 IDE(如 Sun Java Studio EnterpriseSun Java Studio Creator)中同样有效。实际上,该工具栏并不依赖于任何 IDE 功能,因此可以在任何基于 NetBeans Platform 的应用程序中使用。

本文向您介绍如何开发:

  • Color Sampler 工具
  • Magnifier 工具
  • 使用 Color Sampler 和 Magnifier 的 custom color chooser 面板。
  • 使用 Color Sampler 和 Magnifier 的 NetBeans Platform 的工具栏。

Color Sampler 工具的工作原理

Color Sampler 工具使用 java.awt.Robot 中的 public Color getPixelColor(int x, int y) API。它创建带有滴管图标[Color Sampler 滴管]的 color sampler 标签,如下面的屏幕截图所示。

Color Sampler 工具

该工具还在该标签上注册了一个鼠标侦听器和一个鼠标运动侦听器。在 mousePressedmouseDraggedmouseReleased 回调过程中,它使用 getPixelColor() API 获取鼠标光标下像素的颜色。然后将 Color Preview 标签的背景颜色设置为取样的颜色,并且将 Color Value 文本字段的内容设置为采用选定格式的取样值。Color Value 文本字段还支持颜色值字符串的拖放。

选择将与 Color Format 对话框一起使用的颜色格式。通过单击带有铅笔图标[选择颜色格式]的按钮,可以调用 Color Format 对话框。

Select Color format 对话框

支持下列格式:

  • #XXXXXX - 对于 HTML/CSS
  • rgb(r,g,b) - 对于 CSS
  • new Color(r,g,,b) - 对于 JavaBeans - Java 初始化字符串
  • XXXXXX - 对于 HTML/CSS
  • [r,g,b] - 对于 NetBeans 属性表
  • r,g,b

请参阅列表 1 - ColorSampler.java

Magnifier 工具的工作原理

Magnifier 工具使用 java.awt.Robot) 中的 public BufferedImage createScreenCapture(Rectangle screenRect) API。该工具创建像素大小为 256x256 的 Magnifier 标签。它还创建整数值范围为从 1 到 16 滑块。该滑块初始设置为 16,如下面的屏幕截图所示。

Magnifier 工具

Magnifier 工具还在 Magnifier 标签上注册了一个鼠标侦听器和一个鼠标运动侦听器。在 mousePressedmouseDraggedmouseReleased 回调的过程中,它使用 createScreenCapture() API 对桌面上鼠标坐标处的方形区域进行取样。通过在 Magnifier 标签上拖动鼠标,用户可以放大桌面的任何区域。

取样区域的大小取决于滑块的当前设置。如果滑块设置为 16,则该工具对 16x16 的方形像素区域进行取样,并且根据 1:16 的放大倍数将取样的图像缩放为 256x256 方形像素。如果滑块设置为 8,则该工具对 128x128 的方形像素区域进行取样,并且根据 1:2 的放大倍数将取样的图像缩放为 256x256 方形像素。

请参阅列表 2 - Magnifier.java

Color Chooser 面板的工作原理

Color Sampler 基于 JColorChooser 的 Color Chooser 面板

ColorSamplerColorChooserjavax.swing.JColorChoosercustom color chooser 面板。它扩展了 javax.swing.colorchooser.AbstractColorChooserPanel API 并使用 Color Sampler 和 Magnifier 工具。它向 Color Sampler 工具添加了一个更改侦听器,并通过将颜色设置为取样的颜色对 ChangeEvent 做出反应。

请参阅列表 3 - ColorSamplerColorChooserPanel.java

Netbeans 的 Desktop Sampler Toolbar

以下屏幕截图显示了 NetBeans 4.1 IDE 中处于活动状态的 Desktop Sampler Toolbar。单击可以最大尺寸进行查看。

NetBeans 的 Desktop Sampler Toolbar

Desktop Sampler Toolbar 模块

对于基于 NetBeans Platform的应用程序来说,DesktopSampler 是一个 NBM 模块。通过安装该模块,您可以向应用程序添加 Desktop Sampler 工具栏。要安装该模块,请下载 DesktopSampler NBM 文件,然后从菜单中选择 Tools > Update Center > Install Manually Downloaded Module。选择您要安装的 NBM 模块,然后按照向导中的说明执行操作。已经使用 NetBeans IDE 4.1 和最新的 NetBeans IDE 5.0 对该模块进行了测试。

它的工作原理如下:安装之后,Desktop Sampler 将在 NetBeans IDE 工具栏中显示为一个新项目。单击滴管图标 Color Sampler 滴管,按住鼠标按钮并移动鼠标以对桌面上的像素颜色进行取样。

如果您需要更精确的取样,则通过单击 Color Value 字段右侧的 Show Magnifier 按钮来显示 Magnifier 工具。出现一个预览框。单击该预览框,按住鼠标按钮并移动鼠标以在预览框中显示所需的桌面部分,然后松开鼠标按钮。单击滴管图标 Color Sampler 滴管,按住鼠标按钮并移动鼠标以对预览框中的像素颜色进行取样。如果预览框中的像素太小而不能精确定位,则使用滑块来增加放大倍数,然后重试。如果您需要不同格式的结果,则单击铅笔图标 选择颜色格式,然后选择另一种格式。

Desktop Sampler Toolbar 模块项目

需要在 NetBeans IDE 中构建模块的模块项目位于下文的“资源”部分。

注意,提供了两种风格的模块项目,一个用于 NetBeans IDE 4.1Desktop Sampler Toolbar Module Project for NetBean IDE 4.1),一个用于 NetBeans 5.0 IDEDesktop Sampler Toolbar Module Project for NetBeans 5.0 IDE)。这是因为在 NetBeans IDE 4.1NetBeans IDE 5.0 中处理模块项目略有不同。本文的其余部分介绍模块项目的常用方面,必要时高亮显示这些差别。

模块项目目录结构

下面的列表显示了 DesktopSampler NetBeans 模块项目的结构。

DesktopSampler 模块项目列表(用于 NetBeans IDE 4.1)

DesktopSampler/build.xml
DesktopSampler/manifest.mf
DesktopSampler/nbproject/project.properties
DesktopSampler/nbproject/project.xml
DesktopSampler/nbproject/private/private.xml
DesktopSampler/src/org/netbeans/modules/desktopsampler/Bundle.properties
DesktopSampler/src/org/netbeans/modules/desktopsampler/layer.xml
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Bundle.properties
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ColorSampler.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ColorSampler.java
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ColorSamplerColorChooserPanel.java
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/DesktopSampler.java
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/DesktopSamplerAction.java
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/DesktopSamplerActionIcon.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Dropper.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Format.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/HideMagnifier.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Magnifier.gif
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Magnifier.java
DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ShowMagnifier.gif

DesktopSampler 模块项目列表(用于 NetBeans IDE 5.0)

在 NetBeans 5.0 中,已经大大提高了对模块项目的支持。差别以红色高亮显示。

DesktopSampler/build.xml
DesktopSampler/manifest.mf
DesktopSampler/nbproject/platform.properties
DesktopSampler/nbproject/project.properties
DesktopSampler/nbproject/project.xml DesktopSampler/nbproject/private/platform-private.properties DesktopSampler/nbproject/private/private.properties DesktopSampler/nbproject/private/private.xml DesktopSampler/src/org/netbeans/modules/desktopsampler/Bundle.properties DesktopSampler/src/org/netbeans/modules/desktopsampler/layer.xml DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Bundle.properties DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ColorSampler.gif DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ColorSampler.java DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ColorSamplerColorChooserPanel.java DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/DesktopSampler.java DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/DesktopSamplerAction.java DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/DesktopSamplerActionIcon.gif DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Dropper.gif DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Format.gif DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/HideMagnifier.gif DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Magnifier.gif DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/Magnifier.java DesktopSampler/src/org/netbeans/modules/desktopsampler/ui/ShowMagnifier.gif

manifest.mf

manifest.mf 文件声明有关 NetBeans 模块的信息,如

  • 模块名称和版本号
  • 规范版本
  • layer.xml 文件的位置。在 layer.xml 中,声明了 DesktopSamplerAction
  • Bundle.xml 文件的位置。在 Bundle.xml 中,指定所有可本地化的字符串。
Manifest-Version: 1.0
OpenIDE-Module: org.netbeans.modules.desktopsampler/1
OpenIDE-Module-Specification-Version: 1.0
OpenIDE-Module-Layer: org/netbeans/modules/desktopsampler/layer.xml
OpenIDE-Module-Localizing-Bundle: org/netbeans/modules/desktopsampler/Bundle.properties 

src/org/netbeans/modules/desktopsampler/layer.xml

layer.xml 文件声明 DesktopSamplerAction 并将其安装在 WebTools 工具栏中。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE filesystem PUBLIC "-//NetBeans//DTD Filesystem 1.1//EN" "http://www.netbeans.org/dtds/filesystem-1_1.dtd">
<filesystem>
    <folder name="Toolbars">
        <folder name="Tools">
            <file name="org-netbeans-modules-desktopsampler-ui-DesktopSamplerAction.instance"/>
        </folder>
    </folder>
</filesystem>

src/org/netbeans/modules/desktopsampler/Bundle.properties

Bundle.properties 文件提供支持国际化和本地化模块信息的方法。

OpenIDE-Module-Display-Category=Tools
OpenIDE-Module-Long-Description=\
    Desktop Sampler provides a toolbar for sampling colors from Desktop. \
    It also supports zooming of any parts of Desktop.
OpenIDE-Module-Name=Desktop Sampler
OpenIDE-Module-Short-Description=Desktop Sampler

nbproject/project.xml

以下列表显示了用于 NetBeans 4.1 和 5.0 的 project.xml 文件。从 <dependency> 标记可以看出,openide API 已经从 4.1 中的一个 org.openide 模块分裂为 5.0 中的几个模块(org.openide.actions、org.openide.util、org.openide.windows)。同样用高亮显示差别。

project.xml(用于 NetBeans IDE 4.1)

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://www.netbeans.org/ns/project/1">
    <type>org.netbeans.modules.apisupport.project</type>
    <configuration>
        <data xmlns="http://www.netbeans.org/ns/nb-module-project/1">
            <code-name-base>org.netbeans.modules.desktopsampler</code-name-base>
            <path>DesktopSampler</path>
            <module-dependencies>
                <dependency>
                    <code-name-base>org.openide</code-name-base>
                    <build-prerequisite/>
                    <compile-dependency/>
                    <run-dependency>
                        <release-version>1</release-version>
                        <specification-version>4.41</specification-version>
                    </run-dependency>
                </dependency>
            </module-dependencies>
            <public-packages/>
            <javadoc/>
        </data>
    </configuration>
</project>

project.xml(用于 NetBeans IDE 5.0 开发版本)

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://www.netbeans.org/ns/project/1">
    <type>org.netbeans.modules.apisupport.project</type>
    <configuration>
        <data xmlns="http://www.netbeans.org/ns/nb-module-project/2">
            <code-name-base>org.netbeans.modules.desktopsampler</code-name-base>
            <standalone/>
            <module-dependencies>
                <dependency>
                    <code-name-base>org.openide.actions</code-name-base>
                    <build-prerequisite/>
                    <compile-dependency/>
                    <run-dependency>
                        <specification-version>6.3</specification-version>
                    </run-dependency>
                </dependency>
                <dependency>
                    <code-name-base>org.openide.util</code-name-base>
                    <build-prerequisite/>
                    <compile-dependency/>
                    <run-dependency>
                        <specification-version>6.4</specification-version>
                    </run-dependency>
                </dependency>
                <dependency>
                    <code-name-base>org.openide.windows</code-name-base>
                    <build-prerequisite/>
                    <compile-dependency/>
                    <run-dependency>
                        <specification-version>6.2</specification-version>
                    </run-dependency>
                </dependency>
            </module-dependencies>
            <public-packages/>
        </data>
    </configuration>
</project>

可以在 New API 支持页面API 支持版本页面上获得 project.xml 文件格式的详细信息。

build.xml

下面的列表显示了用于 NetBeans 4.1 IDENetBeans 5.0 IDE 的 build.xml 文件。NetBeans 4.1 IDE 版本需要 cluster harness 支持来构建。Rich Unger 的 FeedReader tutorial中介绍了 cluster harness 构建的详细信息。

build.xml(用于 NetBeans IDE 4.1)

它使用 cluster_harness。

<?xml version="1.0" encoding="UTF-8"?>
<project name="DesktopSampler" default="netbeans" basedir=".">
    <import file="../nbbuild/module-scripts/projectized.xml"/>
</project>

build.xml(用于 NetBeans IDE 5.0 开发版本)

它使用标准的模块项目支持。

<?xml version="1.0" encoding="UTF-8"?>
<!-- You may freely edit this file. See harness/README in the NetBeans platform -->
<!-- for some information on what you could do (e.g. targets to override). -->
<!-- If you delete this file and reopen the project it will be recreated. -->
<project name="org.netbeans.modules.desktopsampler" default="netbeans" basedir=".">
    <description>Builds, tests, and runs the project org.netbeans.modules.desktopsampler.</description>
    <import file="nbproject/build-impl.xml"/>
</project>

Desktop Sampler Action

DesktopSamplerAction 在 layer.xml 文件中声明,它提供了安装 Desktop Sampler 工具栏的方法。Action 返回 getToolbarPresenter() API 的 DesktopSampler 实例。

请参阅列表 4 - DesktopSamplerAction.java

DesktopSampler - 用于 Desktop Sampler Action 的 toolbar presenter

Desktop Sampler 将 Color Sampler 工具和 Magnifier 工具组合在一起。它向 ColorSampler 添加 ChangeListener,并将取样像素的颜色值存储在剪贴板中。它还在 Color Sampler 的 Color Preview 标签上注册了一个鼠标侦听器。

当用户双击 Color Preview 标签时,它启动使用 custom ColorSamplerColorChooser 面板的 JColorChoooser。在 Color Value 字段的右侧,该工具提供了一个触发按钮,使用该按钮可以显示 [Show Magnifier] 和隐藏 [Hide Magnifier] Magnifier 工具。

请参阅列表 5 - DesktopSampler.java

构建和测试模块项目

要构建项目,请使用 Projects 窗口的 DesktopSampler 模块项目节点上的弹出菜单,然后选择 Build 菜单项。要测试项目,请使用 Projects 窗口的 DesktopSampler 模块项目节点上的弹出菜单,然后选择 Install and Reload 菜单项。要从项目中创建您自己的 NBM 文件,请选择 Create NBM 菜单项,然后通过从该菜单中选择 Tools > Update Center > Install Manually Downloaded Module 来安装创建的 NBM 文件。

结论

在本文中,我们介绍了如何构建 Color Sampler 和 Magnifier 工具的详细信息。您已经学习了将它们组合在一起成为方便的 Color Chooser - javax.swing.JColorChoosercustom color chooser 面板,也学习了如何为提供该工具功能的 NetBeans Platform 构建工具栏。

资源

相关链接

 
 
 搜索