Here's the idea. I'd like my students to have a PDF with fillable fields, and a (simple) drawing will be made in that same PDF according to the data they've entered. Say, they'd enter the radius of the circle that'd be drawn. I figured maybe that's possible if I created the PDF in Latex, since there're sophisticated things like creating animations in PDF and stuff. What do you guys think? Would that even be possible? Is there any other environment for "programming" PDFs I'm not even aware of? Thanks!

  • Welcome to TeX.SE. – CampanIgnis Apr 16 at 13:43
  • PDF doesn't provide a Canvas object and hence no DOM representation in JavaScript. So you cannot programmatically generate graphics during viewing time. Any graphics in a PDF is static. – AlexG Apr 16 at 13:48
  • @AlexG The trick is to exploit annotations. PDF JavaScript does allow manipulating annotations and annotations can have a lot of forms, like e.g. circles, free hand lines, lines, etc. This might require Acrobat Pro though. – Marcel Krüger Apr 16 at 13:50
  • @MarcelKrüger Yes, you are right. Such markup with primitive geometric forms is possible. But it is different from the PostScript-derived graphic model used in the page stream. And its possibilities are very limited. – AlexG Apr 16 at 13:53
  • Maybe one would be better off using SVG as LaTeX output format instead of PDF. It has unlimited possibilities for viewing-time manipulation. – AlexG Apr 16 at 13:57

PDF may not be the appropriate format for this, but SVG certainly is. Graphical objects are scriptable with JavaScript.

Click on the image and press F11 for Full-Screen:

Compile the TeX input with

latex example
latex example
dvisvgm --bbox=papersize --font-format=woff2 --zoom=-1 example



    <script type="text/javascript">
      <![CDATA[ function $(id){return document.getElementById(id.toString().trim());}; ]]>


\begin{frame}[t]{Interactive graphics}

Enter $x, y, R$:
  <foreignObject transform='translate({?x},{?(y-14)})' width='100' height='20'>
    <input type='text' id='myInput' value='-140,-80,20'
      style='font-size: 10px; padding: 0; border-radius:0'
  <foreignObject transform='translate({?x},{?(y-16)})' width='128' height='34'>
    <input id="mySubmit" type='submit' value='Draw circle'
        $("myCircle").setAttribute("cx", x);
        $("myCircle").setAttribute("cy", y);
        $("myCircle").setAttribute("r", R);

     <g transform='translate({?x},{?y})scale(1,-1)'>
     <circle id="myCircle" cx="-140" cy="-80" r="20" stroke="black" stroke-width="3" fill="red"/>
     <circle fill="black" r="3"/>

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.