Skip to content

Instantly share code, notes, and snippets.

@abe-lib abe-lib/index.html
Created Mar 15, 2019

Embed
What would you like to do?
LGTMaker
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.