LGTMaker

index.html

<div id="app">
    <header class="header">
      <h1>LGTMaker</h1>
    </header>
    <div class="container">
      <div class="canvas">
        <svg viewbox="0 0 600 400" width="600" height="400" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:vectos="http://www.vectos.org/xlink" xmlns:xlink="http://www.w3.org/1999/xlink">
          <text :x=d.x :y=d.y dy="0" dx="0"
          :font-family=fontfamily
          :stroke-width=borderthin
          text-anchor="middle"
          :font-size=size
          :stroke=border
          :fill=color
          :letter-spacing=textlength
          :writing-mode=writemode
          paint-order="stroke"
          :rotate=rotateIv
          :style="{transform:'rotate(' + rotate + 'deg)'}"
          id="text" 
          @mousedown="startDrag" @touchstart="startDrag"
          @mousemove="onDrag" @touchmove="onDrag"
          @mouseup="stopDrag" @touchend="stopDrag" @mouseleave="stopDrag">{{text}}</text>
        </svg>
        <div class="buttons">
          <span @click="$refs.fileInput.click()" class="btn">File Upload</span>
          <input type="file" accept='image/*' @change="upLoadFile" ref="fileInput">
          <span @click="download" id="download" class="btn" :class="{'is-hide':isDownloadHide}">Download</span>
        </div>
      </div>
      <div class="controls">
        <div class="controls-item">
          <p>Text</p>
          <input type="text" v-model="text" >
        </div>
        <div class="controls-item">
          <p>Font-Family</p>
          <select v-model="fontfamily">
            <option v-for="o in fonts" :value="o">{{o}}</option>
          </select>
        </div>
        <div class="controls-item">
          <p>Size</p>
          <input type="range" min="20" max="300" v-model="size">
          <input type="number" v-model="size">
        </div>
        <div class="controls-item">
            <p>Kerning</p>
            <input type="range" min="0" max="100" v-model="textlength">
            <input type="number" v-model="textlength">
          </div>
        <div class="controls-item">
          <p>FILL</p>
          <input type="color" v-model="color">
        </div>
        <div class="controls-item">
          <p>STROKE</p>
          <input type="range" min="0" max="50" v-model="borderthin">
          <input type="number" v-model="borderthin">
          <input type="color" v-model="border">
        </div>
        <div class="controls-item">
          <p>Rotate</p>
          <label class="align"><span>All:</span><input type="number" v-model="rotate"></label><br>
          <label class="align"><span>Letter:</span><input type="number" v-model="rotateIv"></label>
        </div>
        <div class="controls-item">
          <p>Direction</p>
          <label class="mr"><input type="radio" name="direct" v-model="writemode" value="lr"> Horizontal</label>
            <label><input type="radio" name="direct" v-model="writemode" value="tb"> Vertical</label>
        </div>
      </div>
    </div>
  </div>