Commit 8eafc64c46e17ef290f18d391400ecb1bd9fef32
1 parent
92271fd7c0
Exists in
master
and in
1 other branch
Deploy
Showing 4 changed files with 5 additions and 5 deletions Inline Diff
app/index.html
1 | <!doctype html> | 1 | <!doctype html> |
2 | <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--> | 2 | <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--> |
3 | <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--> | 3 | <!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--> |
4 | <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]--> | 4 | <!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]--> |
5 | <head> | 5 | <head> |
6 | <meta charset="utf-8"> | 6 | <meta charset="utf-8"> |
7 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> | 7 | <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
8 | <title></title> | 8 | <title></title> |
9 | <meta name="description" content=""> | 9 | <meta name="description" content=""> |
10 | <meta name="viewport" content="width=device-width"> | 10 | <meta name="viewport" content="width=device-width"> |
11 | <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> | 11 | <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> |
12 | <!-- build:css styles/vendor.css --> | 12 | <!-- build:css styles/vendor.css --> |
13 | <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> | 13 | <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" /> |
14 | <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" /> | 14 | <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" /> |
15 | <link rel="stylesheet" href="bower_components/select2/select2.css"> | 15 | <link rel="stylesheet" href="bower_components/select2/select2.css"> |
16 | <!-- bower:css --> | 16 | <!-- bower:css --> |
17 | <!-- endbower --> | 17 | <!-- endbower --> |
18 | <!-- endbuild --> | 18 | <!-- endbuild --> |
19 | <!-- build:css({.tmp,app}) styles/main.css --> | 19 | <!-- build:css({.tmp,app}) styles/main.css --> |
20 | <link rel="stylesheet" href="styles/main.css"> | 20 | <link rel="stylesheet" href="styles/main.css"> |
21 | <!-- endbuild --> | 21 | <!-- endbuild --> |
22 | </head> | 22 | </head> |
23 | <body ng-app="tshatsApp"> | 23 | <body ng-app="tshatsApp"> |
24 | <!--[if lt IE 7]> | 24 | <!--[if lt IE 7]> |
25 | <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> | 25 | <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
26 | <![endif]--> | 26 | <![endif]--> |
27 | 27 | ||
28 | <!-- Add your site or application content here --> | 28 | <!-- Add your site or application content here --> |
29 | <div class="container" ng-view></div> | 29 | <div class="container" ng-view></div> |
30 | 30 | ||
31 | <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> | 31 | <!-- Google Analytics: change UA-XXXXX-X to be your site's ID --> |
32 | <script> | 32 | <script> |
33 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | 33 | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
34 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | 34 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
35 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | 35 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
36 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | 36 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
37 | 37 | ||
38 | ga('create', 'UA-XXXXX-X'); | 38 | ga('create', 'UA-XXXXX-X'); |
39 | ga('send', 'pageview'); | 39 | ga('send', 'pageview'); |
40 | </script> | 40 | </script> |
41 | <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> | 41 | <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script> |
42 | <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script> | 42 | <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script> |
43 | <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> | 43 | <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> |
44 | <!--[if lt IE 9]> | 44 | <!--[if lt IE 9]> |
45 | <script src="bower_components/es5-shim/es5-shim.js"></script> | 45 | <script src="bower_components/es5-shim/es5-shim.js"></script> |
46 | <script src="bower_components/json3/lib/json3.min.js"></script> | 46 | <script src="bower_components/json3/lib/json3.min.js"></script> |
47 | <![endif]--> | 47 | <![endif]--> |
48 | <script type="text/javascript"> | 48 | <script type="text/javascript"> |
49 | var VERSION = '17-11_02'; | 49 | var VERSION = '17-11_03'; |
50 | var require = { | 50 | var require = { |
51 | urlArgs: "ver="+VERSION, | 51 | urlArgs: "ver="+VERSION, |
52 | }; | 52 | }; |
53 | </script> | 53 | </script> |
54 | <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> | 54 | <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> |
55 | </body> | 55 | </body> |
56 | </html> | 56 | </html> |
57 | 57 |
dist/index.html
1 | <!doctype html><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--><!--[if gt IE 8]><!--><html class="no-js" ng-app=""><!--<![endif]--><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width"><!-- Place favicon.ico and apple-touch-icon.png in the root directory --><link rel="stylesheet" href="styles/271347a9.vendor.css"><link rel="stylesheet" href="styles/e87ab03f.main.css"><body ng-app="tshatsApp"><!--[if lt IE 7]> | 1 | <!doctype html><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--><!--[if gt IE 8]><!--><html class="no-js" ng-app=""><!--<![endif]--><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width"><!-- Place favicon.ico and apple-touch-icon.png in the root directory --><link rel="stylesheet" href="styles/271347a9.vendor.css"><link rel="stylesheet" href="styles/e87ab03f.main.css"><body ng-app="tshatsApp"><!--[if lt IE 7]> |
2 | <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> | 2 | <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> |
3 | <![endif]--><!-- Add your site or application content here --><div class="container" ng-view=""></div><!-- Google Analytics: change UA-XXXXX-X to be your site's ID --><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | 3 | <![endif]--><!-- Add your site or application content here --><div class="container" ng-view=""></div><!-- Google Analytics: change UA-XXXXX-X to be your site's ID --><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ |
4 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | 4 | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), |
5 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | 5 | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) |
6 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | 6 | })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); |
7 | 7 | ||
8 | ga('create', 'UA-XXXXX-X'); | 8 | ga('create', 'UA-XXXXX-X'); |
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]> | 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 | <script src="bower_components/es5-shim/es5-shim.js"></script> | 10 | <script src="bower_components/es5-shim/es5-shim.js"></script> |
11 | <script src="bower_components/json3/lib/json3.min.js"></script> | 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 | var require = { | 13 | var require = { |
14 | urlArgs: "ver="+VERSION, | 14 | urlArgs: "ver="+VERSION, |
15 | };</script><script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> | 15 | };</script><script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> |
dist/scripts/controllers/tshirtdesign.js
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&¤tObj.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&¤tObj.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
1 | <li> | 1 | <li> |
2 | <div class="title"> | 2 | <div class="title"> |
3 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | 3 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> |
4 | 文字入力 | 4 | 文字入力 |
5 | </div> | 5 | </div> |
6 | <div class="content clearfix"> | 6 | <div class="content clearfix"> |
7 | <div> | 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 | </div> | 9 | </div> |
10 | <div> | 10 | <div> |
11 | <ul class="font-family-box"> | 11 | <ul class="font-family-box"> |
12 | <li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li> | 12 | <li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li> |
13 | </ul> | 13 | </ul> |
14 | </div> | 14 | </div> |
15 | <div> | 15 | <div> |
16 | <div>文字を変形する</div> | 16 | <div ng-click="rotateText('1')">文字を変形する</div> |
17 | </div> | 17 | </div> |
18 | <div class="clearfix spacing-letter "> | 18 | <div class="clearfix spacing-letter "> |
19 | <div class="pull-left text-label"> | 19 | <div class="pull-left text-label"> |
20 | 文字間隔 : | 20 | 文字間隔 : |
21 | </div> | 21 | </div> |
22 | <div class="pull-right"> | 22 | <div class="pull-right"> |
23 | <div class="box clearfix"> | 23 | <div class="box clearfix"> |
24 | <div class="item item-plus" ng-click="setLetterSpacingText('plus')"> | 24 | <div class="item item-plus" ng-click="setLetterSpacingText('plus')"> |
25 | <i class="fa fa-plus-square-o" aria-hidden="true"></i> | 25 | <i class="fa fa-plus-square-o" aria-hidden="true"></i> |
26 | </div> | 26 | </div> |
27 | <div class="item item-text"> | 27 | <div class="item item-text"> |
28 | リセット | 28 | リセット |
29 | </div> | 29 | </div> |
30 | <div class="item item-minus" ng-click="setLetterSpacingText('minus')"> | 30 | <div class="item item-minus" ng-click="setLetterSpacingText('minus')"> |
31 | <i class="fa fa-minus-square-o" aria-hidden="true"></i> | 31 | <i class="fa fa-minus-square-o" aria-hidden="true"></i> |
32 | </div> | 32 | </div> |
33 | </div> | 33 | </div> |
34 | </div> | 34 | </div> |
35 | </div> | 35 | </div> |
36 | </div> | 36 | </div> |
37 | </li> | 37 | </li> |
38 | <li> | 38 | <li> |
39 | <div class="title"> | 39 | <div class="title"> |
40 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | 40 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> |
41 | カラー変更 | 41 | カラー変更 |
42 | <!--<div class="pull-right">元の色に戻す</div>--> | 42 | <!--<div class="pull-right">元の色に戻す</div>--> |
43 | </div> | 43 | </div> |
44 | <div class="content clearfix"> | 44 | <div class="content clearfix"> |
45 | <div class="color-patterns"> | 45 | <div class="color-patterns"> |
46 | <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"> | 46 | <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"> |
47 | </div> | 47 | </div> |
48 | <div class="clearfix"></div> | 48 | <div class="clearfix"></div> |
49 | </div> | 49 | </div> |
50 | </div> | 50 | </div> |
51 | </li> | 51 | </li> |
52 | 52 | ||
53 | <li> | 53 | <li> |
54 | <div class="title"> | 54 | <div class="title"> |
55 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> | 55 | <!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>--> |
56 | 重ね順変更 | 56 | 重ね順変更 |
57 | </div> | 57 | </div> |
58 | <div class="content clearfix"> | 58 | <div class="content clearfix"> |
59 | <div class="col-xs-3 layer-item" ng-click="layerProcess(1)"> | 59 | <div class="col-xs-3 layer-item" ng-click="layerProcess(1)"> |
60 | <img src="images/layer-icon-1.png"/> | 60 | <img src="images/layer-icon-1.png"/> |
61 | <div>前面へ</div> | 61 | <div>前面へ</div> |
62 | </div> | 62 | </div> |
63 | <div class="col-xs-3 layer-item" ng-click="layerProcess(2)"> | 63 | <div class="col-xs-3 layer-item" ng-click="layerProcess(2)"> |
64 | <img src="images/layer-icon-2.png"/> | 64 | <img src="images/layer-icon-2.png"/> |
65 | <div>背面へ</div> | 65 | <div>背面へ</div> |
66 | </div> | 66 | </div> |
67 | <div class="col-xs-3 layer-item" ng-click="layerProcess(3)"> | 67 | <div class="col-xs-3 layer-item" ng-click="layerProcess(3)"> |
68 | <img src="images/layer-icon-3.png"/> | 68 | <img src="images/layer-icon-3.png"/> |
69 | <div>最前面へ</div> | 69 | <div>最前面へ</div> |
70 | </div> | 70 | </div> |
71 | <div class="col-xs-3 layer-item" ng-click="layerProcess(4)"> | 71 | <div class="col-xs-3 layer-item" ng-click="layerProcess(4)"> |
72 | <img src="images/layer-icon-4.png"/> | 72 | <img src="images/layer-icon-4.png"/> |
73 | <div>最前面へ</div> | 73 | <div>最前面へ</div> |
74 | </div> | 74 | </div> |
75 | </div> | 75 | </div> |
76 | </li> | 76 | </li> |
77 | 77 |