-
Notifications
You must be signed in to change notification settings - Fork 5
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.
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>Denotes an individual page within the PDF. "p-template" specifies the template applied to the page.
<i-page p-template="temp-1"></i-page>Define page styles and assign them to respective pages using the "p-template" attribute.
<i-page-template id="temp-1"></i-page-template>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' }" />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' }" />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' }" />Groups other elements together for collective styling or transformation.
<i-group id="group-1" :transform="{‘translate’: [100, 50]}" />Defines complex paths using commands and parameters in the d attribute.
<i-path d="M0,0 L10,23Z" :style="{ fill:'#00ff00' }" />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' }" />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' }" />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' }" />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" />Renders images using x, y, width, height, and src attributes.
<i-image src="src/assets/i2d-frame.svg" :width="200" :x="175" :y="0" />PDF frame supports linear or radial gradients akin to I2djs.
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}]" />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}]" />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"
/>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"
/>