iText9.0.5中实现左文右图（2:1布局）自定义签名外观的问题

我明白你在iText9里搭建自定义签名外观时遇到的布局困扰了——想实现左文右图2:1的比例，但右边的图片容器死活不显示，对吧？咱们来一步步排查和修正问题：

问题根源分析 #

你当前的代码里有几个关键问题导致布局异常：

• 手动设置绝对坐标冲突Flex布局：你给textRect和imageRect设置了基于签名域rect的绝对X/Y位置，但Flex容器本身会自动管理子元素的排列，手动设置绝对位置会导致元素溢出容器范围，所以右边的imageDiv看不到。
• 图片添加语法错误：imageDiv.Add.SetBorder这里明显写错了，应该是先添加图片再设置边框，否则图片根本没被加入容器。
• 未利用Flex的比例分配属性：你手动设置子元素的宽度，但没给Flex子元素设置flex属性来指定宽度比例，Flex无法正确分配空间。

修正后的代码实现 #

下面是调整后的GenerateAppearanceContent方法，完美实现2:1的左文右图布局：

public Div GenerateAppearanceContent(Rectangle rect)
{
    const float MARGIN = 5; // 根据你的需求调整边距
    var paragraphMargin = 0;
    var paragraphFontSize = 10;
    var font = PdfFontFactory.CreateFont(StandardFonts.HELVETICA); // 示例字体，可替换为你的自定义字体

    var div = new Div()
        .SetPadding(MARGIN)
        .SetMargin(0)
        .SetBorder(new SolidBorder(ColorConstants.RED, 1));

    // 加载图片
    Image img = new Image(ImageDataFactory.Create(HostingEnvironment.MapPath(ConfigurationManager.AppSettings["ImagePath"])))
        .SetAutoScale(true); // 自动缩放图片适配容器

    // 构建签名文本段落
    var signingText = "这里替换成你的自定义签名文本";
    var paragraph = new Paragraph(signingText)
        .SetFont(font)
        .SetMargin(paragraphMargin)
        .SetMultipliedLeading(0.9f)
        .SetFontSize(paragraphFontSize);

    // 文本容器：占2份宽度
    var textDiv = new Div()
        .SetVerticalAlignment(VerticalAlignment.TOP)
        .SetBorder(new SolidBorder(ColorConstants.YELLOW, 1))
        .SetProperty(Property.FLEX, 2) // 关键：设置flex比例为2
        .Add(paragraph);

    // 图片容器：占1份宽度
    var imageDiv = new Div()
        .SetVerticalAlignment(VerticalAlignment.TOP)
        .SetHorizontalAlignment(HorizontalAlignment.CENTER)
        .SetBorder(new SolidBorder(ColorConstants.BLUE, 1))
        .SetProperty(Property.FLEX, 1) // 关键：设置flex比例为1
        .Add(img); // 修正语法：正确添加图片

    // Flex容器：横向排列子元素
    var flexContainer = new Div()
        .SetProperty(Property.FLEX_DIRECTION, FlexDirectionPropertyValue.ROW)
        .SetProperty(Property.ALIGN_ITEMS, AlignmentPropertyValue.FLEX_START)
        .SetBorder(new SolidBorder(ColorConstants.GREEN, 1))
        .Add(textDiv)
        .Add(imageDiv);

    div.Add(flexContainer);
    return div;
}

关键修改点说明 #

• Flex比例分配：通过给textDiv设置Property.FLEX, 2、imageDiv设置Property.FLEX, 1，让Flex容器自动按2:1的比例分配宽度，不需要手动计算和设置绝对宽度。
• 移除绝对坐标：删除了基于rect的textRect和imageRect坐标设置，让Flex布局自动管理子元素位置。
• 修正图片添加：修复了imageDiv.Add(img)的语法错误，确保图片被正确加入容器。
• 自动缩放图片：给图片设置SetAutoScale(true)，让图片自适应容器宽度，避免溢出。
• 简化Flex配置：移除了不必要的FlexWrap和自定义FlexContainerRenderer，iText9的默认Flex布局已经能满足需求。

这样调整后，你的签名外观就能正确显示左文右图2:1的布局了，右边的图片容器也会正常出现在签名域范围内。

备注：内容来源于stack exchange，提问作者LHF