Vue-arc-text NPM

vue-arc-text

Wrapper Library of arc-text to curve any text font on the web directly with Vue.

Install

npm install --save vue-arc-text

Examples

Here

Usage

<template>
  <vue-arc-text ref="arctext" :text=text :arc=+arc :direction=direction :className="classFont"></vue-arc-text>
</template>

<script>
  import VueArcText from './Vue-arc-text.vue'
  export default {
    components: { VueArcText },
    data () {
    return {
        text: '',
        direction: 1,
        arc: 150
      }
    },
  }
</script>

Params

Parameter	Type	Default	Description
text	string		Text you want to curve
arc	number	150	Angle you want to curve
direction	number	1	1 is clockwise mode and -1 is counter-clockwise mode
class	string		to add class into Component

Function

You can access to update function to force the update of component.

for example:

  const arcText = this.$refs['arctext']; //get the element by reference. the reference name is referenced by refs in the tag element.
  arcText.update() // now you can force the update.