带坐标的 xsl-fo 外部图形中的区域属性答案

【问题标题】：Area attribute in xsl-fo external-graphic with coordinates带坐标的 xsl-fo 外部图形中的区域属性
【发布时间】：2019-07-11 22:47:37
【问题描述】：

我有一个要求，我需要使用 xsl-fo 描绘图像，并且用户应该能够在图像的文本/特定位置内单击。为了进一步解释，

我有一张图片
它包含文本
我有文本出现位置的坐标，需要为这些坐标提供超链接。

所以，当我点击文本时，我应该能够遍历到 PDF 文档中的另一个位置。

我尝试使用<area> 标签来提及<fo:block> 中的坐标，但它不起作用。我的 Fo 结构如下：

<fo:block> <fo:external-graphic content-width="scale-to-fit" content-height="100%" width="100%" src="figures/test.png"/><area shape="rect" coords="148,147,195,162" <fo:basic-link>xyz</fo:basic-link></area>
</fo:block>

如果有人尝试过这样的事情并帮助我，请告诉我吗？

【问题讨论】：

据我所知，XSL-FO 中没有类似于 imagemap 的东西。

标签： freemarker xsl-fo

【解决方案1】：

虽然 XSL-FO 没有有图像映射（类似于 HTML 中的 MAP 元素），但可以使用嵌入的 SVG 文档来实现同样的结果。

看看这个例子：

<fo:block>
    <fo:instream-foreign-object>
        <svg width="5cm" height="3cm" viewBox="0 0 5 3" version="1.1"
             xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <image x="0" y="0" width="5" height="3" xlink:href="image.png"/>
            <a xlink:href="http://www.w3.org">
                <rect x="1" y="2" width="3" height="1" 
                      fill="#AAFFFF" stroke="none" opacity="0"/>
            </a>
        </svg>
    </fo:instream-foreign-object>
</fo:block>

svg 文档内部：

image 元素放置位图图像，与文档视图框大小相同
a 元素定义链接目标
a 内的rect 元素定义了可点击区域

我使用 FOP 2.1 测试了这个示例，它可以工作，但有几个警告：

为了让可点击的矩形完全透明，我使用了opacity="0"；我尝试使用fill="none" stroke="none"，但这不起作用，可能是因为矩形被完全丢弃/忽略，没有任何可见标记
即使在 SVG 中使用 ellipse 元素，PDF 中的可点击区域也是矩形

【讨论】：

以上答案很有帮助，但我无法添加属性。当我添加时，它说 “元素的属性“宽度”是必需的” 所以，我删除了并生成了图像。但是，整个图像的选择方式与每个 PDF 图像的选择方式相同。图像的任何特定部分都不是可选择的，也没有超链接提供。
@DhineshM 如果您知道矩形的 (x1, y1, x2, y2) 坐标（在您的示例中为coords="148,147,195,162"），您可以轻松地使用它们来计算x、y , width 和 height 正确定义 rect 元素所需的属性：width 是 x2 - x1，height 是 y2 - y1。
@DhineshM 实际上，这取决于坐标原点的位置（SVG 轴的原点在左上角，正 x 指向右侧，正 y 指向底部）。如果你设置opacity="0.5"，矩形是半透明的，你可以看到它在哪里，并检查你是否以正确的方式计算它的位置和大小。
图像被放置并且链接也被显示。但问题是图像被缩小了。它没有以其原始大小显示。我尝试过适合宽度、自动等，但没有用。请建议。我希望图像保持原始大小
由于这是一个与原始问题不同的问题，而且评论链越来越长，我建议创建一个新的特定问题（可能链接到这个问题以获得更多上下文）。

【解决方案2】：

全 XSL-FO 方法是将 fo:external-graphic 放在具有指定宽度和高度的 fo:inline-container 或 fo:block-container 中。然后热点可以是fo:block-container，相对于包含fo:inline-container/fo:block-container的参考区域定位。

此示例将热点添加到内联图像。以下来自 Antenna House GUI 的屏幕截图显示了标尺，因此您可以看到热点具有正确的位置和大小。（添加border 和background 属性只是为了使这一点显而易见，您不太可能需要这些属性。）

<fo:block text-align="center">
  <fo:inline-container width="200px" height="200px"
                       border="thin solid silver">
  <fo:block text-depth="0" line-height="0" font-size="0">
    <fo:external-graphic
        content-width="scale-to-fit"
        content-height="100%" width="100%"
        src="logo-antenna-200x200.png" />
  </fo:block>
  <fo:block-container
      position="absolute"
      left="148px"
      top="147px"
      width="47px"
      height="15px">
    <fo:block>
      <fo:basic-link internal-destination="xyz">
        <fo:block-container height="100%" width="100%"
                            background-color="magenta" />
      </fo:basic-link>
    </fo:block>
  </fo:block-container>
  </fo:inline-container>
</fo:block>

【讨论】：