fabric.js实现衬衫图案文字设计器编辑器（图文设计）效果代码
代码语言：html
所属分类：其他
代码描述：fabric.js实现衬衫图案文字设计器编辑器（图文设计）效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.2.8.3.js"></script>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/semantic.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lobster|Gloria+Hallelujah|Indie+Flower'>
<style>
body {
font-family: sans-serif;
}
.imgLoader {
display: none;
opacity: 0 !important;
}
.pricebox span {
font-size: 30px;
color: orange;
}
.ui.items .item.active {
border: 3px solid red;
}
</style>
</head>
<body>
<div class="ui grid">
<div class="four wide column">
<div class="ui fluid accordion">
<div class="title">
<i class="dropdown icon"></i>
<i class="icon setting"></i> Settings
</div>
<div class="content">
<a href="#" id="resetButton">
<div class="ui button">
<i class="refresh icon"></i> Reset
</div>
</a>
<p>You can choose to add unlimited fext or Image below.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
<i class="font icon"></i> Add Text
</div>
<div class="content">
<div class="ui form">
<div class="field">
<label>Text:</label>
<div class="ui left labeled input">
<input placeholder="Text" type="text" id="inputText">
</div>
</div>
<div class="field">
<label>Font</label>
<div class="ui selection dropdown fluid">
<input name="gender" type="hidden" id="inputFont" value="Arial">
<div class="default text">Arial</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="Arial">Arial</div>
<div class="item" data-value="Impact">Impact</div>
<div class="item" data-value="Lobster">Lobster</div>
<div class="item" data-value="Indie Flower">Indie Flower</div>
<div class="item" data-value="Gloria Hallelujah">Gloria Hallelujah</div>
</div>
</div>
</div>
<!--<div class="field">
<label>Size</label>
<input placeholder="14" value="14" type="text" id="inputSize">
</div>-->
<div class="field">
<label>Color</label>
<div class="ui selection dropdown fluid">
<input name="color" type="hidden" id="inputColor" value="red">
<div class="default text">Red</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="black">Black</div>
<div class="item" data-value="white">White</div>
<div class="item" data-value="red">Red</div>
<div class="item" data-value="orange">Orange</div>
<div class="item" data-value="blue">Blue</div>
<div class="item" data-value="green">Green</div>
<div class="item" data-value="aqua">Aqua</div>
</div>
</div>
</div>
<a href="#" id="addTextButton">
<div class="ui orange button">
<i class="add sign icon"></i> Add Text
</div>
</a>
</div>
<!-- form -->
</div>
<div class="title">
<i class="dropdown icon"></i>
<i class="icon photo"></i> Add Image
</div>
<div class="content">
<a href="#" id="libraryButton">
<div class="ui orange button">
<i class="block layout icon"></i> from Library
</div>
</a>
<p>OR</p>
<input type="file" id="imgLoader" class="imgLoader" />
<label for="imgLoader">
<div class="ui orange button">
<i class="upload disk icon"></i>
Upload Image
</div>
</label>
<p>Supported files: JPG, JPEG, PNG</p>
</div>
</div>
</div>
<div class="eight wide column">
<div class="canvas">
<canvas id="c" width="450" height="700"></canvas>
</div>
</div>
<div class="four wide column">
<div id="boxEdit">
<div class="ui top tertiary inverted attached segment">
<p>EDIT</p>
</div>
<div class="ui bottom attached segment">
<p>Select object to edit or Add new object from left menu.</p>
</div>
</div>
<!-- .boxEditImage -->
<div id="boxEditText">
<div class="ui top orange inverted attached segment">
<p>EDIT : Text</p>
</div>
<div class="ui bottom attached segment">
<div class="ui form">
<div class="field">
<label>Text:</label>
<div class="ui left labeled input">
<input placeholder="Text" type="text" id="editText">
</div>
</div>
<div class="field">
<label>Font</label>
<div class="ui selection dropdown fluid" id="uiEditFont">
<input name="gender" type="hidden" id="editFont">
<div class="default text">select</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="Arial">Arial</div>
<div class="item" data-value="Impact">Impact</div>
<div class="item" data-value="Lobster">Lobster</div>
<div class="item" data-value="Indie Flower">Indie Flower</div>
<div class="item" data-value="Gloria Hallelujah">Gloria Hallelujah</div>
</div>
</div>
</div>
<!--<div class="field">
<label>Size</label>
<input placeholder="14" value="14" type="text" id="editSize">
</div>-->
<div class="field">
<label>Color</label>
<div class="ui selection dropdown fluid" id="uiEditColor">
<input name="gender" type="hidden" id="editColor">
<div class="default text">Red</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="black">Black</div>
<div class="item" data-value="white">White</div>
<div class="item" data-value="red">Red</div>
<div class="item" data-value="orange">Orange</div>
<div class="item" data-value="blue">Blue</div>
<div class="item" data-value="green">Green</div>
<div class="item" data-value="aqua">Aqua</div>
</div>
</div>
</div>
<a href="#" id="updateTextButton">
<div class="ui orange button">
<i class="checkmark icon"></i> Update
</div>
</a>
<a href="#" class="trashButton">
<div class="ui icon button black">
<i class="trash icon"></i>
</div>
</a>
</div>
<!-- form -->
</div>
</div>
<!-- .boxEditText -->
<div id="boxEditImage">
<div class="ui top orange inverted attached segment">
<p>EDIT : Image</p>
</div>
<div class="ui bottom attached segment">
<p>Use rectangle control around image to move / scale / rotate.</p>
<a href="#" class="trashButton">
<div class="ui icon button black">
<i class="trash icon"></i>
</div>
</a>
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0