java - How to wrap text around an image?

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

java - How to wrap text around an image?

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

I'm trying to wrap my text around an Image.

The structure I need to create is as in the picture bellow:

This is what I have tried

I have tried using table which did not succeed. I tough of using text field as html and passing image to it and set the alignment to left, but I found out that it is not possible to pass the image in text field. I started to solve the problem using jaspersoft Studio pro and with its html element. However I could not figure out how to pass the image field from data base as the html source. The expression in the html element is:

"<img src= '$F{Image}' align='left'/> <p>"+$F{KN_Zusatzinfo_DV_Einleitungstext} +"</p>"

This code does not show the image, but a box instead of the image. And the text which is printed is not stretched. The page style which I use is two column. The HTML out put is as in the picture

example output

Using a static path like one bellow to an image works, but it is not an option for me since I need to read the Image from data base:

    "<style>.left { float: left;  margin-left: 1em; width :40%;}</style><p><img class = left src= C:/Users/iman/JaspersoftWorkspace/Qreport/sample1.png />

If I just use an Image Element with a text box under that the out put and design view are as these pictures:

Image and text field approach

Design view

The HTML source of the html approach is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
    a {
      text-decoration: none
    }
  </style>
</head>

<body text="#000000" link="#000000" alink="#000000" vlink="#000000">
  <table width="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td width="50%">&nbsp;</td>
      <td align="center">

        <a name="JR_PAGE_ANCHOR_0_1"></a>
        <table class="jrPage" cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 595px; border-collapse: collapse; background-color: white;">
          <tr valign="top" style="height:0">
            <td style="width:10px"></td>
            <td style="width:20px"></td>
            <td style="width:40px"></td>
            <td style="width:210px"></td>
            <td style="width:32px"></td>
            <td style="width:58px"></td>
            <td style="width:10px"></td>
            <td style="width:182px"></td>
            <td style="width:9px"></td>
            <td style="width:24px"></td>
          </tr>
          <tr valign="top" style="height:25px">
            <td colspan="10">
            </td>
          </tr>
          <tr valign="top" style="height:5px">
            <td colspan="6">
            </td>
            <td colspan="3" rowspan="2" style="text-indent: 0px; text-align: right;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #6B66FA; font-size: 10px; line-height: 1.2578125;">HCH-A - Aortenklappenchirurgie, isoliert (Konventionell chirurgisch)</span>
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:20px">
            <td>
            </td>
            <td colspan="2" style="text-indent: 0px; text-align: left;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #BABABA; font-size: 10px; line-height: 1.2578125;">Ergebnisse</span>
            </td>
            <td colspan="3">
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:20px">
            <td colspan="7">
            </td>
            <td colspan="2" style="text-indent: 0px; text-align: right;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #000000; font-size: 10px; line-height: 1.2578125;">Dr XYZ</span>
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:88px">
            <td colspan="10">
            </td>
          </tr>
          <tr valign="top" style="height:74px">
            <td colspan="5">
            </td>
            <td colspan="3" rowspan="2">
              <div style='width:250px;height:90px;background-color: #FFFFFF; overflow:hidden;'>
                <img src='((java.awt.Image)field_Image.getValue())' align='left' />
                <p>Bei der Aortenklappe handelt es sich um das ?Ventil“ zwischen der linken HerzkeAortenklappenchirurgie, isoliert - konventionell - Aortenklappenchirurgie, isoliert - kathetergestützt Die Qualit?tsindikatoren der k........
                 appenchirauch die Indikationsstellung betrachtet. Sofern nicht anders angegeben, ist die Beschreibung der Qualit?tsindikatoren eine Fortschreibung der QIDB 2014 des AQUA-Institutes.</p>
              </div>
            </td>
            <td colspan="2">
            </td>
          </tr>
          <tr valign="top" style="height:16px">
            <td colspan="2">
            </td>
            <td colspan="2" rowspan="2">
              <div style='width:250px;height:90px;background-color: #FFFFFF; overflow:hidden;'>
                <img src='((java.awt.Image)field_Image.getValue())' align='left' />
                <p>Bei der Aortenklappe handelt es sich um das ?Ventil“ zwischen der linken Herzkammer und der Hauptschlagader (Aorta). Schlie?t die Klappe nicht mehr dicht, spriit?tsindikatoren der konventionellen Aortenklappenchirurgie fokussieren schwere Komplikationen und Sterblichkeit.
                  Bei der kathetergestützten Aortenklappenchirurgie wird darüber hinaus auch die Indikationsstellung betrachtet. Sofern nicht anders angegeben, ist die Beschreibung der Qualit?tsindikatoren eine Fortschreibung der QIDB 2014 des AQUA-Institutes.</p>
              </div>
            </td>
            <td>
            </td>
            <td colspan="2">
            </td>
          </tr>
          <tr valign="top" style="height:74px">
            <td colspan="2">
            </td>
            <td colspan="6">
            </td>
          </tr>
          <tr valign="top" style="height:520px">
            <td colspan="10">
            </td>
          </tr>
        </table>
        <br/>
        <br/>

        <a name="JR_PAGE_ANCHOR_0_2"></a>
        <table class="jrPage" cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 595px; border-collapse: collapse; background-color: white;">
          <tr valign="top" style="height:0">
            <td style="width:10px"></td>
            ...
            <td style="width:24px"></td>
          </tr>
          <tr valign="top" style="height:27px">
            <td colspan="7">
            </td>
          </tr>
          <tr valign="top" style="height:20px">
            <td>
            </td>
            <td colspan="2" style="text-indent: 0px; text-align: left;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #BABABA; font-size: 10px; line-height: 1.2578125;">Ergebnisse</span>
            </td>
            <td colspan="4">
            </td>
          </tr>
          <tr valign="top" style="height:7px">
            <td colspan="7">
            </td>
          </tr>
          <tr valign="top" style="height:21px">
            <td colspan="5">
            </td>
            <td style="text-indent: 0px; text-align: right;">
              <span style="font-family: 'DejaVu Sans', Arial, Helvetica, sans-serif; color: #6B66FA; font-size: 10px; line-height: 1.2578125;">HCH-A - Aortenklappenchirurgie, isoliert </span>
            </td>
            <td>
            </td>
          </tr>
          <tr valign="top" style="height:125px">
            <td colspan="7">
            </td>
          </tr>
          <tr valign="top" style="height:90px">
            <td colspan="2">
            </td>
            <td colspan="2">
              <div style='width:250px;height:90px;background-color: #FFFFFF; overflow:hidden;'>
                <img src='((java.awt.Image)field_Image.getValue())' align='left' />
                <p>....deleted some text because it exceeded the limit..</p>
              </div>
            </td>
            <td colspan="3">
            </td>
          </tr>
          <tr valign="top" style="height:552px">
            <td colspan="7">
            </td>
          </tr>
        </table>
        <br/>
        <br/>

        <a name="JR_PAGE_ANCHOR_0_3"></a>
        <table class="jrPage" cellpadding="0" cellspacing="0" border="0" style="empty-cells: show; width: 595px; border-collapse: collapse; background-color: white;">
          <tr valign="top" style="height:0">
            <td style="width:595px"></td>
          </tr>
          <tr valign="top" style="height:842px">
            <td>
            </td>
          </tr>
        </table>

        <![if IE]>
        <script>
          var links = document.querySelectorAll('link.jrWebFont');
          setTimeout(function() {
            if (links) {
              for (var i = 0; i < links.length; i++) {
                links.item(i).href = links.item(i).href;
              }
            }
          }, 0);
        </script>
        <![endif]>
      </td>
      <td width="50%">&nbsp;</td>
    </tr>
  </table>
</body>
</html>

And the HTML source of the Image element plus text field is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <title></title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <style type="text/css">
    a {
      text-decoration: none
    }
  </style>
</head>

<body text="#000000" link="#000000" alink="#000000"

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

416 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T19:31:59+0000

If you use the html component to wrap text around image, not only do you have a problem of pulling the image from the database, the html component also creates an image of the html, hence the content may be resized/clipped depending on text length and settings on html (image) component.

I would suggest to use two textFields wrapped around the image (see jrxml) and then calculate where the text will break into next field, so you get first part of text in first textField and second part in second textField

Java code to calculate text's break point

This code demonstrate how you can use FontMetric to calculate where Jasper Report will break the text depending on the size of your textField (explanation of code is in comments). The code is not perfectly safe on NullPointer (null text) and on non over-flowing text, furthermore it can be optimized but I will leave this to OP

import java.awt.Font;
import java.awt.font.FontRenderContext;
import java.awt.geom.AffineTransform;

public class WrapImage {

    /**
     * Get position where string will break
     * @param text, the text
     * @param width, the width of the component
     * @param height, the height of the component
     * @return the position
     */
    public static int getBreakPosition(String text, int width, int height){
        //Start font context
        AffineTransform affinetransform = new AffineTransform();     
        FontRenderContext frc = new FontRenderContext(affinetransform,true,true);     

        //Set same font as used in jasper-report
        Font font = new Font("SansSerif", Font.PLAIN, 10);
        //Get height to understand how many lines
        double textheight = font.getStringBounds(text, frc).getHeight();
        int nrLines = (int)Math.floor(height/textheight);

        //init variables
        int breakPos = 0;
        int line = 1;

        //loop the lines
        while (line<=nrLines){
            //get remaining text
            String textPart = text.substring(breakPos,text.length());
            //get how much text will fit in line
            breakPos += getLineBreakPosition(textPart, width, font, frc)+1;
            line++;
        }

        return breakPos;

    }

    /**
     * Get where a single line will break
     * @param text, the text
     * @param width, width of component
     * @param font, the font used
     * @param frc, the FontRenderContext
     * @return
     */
    protected static int getLineBreakPosition(String text, int width, Font font, FontRenderContext frc){
        int breakPos  = 0;
        String tmpText = text;
        while (font.getStringBounds(tmpText, frc).getWidth()>width){
            //the break position is space
            breakPos = tmpText.lastIndexOf(' ');
            if (breakPos<=0){
                breakPos = 0;
                break;
            }
            tmpText = tmpText.substring(0,breakPos);
        }
        return breakPos;
    }
}

jrxml example using java code

In this short example, I use a parameter with some arbitrary sample text. The WrapImage class is in class path. I set a variable to the calculated break point. Then use substring on the text to get first part in first textfield, second in second textField To simplify example, I'm using an image from desktop, for how to pull image from database see: Using images stored in database

<?xml version="1.0" encoding="UTF-8"?>
<jasperReport xmlns="http://jasperreports.sourceforge.net/jasperreports" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://jasperreports.sourceforge.net/jasperreports http://jasperreports.sourceforge.net/xsd/jasperreport.xsd" name="wrappingText" pageWidth="595" pageHeight="842" whenNoDataType="AllSectionsNoDetail" columnWidth="555" leftMargin="20" rightMargin="20" topMargin="20" bottomMargin="20" isSummaryWithPageHeaderAndFooter="true" uuid="cd3e4316-a3c4-4847-a085-3bfa1d9425af">
    <parameter name="longText" class="java.lang.String">
        <defaultValueExpression><![CDATA["Whether you've come to ask questions, or to generously share what you know, remember that we’re all here to learn, together. Be welcoming and patient, especially with those who may not know everything you do. Oh, and bring your sense of humor. Just in case. That basically covers it. But these three guidelines may help: Rudeness and belittling language are not okay. Your tone should match the way you'd talk in person with someone you respect and whom you want to respect you. If you don't have time to say something politely, just leave it for someone who does. Be welcoming, be patient, and assume good intentions. Don't expect new users to know all the rules — they don't. And be patient while they learn. If you're here for help, make it as easy as possible for others to help you. Everyone here is volunteering, and no one responds well to demands for help. Don't be a jerk. These are just a few examples. If you see them, flag them. In summary, have fun, and be good to each other."]]></defaultValueExpression>
    </parameter>
    <variable name="breakPos" class="java.lang.Integer">
        <initialValueExpression><![CDATA[WrapImage.getBreakPosition($P{longText}, 250, 100)]]></initialValueExpression>
    </variable>
    <title>
        <band height="220" splitType="Stretch">
            <image>
                <reportElement x="10" y="20" width="80" height="80" uuid="6b4bb467-f7fd-4a15-994b-7c1a01b86428"/>
                <imageExpression><![CDATA["C:\Users\pette\Desktop\queen_bee.jpg"]]></imageExpression>
            </image>
            <textField>
                <reportElement x="100" y="0" width="250" height="100" uuid="f4507624-0410-4feb-9dc5-7d3342b882f0"/>
                <textElement textAlignment="Justified" verticalAlignment="Bottom"/>
                <textFieldExpression><![CDATA[$P{longText}.substring(0,$V{breakPos}.intValue())]]></textFieldExpression>
            </textField>
            <textField>
                <reportElement x="0" y="100" width="350" height="120" uuid="8790bbdd-2066-4ceb-9fc9-dad6154df88c"/>
                <textElement textAlignment="Justified"/>
                <textFieldExpression><![CDATA[$P{longText}.substring($V{breakPos}.intValue()+1)]]></textFieldExpression>
            </textField>
        </band>
    </title>
</jasperReport>

Categories

java - How to wrap text around an image?

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Java code to calculate text's break point

jrxml example using java code

Output example

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags