pe:imageAreaSelect Primefaces imageareaselect 以编程方式突出显示

Question

我希望能够高亮图像并将高亮坐标保存到数据库中。当我重新打开图像时，我想从数据库中读取突出显示的坐标并以编程方式重新突出显示图像。

我可以使用此示例获取坐标并存储它们：

<pe:imageAreaSelect id="areaSelect" for="imgView" handles="true" show="#{imagesBean.hasHighlight}">
  <p:ajax event="selectEnd" listener="#{imagesBean.areaSelectListener}" delay="200" />
</pe:imageAreaSelect>

我的挑战是尝试在重新加载图像时以编程方式应用高光（区域选择）。虽然 show="#{imagesBean.hasHighlight}" 属性确实显示突出显示（灰色覆盖），但我找不到将坐标输入其中的方法。

如有任何建议，我们将不胜感激。

Answer 1

几乎每个 PrimeFaces 和 PrimeFaces Extensions 组件都包含 java 类、javascript 和 css.

如果您从主要资源开始，例如对于 github、https://github.com/primefaces-extensions/core/tree/master/src/main 中的 PrimeFaces 扩展，以下结构适用：

组件类：/java/org/primefaces/extensions/component/<component>
java脚本：resources/META-INF/resources/primefaces-extensions/<component>
css: resources/META-INF/resources/primefaces-extensions/<component>

后两者对于 PrimeFaces Extensions 是相同的，但对于 PrimeFaces 它们是不同的，但你会明白的。在上面的包中，组件通常使用通用的，有时使用特定的类，但这些都是自我描述的。

如果您现在查看 1-imageareaselect.js 中的 java 脚本，您会看到

setSelection : function(x1, y1, x2, y2) {
    this.instance.setSelection(x1, y1, x2, y2);
},

您可以使用它并在 widgetVar 上调用它。在加载页面时将此信息提供给客户端应该是一个明智的选择。 te 函数上面的注释说要使选择的设置可见调用

update()

设置选择后在 widgetVar 上。

pe:imageAreaSelect Primefaces imageareaselect 以编程方式突出显示

pe:imageAreaSelect Primefaces imageareaselect highlight programmatically

jsf

primefaces

primefaces-extensions