pdf‐frame tags

PDF-Frame provides a set of predefined elements to define geometrical shapes and content in an easy and intuitive way. Below are the list of primitive and abstract elements supported by pdf-frame.

Table of Contents

• pdfFrame Element
• Supported Elements
  • i-page
  • i-page-template
  • i-rect
  • i-circle
  • i-line
  • i-group
  • i-path
  • i-polygon
  • i-polyline
  • i-ellipse
  • i-text
  • i-image
  • i-linearGradient
  • i-radialGradient
  • i-animate
  • i-animatepath

pdfFrame Element

The pdfFrame is the main container element. It defines the output context and other configurations of the output context such as type, width, height, configurations, hooks:

For PDF:

<pdfFrame type="pdf" width="595" height="841" :config="{}" :info="{}" :encryption="{}" @on-ready="callback"  @on-update="callback" @on-resize="callback"></pdf-frame>

For Canvas:

<pdfFrame type="canvas" width="595"<optional> height="841"<optional> @on-ready="callback"  @on-update="callback" @on-resize="callback"></pdf-frame>

Supported Elements

i-page

Denotes an individual page within the PDF. "p-template" specifies the template applied to the page.

<i-page p-template="temp-1"></i-page>

i-page-template

Define page styles and assign them to respective pages using the "p-template" attribute.

<i-page-template id="temp-1"></i-page-template>

i-rect

Draws rectangles with attributes like position (x, y), width, height, and styling properties.

<i-rect :x="0" :y="0" :width="595" :height="800" :style="{ fillStyle:'#ff0000' }" />

i-circle

Draws circles with attributes like cx, cy, and r for position, size, and style properties.

<i-circle :cx="0" :cy="0" :r="50" :style="{ fillStyle:'#ff0000' }" />

i-line

Draws lines with x1, y1, x2, y2 attributes for start and end points.

<i-line :x1="0" :y1="0" :x2="50" :y2="50" :style="{ stroke:'#00ff00' }" />

i-group

Groups other elements together for collective styling or transformation.

<i-group id="group-1" :transform="{‘translate’: [100, 50]}" />

i-path

Defines complex paths using commands and parameters in the d attribute.

<i-path d="M0,0 L10,23Z" :style="{ fill:'#00ff00' }" />

i-polygon

Creates polygons with multiple sides, defined by the points attribute.

<i-polygon :points="[{x: 0, y:0},{x: 100, y:200},{x:200, y:300}]" :style="{ stroke:'#00ff00' }" />

i-polyline

Creates polyline defined by the points attribute.

<i-polyline :points="[{x: 0, y:0},{x: 100, y:200},{x:200, y:300}]" :style="{ stroke:'#00ff00' }" />

i-ellipse

Draws ellipses using cx, cy, rx, and ry attributes for center, horizontal radius, and vertical radius.

<i-ellipse :cx="0" :cy="0" :rx="50" :ry="50" :style="{ fillStyle:'#ff0000' }" />

i-text

Renders text using x, y, text attributes as per style format. Width attribute for wrapping text.

<i-text :x="0" :y="60" :text="aboutText" :width="530" :style="{fill:'grad(grad1)',font: '25px Arial', align: 'center'}" class="text_123" />

i-image

Renders images using x, y, width, height, and src attributes.

<i-image src="src/assets/i2d-frame.svg" :width="200" :x="175" :y="0" />

Color gradients

PDF frame supports linear or radial gradients akin to I2djs.

i-linearGradient

Defines linear gradient fills.

<i-linearGradient id="grad1" :x1="0" :y1="0" :x2="100" :y2="0" :colorStops="[{ color: '#FF7C80', offset:0, opacity: 1}, { color: '#0075F3', offset:100, opacity: 1}]" />

i-radialGradient

Defines radiant gradient fills.

<i-radialGradient id="grad1" :inerCircle="{x: 0, y: 0, r: 50}" :outerCircle="{x: 0, y: 0, r: 100}" :colorStops="[{ color: '#FF7C80', offset:0, opacity: 1}, { color: '#0075F3', offset:100, opacity: 1}]" />

Animation Tags

i-animate

To define attribute animation on the element.

<i-animate
          :to="{ 
            height: 400,
            style:{
              fillStyle: 'hsl(' + ((Math.random() * 25 * 4) % 360) + ',100%,50%)',
            }
          }"
          ease= "easeInOutSin"
          :delay="1000"
          loop="100"
          direction= "alternate"
          :duration="1000"
        />

i-animatePath

To define path animation on the path element.

<i-animatePath
            :from="{
              d: 'M522.149671,254.139433 C522.041988,207.959016 521.986515'
            }"
            ease= "easeInOutSin"
            :loop="10"
            :delay="Math.random()*1000"
            :duration="10000"
          />