当前位置：文江博客话题详情

XSL-FO 中的圆角

发布于 2024-08-08 21:17:30 字数 108 浏览 2 评论 0原文

我们客户的要求是 PDF 表格带有圆角。我只有 Apache FOP 处理器可供使用，它不支持圆角属性。它也不支持浮动，因此无法向左和向右浮动圆形图像。

您对如何执行此操作有什么建议吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

疯了 2024-08-15 21:17:30

您可以将表创建为可缩放矢量图形 (SVG) 对象，并将其作为外部图像包含在 XSL-FO 文档中。 SVG支持圆角，FOP支持SVG。

我相信您也可以创建一个圆角矩形 SVG 并将其用作内容的背景，然后将表格放在它前面。我想我做过一次，但我似乎找不到代码......

回复收藏 0 原文

冷︶言冷语的世界 2024-08-15 21:17:30

只要它的宽度是固定的，并且不要期望东西像CSS一样动态地“浮动”宽度，我就这样做了（通过使用垂直的“滑动门”技术，如果你还记得老式的CSS）：

获得圆角背景图像，并在页面上显示尽可能长的时间（请注意，如果您希望内容出现在多个页面上，那么效果不会那么好，呵呵）。我在页眉/页脚以及开始新页面（在正文区域）的内容上使用它，我知道这些内容不会超过一页。

然后我决定是否需要固定的高度...如果是这样，您可以只使用没有花哨的背景图像...

如果高度会变化，那么我只使用图像的顶部作为一部分，使用底部另一部分的图像。像这样的事情：

<fo:block-container>
  <fo:block-container background-image="url(images/rounded_corner_image.png)" 
  background-repeat="no-repeat"
  background-position-horizontal="15px" 
  background-position-vertical="top"              
  background-color="white"
  >
  <!-- 
  So it used the top of the image for as long as the block-container exists heightwise.
  I may have had some whitespace in my image and need to move image into place so think I used background-position-horizontal since i had 15px of whitespace i wanted to cut off 
  Also you may set a height above if definatley know you don't need it to 'auto-expand', just make sure you have content that can't overflow if setting height (like a table with Name: Address: fields)
  -->
    <fo:block margin="70px 70px 0px 70px">
      Need to add some margins before starting content since dont want to text to touch the top and sides of of the rounded corner/borders plus add whitespace for content.
    </fo:block>
  </fo:block-container>

  <fo:block-container background-image="url(images/rounded_corner_image.png)" 
  background-repeat="no-repeat"
  background-position-horizontal="15px"
  background-position-vertical="bottom"
  padding="0px 0px 20px 0px"
  background-color="white"
  >
    <fo:block margin="0px 70px 70px 70px">
      Need to add some margins before starting content since dont want to text to touch bottom and sides of of the rounded corner/borders.
    </fo:block>
  </fo:block-container>

</fo:block-container>

我认为有多种方法可以实现。就像我在底部有内容一样，所以我只使用底部，因为我知道我肯定会有至少 70px 的内容来显示圆角的底部渐变......您可能只是决定将所有内容放在第一个中块容器并为第二个块容器提供 70px 的固定高度，以仅显示底部背景图像（我认为即使底部容器中不存在任何内容，这也是可能的[忘记 xsl-fo 规则]）。使用 FOP 后备箱，效果很好。

编辑：我应该注意我使用最新的 FOP 1.0（也尝试过以前的版本），并且效果很好。另外，我使用了与内容一样高的图形，因为我有边框......如果您只需要顶部和底部图形（以及背景颜色来填充正文，那么不需要完整的“一样高” -可能的图像）。

As long as it is fixed width and dont expect things to 'float' dynamically width-wise like css, I have done this (by using a vertical 'Sliding Doors' technique, if you remember old-school css):

Get a rounded corner background image and have it as long as you expect to be on the page (note if you expect things to go onto multiple pages, then this won't work out so well hehe). I use it on headers/footers and things that start a new page (in the body region) that I know won't go more than 1 page.

Then I decide if i need a fixed height ... if so you can just use a background image with no fancyness...

if the height will vary, then I just use the top of the image for one part and the bottom of the image for another part. something like this:

<fo:block-container>
  <fo:block-container background-image="url(images/rounded_corner_image.png)" 
  background-repeat="no-repeat"
  background-position-horizontal="15px" 
  background-position-vertical="top"              
  background-color="white"
  >
  <!-- 
  So it used the top of the image for as long as the block-container exists heightwise.
  I may have had some whitespace in my image and need to move image into place so think I used background-position-horizontal since i had 15px of whitespace i wanted to cut off 
  Also you may set a height above if definatley know you don't need it to 'auto-expand', just make sure you have content that can't overflow if setting height (like a table with Name: Address: fields)
  -->
    <fo:block margin="70px 70px 0px 70px">
      Need to add some margins before starting content since dont want to text to touch the top and sides of of the rounded corner/borders plus add whitespace for content.
    </fo:block>
  </fo:block-container>

  <fo:block-container background-image="url(images/rounded_corner_image.png)" 
  background-repeat="no-repeat"
  background-position-horizontal="15px"
  background-position-vertical="bottom"
  padding="0px 0px 20px 0px"
  background-color="white"
  >
    <fo:block margin="0px 70px 70px 70px">
      Need to add some margins before starting content since dont want to text to touch bottom and sides of of the rounded corner/borders.
    </fo:block>
  </fo:block-container>

</fo:block-container>

Theres various ways to go at it i think. like i had content at the bottom so i just use the bottom knowing i am definately going to have at least 70px of content to show the bottom gradient of my rounded corners.... you may just decide on putting all your content in the first block-container and giving the 2nd block-container a fixed height of 70px to only show the bottom background-image (i think this is possible even though if no content is present in that bottom container [forget xsl-fo rules]). Using FOP trunk and works out nicely.

EDIT: i should note i use latest FOP 1.0 (also tried with prev version), and it works well. Also I used a graphic as tall as the content will be since I have borders ... If you just require top and bottom graphics (and background-color to fill the body, then don't need the full 'as-tall-as-possible' image).

回复收藏 0 原文