pdf‐frame Attributes & Styles

The PDF-Frame template provides a dynamic and expressive way to define PDF/Canvas graphical content using Vue.js expressions. Let's delve into its key features:

The template utilizes Vue.js expressions syntax for defining attributes, styles, and events.

Attributes

# Static
id="elementId"

# Expression Syntax
:x="120"
:y="Math.sin(n * 0.4) * 50"

# Run Time expression
:x="() => {
    return Math.sin(n * 0.4) * 50;
}"

Styles

The style attribute is an object with style properties applied to the graphical elements. Style properties include fill, stroke, opacity, lineWidth, dashline, among others.

# Expression Syntax
:style="{
          fill: 'hsl(' + ((n * 5) % 360) + ',100%,50%)',
          opacity: Math.sin(n * 0.4) + 1 + 0.1,
          lineWidth: 1,
        }"

# Run Time expression
:style="() => {
     let el = this;
     return  {
        fill: 'hsl(' + ((n * 5) % 360) + ',100%,50%)'
     }
}"