ngohungcuong.windy@gmail.com / T-Shats Frontend

Download as
Browse Code »

Commit e4a2f2dbc674071924f78a71c7f40c765b8d474b

Authored by TRUONG
2 parents e5669639a3 8eafc64c46
Exists in master and in 1 other branch develop

merge conflict 

Merge branch 'master' of timesfun.net:TRUONG/t-shats

Showing 6 changed files Side-by-side Diff

... ... @@ -46,7 +46,7 @@
46 46 <script src="bower_components/json3/lib/json3.min.js"></script>
47 47 <![endif]-->
48 48 <script type="text/javascript">
49   - var VERSION = '17-11_02';
  49 + var VERSION = '17-11_03';
50 50 var require = {
51 51 urlArgs: "ver="+VERSION,
52 52 };
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ e4a2f2d
... ... @@ -6,17 +6,16 @@
6 6 fabric.Object.prototype.transparentCorners = false;
7 7  
8 8 canvas.on('after:render', function() {
  9 + console.log('after render');
9 10 });
10 11 canvas.on({
11   - 'object:added': onIllustrationAdded,
12   - 'object:moving': onIllustrationChange,
13   - 'object:scaling': onIllustrationChange,
14   - 'object:rotating': onIllustrationChange,
15   - 'object:selected': onIllustrationSelected,
16   - 'object:modified': onIllustrationModifield,
17   - 'selected:deselected' : onIllustrationOut,
18   - //'selected:out' : onIllustrationOut,
19   - //'mouse:up' : onIllustrationOut,
  12 + 'object:added' : onIllustrationAdded,
  13 + 'object:moving' : onIllustrationChange,
  14 + 'object:scaling' : onIllustrationChange,
  15 + 'object:rotating' : onIllustrationChange,
  16 + 'object:selected' : onObjectSelected,
  17 + 'object:modified' : onIllustrationModifield,
  18 + 'selection:cleared' : onObjectOut,
20 19 });
21 20  
22 21 var currentObj;
... ... @@ -26,6 +25,7 @@
26 25 var indexCurr2 = 0;
27 26 var actionObj = false;
28 27 var refreshObj = true;
  28 + var spacingNum = 0;
29 29  
30 30 function onIllustrationAdded(options){
31 31 var object = options.target;
... ... @@ -92,8 +92,9 @@
92 92  
93 93 }
94 94  
95   - function onIllustrationOut() {
96   - console.log('out object');
  95 + function onObjectOut() {
  96 + delete currentObj;
  97 + $scope.designTextValue = '';
97 98 }
98 99  
99 100 function undoCanvas() {
100 101  
... ... @@ -137,17 +138,19 @@
137 138 currentObj.setCoords();
138 139 canvas.renderAll();
139 140 }
140   -
141   - $scope.currentObject = null;
142   - function onIllustrationSelected(options) {
143   - var object = options.target;
144   - $scope.typeObject = object.type;
  141 +
  142 + function onObjectSelected(options) {
  143 + var currentObj = options.target;
  144 + console.log(currentObj.text);
  145 + $scope.typeObject = currentObj.type;
145 146 switch ($scope.typeObject) {
146 147 case 'i-text' :
147 148 $rootScope.isShowLeftPanel = 'text';
148   - $('#input-design-text').focus(function() {
149   -
150   - });
  149 + var text = currentObj.text;
  150 + if(text != '') {
  151 + $scope.designText = text;
  152 + $scope.designTextValue = text;
  153 + }
151 154 break;
152 155  
153 156 case 'path-group' :
154 157  
155 158  
156 159  
157 160  
158 161  
159 162  
160 163  
161 164  
162 165  
163 166  
... ... @@ -264,47 +267,69 @@
264 267 };
265 268  
266 269 // layer process
267   - $scope.layerProcess = function(mode){
268   - var activeObject = canvas.getActiveObject()
  270 + $scope.layerProcess = function(mode) {
  271 + // console.log('layerProcess');
  272 + var activeObject = canvas.getActiveObject();
  273 +
  274 + console.log(activeObject);
  275 +
269 276 if (activeObject){
270 277 switch (mode) {
271 278 case 1:
  279 + // canvas.bringForward(activeObject);
272 280 activeObject.bringForward();
273 281 break;
274 282 case 2:
  283 + // canvas.sendBackwards(activeObject);
275 284 activeObject.sendBackwards();
276 285 break;
277 286 case 3:
  287 + // canvas.bringToFront(activeObject);
278 288 activeObject.bringToFront();
279 289 break;
280 290 case 4:
  291 + // canvas.sendToBack(activeObject);
281 292 activeObject.sendToBack();
282 293 break;
283 294 }
284 295 canvas.renderAll();
285 296 }
286 297 };
287   -
288 298  
289   -
290   - $scope.focusInputText = function() {
291   - if($scope.typeObject != 'i-text')
  299 + $scope.focusInputText = function(text) {
  300 + currentObj = canvas.getActiveObject();
  301 + if(typeof currentObj == 'undefined' || currentObj == null) {
292 302 $scope.iText = new fabric.IText('', {
293 303 left: 150,
294 304 top: 200,
295 305 fontFamily: 'Arial',
296 306 fontWeight: 'normal',
  307 + textAlign: 'center',
297 308 fontSize: 28,
298 309 fill: 'black'
299 310 });
  311 + } else {
  312 + if(currentObj.type != 'i-text') {
  313 + $scope.iText = new fabric.IText('', {
  314 + left: 150,
  315 + top: 200,
  316 + fontFamily: 'Arial',
  317 + fontWeight: 'normal',
  318 + textAlign: 'center',
  319 + fontSize: 28,
  320 + fill: 'black'
  321 + });
  322 + } else{
  323 + $scope.iText = currentObj;
  324 + }
  325 + }
300 326 };
301 327  
302 328 //Design text
303 329 $scope.inputText = function(e) {
304   - var iText = $scope.iText;
305   - if(e != '') {
  330 + if(typeof $scope.iText != "undefined") {
  331 + var iText = $scope.iText;
306 332 iText.text = e;
307   - iText.set().setCoords();
308 333 canvas.add(iText);
309 334 canvas.renderAll();
310 335 canvas.setActiveObject(iText);
311 336  
312 337  
313 338  
314 339  
315 340  
316 341  
317 342  
... ... @@ -312,31 +337,29 @@
312 337 };
313 338 $scope.setFontFamily = function(font) {
314 339 if(canvas.getActiveObject()) {
315   - var currentObject = canvas.getActiveObject();
316   - if(currentObject.type == 'i-text') {
317   - currentObject.set('fontFamily', font);
  340 + var currentObj = canvas.getActiveObject();
  341 + if(currentObj.type == 'i-text') {
  342 + currentObj.set('fontFamily', font);
318 343 canvas.renderAll();
319   - canvas.setActiveObject(currentObject);
  344 + canvas.setActiveObject(currentObj);
320 345 }
321 346  
322 347 }
323 348 };
324 349 //Set letter spacing text
325   - var spacingNum = 0;
326 350 $scope.setLetterSpacingText = function(e) {
327 351 if(canvas.getActiveObject()) {
328   - var currentObject = canvas.getActiveObject();
329   - if(currentObject.type == 'i-text') {
  352 + var currentObj = canvas.getActiveObject();
  353 + if(currentObj.type == 'i-text') {
330 354 if(e == 'plus')
331 355 spacingNum = spacingNum + 30;
332   - else if (spacingNum>=30){
  356 + else if (spacingNum >= 30){
333 357 spacingNum = spacingNum - 30;
334 358 }
335   - currentObject.set('charSpacing', spacingNum);
  359 + currentObj.set('charSpacing', spacingNum);
336 360 canvas.renderAll();
337   - canvas.setActiveObject(currentObject);
  361 + canvas.setActiveObject(currentObj);
338 362 }
339   -
340 363 }
341 364 }
342 365  
... ... @@ -362,6 +385,18 @@
362 385 }
363 386 reader.readAsDataURL(e.target.files[0]);
364 387 }
  388 +
  389 + //Traslation text
  390 + $scope.rotateText = function(style) {
  391 + if(canvas.getActiveObject()) {
  392 + var currentObj = canvas.getActiveObject();
  393 + if(currentObj.type == 'i-text') {
  394 + currentObj.set('rotate', Math.PI / 4);
  395 + canvas.renderAll();
  396 + canvas.setActiveObject(currentObj);
  397 + }
  398 + }
  399 + };
365 400 });
366 401 });
app/views/design_part/text.html
Diff comments   View file @ e4a2f2d
... ... @@ -5,7 +5,7 @@
5 5 </div>
6 6 <div class="content clearfix">
7 7 <div>
8   - <input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">
  8 + <input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText(designText)" ng-change="inputText(designText)" ng-model="designText" ng-value="designTextValue">
9 9 </div>
10 10 <div>
11 11 <ul class="font-family-box">
... ... @@ -13,7 +13,7 @@
13 13 </ul>
14 14 </div>
15 15 <div>
16   - <div>文字を変形する</div>
  16 + <div ng-click="rotateText('1')">文字を変形する</div>
17 17 </div>
18 18 <div class="clearfix spacing-letter ">
19 19 <div class="pull-left text-label">
... ... @@ -9,7 +9,7 @@
9 9 ga('send', 'pageview');</script><script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script><script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script><script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script><!--[if lt IE 9]>
10 10 <script src="bower_components/es5-shim/es5-shim.js"></script>
11 11 <script src="bower_components/json3/lib/json3.min.js"></script>
12   - <![endif]--><script type="text/javascript">var VERSION = '17-11_01';
  12 + <![endif]--><script type="text/javascript">var VERSION = '17-11_03';
13 13 var require = {
14 14 urlArgs: "ver="+VERSION,
15 15 };</script><script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
dist/scripts/controllers/tshirtdesign.js
Diff comments   View file @ e4a2f2d
1   -define(["app"],function(app){app.controller("TshirtdesignCtrl",function($scope,$rootScope,$illustration){function onIllustrationAdded(options){var object=options.target;console.log("object:added"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),console.log(object.originalState),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,refreshObj=!0}function onIllustrationModifield(options){var objOffset=canvas.getActiveObject().getBoundingRect(),cH=canvas.height,cW=canvas.width,H0=50,W0=50;if(objOffset.left<W0-objOffset.width||objOffset.left>cW-W0||objOffset.top<H0-objOffset.height||objOffset.top>cH-H0){if(!confirm("削除してもよろしいですか"))return void undoCanvas();canvas.getActiveObject().remove()}var object=options.target;console.log("object:modified"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,console.log(stateObj),refreshObj=!0}function onIllustrationChange(options){}function onIllustrationOut(){console.log("out object")}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&&currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onIllustrationSelected(options){var object=options.target;switch($scope.typeObject=object.type,$scope.typeObject){case"i-text":$rootScope.isShowLeftPanel="text",$("#input-design-text").focus(function(){});break;case"path-group":$rootScope.isShowLeftPanel="illustration";break;default:$rootScope.isShowLeftPanel="default"}$rootScope.safeApply()}var canvas=new fabric.Canvas("main-design-container");fabric.Object.prototype.transparentCorners=!1,canvas.on("after:render",function(){}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onIllustrationSelected,"object:modified":onIllustrationModifield,"selected:deselected":onIllustrationOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0;$scope.currentObject=null,$scope.changeIllustrationCategory=function(currentIllustration){$scope.currentIllustrationCate=$illustration.getList(currentIllustration)},$scope.insertSvg=function(item){fabric.loadSVGFromURL(item.path,function(objects,options){var shape=fabric.util.groupSVGElements(objects,options);canvas.add(shape.scale(.6)),shape.set({left:150,top:200}).setCoords(),canvas.renderAll(),canvas.setActiveObject(shape)})},$scope.listColorPatterns=["#000000","#ffff00","#ff6600","#ff0000","#ff6262","#ffa19c","#ff9933","#c45d01","#5d2b03","#ffffcc","#ffff99","#ffd500","#c0db50","#21a52a","#00663f","#abfcab","#36ffaa","#89eaea","#00938c","#005450","#0badff","#006cff","#839aff","#0410a0","#ffb2ff","#f93fff","#6600ca","#ff6699","#999999","#666666","#333333"],$scope.listFontFamily=[{name:"GN Aki iro Sesami Cookies",slug:"gn_aki_iro_sesami_cookies"},{name:"GN-Fuyu-iro_Script_Bold",slug:"gn_fuyu_iro_script_bold"},{name:"GN Killgothic U Kanana",slug:"gn_killgothic_u_kanana"},{name:"GN-Kin-iro_Alphabet_Cookies",slug:"gn_kin_iro_alphabet_cookies"},{name:"GN-Kin-iro_SansSerif",slug:"gn_kin_iro_sansserif"},{name:"GN-Koharuiro_Sunray",slug:"gn_koharuiro_sunray"},{name:"GN-Kyu-pin",slug:"gn_kyu_pin"},{name:"gn_natsu_iro_schedule",slug:"gn_natsu_iro_schedule"},{name:"gnkana_kiniro_sansserif_l",slug:"gnkana_kiniro_sansserif_l"},{name:"gnkana_kiniro_sansserif_st",slug:"gnkana_kiniro_sansserif_st"},{name:"gnkana_kon_iro_nightfall",slug:"gnkana_kon_iro_nightfall"},{name:"ms_gothic",slug:"ms_gothic"},{name:"msmincho",slug:"msmincho"},{name:"ufonts_com_ms_pgothic",slug:"ufonts_com_ms_pgothic"}],$scope.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$scope.layerProcess=function(mode){var activeObject=canvas.getActiveObject();if(activeObject){switch(mode){case 1:activeObject.bringForward();break;case 2:activeObject.sendBackwards();break;case 3:activeObject.bringToFront();break;case 4:activeObject.sendToBack()}canvas.renderAll()}},$scope.focusInputText=function(){"i-text"!=$scope.typeObject&&($scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",fontSize:28,fill:"black"}))},$scope.inputText=function(e){var iText=$scope.iText;""!=e&&(iText.text=e,iText.set().setCoords(),canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText))},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObject=canvas.getActiveObject();"i-text"==currentObject.type&&(currentObject.set("fontFamily",font),canvas.renderAll(),canvas.setActiveObject(currentObject))}};var spacingNum=0;$scope.setLetterSpacingText=function(e){if(canvas.getActiveObject()){var currentObject=canvas.getActiveObject();"i-text"==currentObject.type&&("plus"==e?spacingNum+=30:spacingNum>=30&&(spacingNum-=30),currentObject.set("charSpacing",spacingNum),canvas.renderAll(),canvas.setActiveObject(currentObject))}}})});
  1 +define(["app"],function(app){app.controller("TshirtdesignCtrl",function($scope,$rootScope,$illustration){function onIllustrationAdded(options){var object=options.target;console.log("object:added"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),console.log(object.originalState),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,refreshObj=!0}function onIllustrationModifield(options){var objOffset=canvas.getActiveObject().getBoundingRect(),cH=canvas.height,cW=canvas.width,H0=50,W0=50;if(objOffset.left<W0-objOffset.width||objOffset.left>cW-W0||objOffset.top<H0-objOffset.height||objOffset.top>cH-H0){if(!confirm("削除してもよろしいですか"))return void undoCanvas();canvas.getActiveObject().remove()}var object=options.target;console.log("object:modified"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,console.log(stateObj),refreshObj=!0}function onIllustrationChange(options){}function onObjectOut(){delete currentObj,$scope.designTextValue=""}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&&currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onObjectSelected(options){var currentObj=options.target;switch(console.log(currentObj.text),$scope.typeObject=currentObj.type,$scope.typeObject){case"i-text":$rootScope.isShowLeftPanel="text";var text=currentObj.text;""!=text&&($scope.designText=text,$scope.designTextValue=text);break;case"path-group":$rootScope.isShowLeftPanel="illustration";break;default:$rootScope.isShowLeftPanel="default"}$rootScope.safeApply()}var canvas=new fabric.Canvas("main-design-container");fabric.Object.prototype.transparentCorners=!1,canvas.on("after:render",function(){console.log("after render")}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onObjectSelected,"object:modified":onIllustrationModifield,"selection:cleared":onObjectOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0,spacingNum=0;$scope.changeIllustrationCategory=function(currentIllustration){$scope.currentIllustrationCate=$illustration.getList(currentIllustration)},$scope.insertSvg=function(item){fabric.loadSVGFromURL(item.path,function(objects,options){var shape=fabric.util.groupSVGElements(objects,options);canvas.add(shape.scale(.6)),shape.set({left:150,top:200}).setCoords(),canvas.renderAll(),canvas.setActiveObject(shape)})},$scope.listColorPatterns=["#000000","#ffff00","#ff6600","#ff0000","#ff6262","#ffa19c","#ff9933","#c45d01","#5d2b03","#ffffcc","#ffff99","#ffd500","#c0db50","#21a52a","#00663f","#abfcab","#36ffaa","#89eaea","#00938c","#005450","#0badff","#006cff","#839aff","#0410a0","#ffb2ff","#f93fff","#6600ca","#ff6699","#999999","#666666","#333333"],$scope.listFontFamily=[{name:"GN Aki iro Sesami Cookies",slug:"gn_aki_iro_sesami_cookies"},{name:"GN-Fuyu-iro_Script_Bold",slug:"gn_fuyu_iro_script_bold"},{name:"GN Killgothic U Kanana",slug:"gn_killgothic_u_kanana"},{name:"GN-Kin-iro_Alphabet_Cookies",slug:"gn_kin_iro_alphabet_cookies"},{name:"GN-Kin-iro_SansSerif",slug:"gn_kin_iro_sansserif"},{name:"GN-Koharuiro_Sunray",slug:"gn_koharuiro_sunray"},{name:"GN-Kyu-pin",slug:"gn_kyu_pin"},{name:"gn_natsu_iro_schedule",slug:"gn_natsu_iro_schedule"},{name:"gnkana_kiniro_sansserif_l",slug:"gnkana_kiniro_sansserif_l"},{name:"gnkana_kiniro_sansserif_st",slug:"gnkana_kiniro_sansserif_st"},{name:"gnkana_kon_iro_nightfall",slug:"gnkana_kon_iro_nightfall"},{name:"ms_gothic",slug:"ms_gothic"},{name:"msmincho",slug:"msmincho"},{name:"ufonts_com_ms_pgothic",slug:"ufonts_com_ms_pgothic"}],$scope.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$scope.layerProcess=function(mode){var activeObject=canvas.getActiveObject();if(console.log(activeObject),activeObject){switch(mode){case 1:activeObject.bringForward();break;case 2:activeObject.sendBackwards();break;case 3:activeObject.bringToFront();break;case 4:activeObject.sendToBack()}canvas.renderAll()}},$scope.focusInputText=function(text){currentObj=canvas.getActiveObject(),"undefined"==typeof currentObj||null==currentObj?$scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",textAlign:"center",fontSize:28,fill:"black"}):"i-text"!=currentObj.type?$scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",textAlign:"center",fontSize:28,fill:"black"}):$scope.iText=currentObj},$scope.inputText=function(e){if("undefined"!=typeof $scope.iText){var iText=$scope.iText;iText.text=e,canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText)}},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&(currentObj.set("fontFamily",font),canvas.renderAll(),canvas.setActiveObject(currentObj))}},$scope.setLetterSpacingText=function(e){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&("plus"==e?spacingNum+=30:spacingNum>=30&&(spacingNum-=30),currentObj.set("charSpacing",spacingNum),canvas.renderAll(),canvas.setActiveObject(currentObj))}},$scope.rotateText=function(style){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&(currentObj.set("rotate",Math.PI/4),canvas.renderAll(),canvas.setActiveObject(currentObj))}}})});
dist/views/design_part/text.html
Diff comments   View file @ e4a2f2d
... ... @@ -5,7 +5,7 @@
5 5 </div>
6 6 <div class="content clearfix">
7 7 <div>
8   - <input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">
  8 + <input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText(designText)" ng-change="inputText(designText)" ng-model="designText" ng-value="designTextValue">
9 9 </div>
10 10 <div>
11 11 <ul class="font-family-box">
... ... @@ -13,7 +13,7 @@
13 13 </ul>
14 14 </div>
15 15 <div>
16   - <div>文字を変形する</div>
  16 + <div ng-click="rotateText('1')">文字を変形する</div>
17 17 </div>
18 18 <div class="clearfix spacing-letter ">
19 19 <div class="pull-left text-label">