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

Download as
Browse Code »

Commit 3ab3e50f83aa5c2af4524823336ec206321b25d8

Authored by TRUONG
1 parent 010854c35d
Exists in master and in 1 other branch develop

update, fix trash icon

Showing 5 changed files with 5 additions and 4 deletions Inline Diff

app/images/trash-hover.png
Diff comments   View file @ 3ab3e50

2.77 KB
app/images/trash.png
Diff comments   View file @ 3ab3e50

7.82 KB | W: | H:

2.46 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
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 = '21-11_04'; 49 var VERSION = '22-11_01';
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
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 3ab3e50
1 define(['app'], function (app) { 1 define(['app'], function (app) {
2 //'use strict'; 2 //'use strict';
3 3
4 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) { 4 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
5 var canvas = new fabric.Canvas('main-design-container'); 5 var canvas = new fabric.Canvas('main-design-container');
6 fabric.Object.prototype.transparentCorners = false; 6 fabric.Object.prototype.transparentCorners = false;
7 7
8 canvas.on('after:render', function() { 8 canvas.on('after:render', function() {
9 // console.log('after render'); 9 // console.log('after render');
10 }); 10 });
11 canvas.on({ 11 canvas.on({
12 'object:added' : onIllustrationAdded, 12 'object:added' : onIllustrationAdded,
13 'object:moving' : onIllustrationMoving, 13 'object:moving' : onIllustrationMoving,
14 'object:scaling' : onIllustrationChange, 14 'object:scaling' : onIllustrationChange,
15 'object:rotating' : onIllustrationChange, 15 'object:rotating' : onIllustrationChange,
16 'object:selected' : onObjectSelected, 16 'object:selected' : onObjectSelected,
17 'object:modified' : onIllustrationModifield, 17 'object:modified' : onIllustrationModifield,
18 'selection:cleared' : onObjectOut, 18 'selection:cleared' : onObjectOut,
19 }); 19 });
20 20
21 var currentObj; 21 var currentObj;
22 var listObj = []; 22 var listObj = [];
23 var stateObj = []; 23 var stateObj = [];
24 var indexCurr = 0; 24 var indexCurr = 0;
25 var indexCurr2 = 0; 25 var indexCurr2 = 0;
26 var actionObj = false; 26 var actionObj = false;
27 var refreshObj = true; 27 var refreshObj = true;
28 var spacingNum = 0; 28 var spacingNum = 0;
29 29
30 function onIllustrationAdded(options){ 30 function onIllustrationAdded(options){
31 var object = options.target; 31 var object = options.target;
32 // console.log('object:added'); 32 // console.log('object:added');
33 33
34 if (actionObj === true) { 34 if (actionObj === true) {
35 stateObj = [stateObj[indexCurr2]]; 35 stateObj = [stateObj[indexCurr2]];
36 listObj = [listObj[indexCurr2]]; 36 listObj = [listObj[indexCurr2]];
37 37
38 actionObj = false; 38 actionObj = false;
39 console.log(stateObj); 39 console.log(stateObj);
40 indexCurr = 1; 40 indexCurr = 1;
41 } 41 }
42 object.saveState(); 42 object.saveState();
43 43
44 console.log(object.originalState); 44 console.log(object.originalState);
45 stateObj[indexCurr] = JSON.stringify(object.originalState); 45 stateObj[indexCurr] = JSON.stringify(object.originalState);
46 listObj[indexCurr] = object; 46 listObj[indexCurr] = object;
47 indexCurr++; 47 indexCurr++;
48 indexCurr2 = indexCurr - 1; 48 indexCurr2 = indexCurr - 1;
49 refreshObj = true; 49 refreshObj = true;
50 } 50 }
51 51
52 function onIllustrationModifield(options){ 52 function onIllustrationModifield(options){
53 // 53 //
54 var pointer = canvas.getPointer(options.e); 54 var pointer = canvas.getPointer(options.e);
55 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 55 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
56 canvas.getActiveObject().remove(); 56 canvas.getActiveObject().remove();
57 $('.design-content .trash-design').css({'opacity':'1'}); 57 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
58 return; 58 return;
59 } 59 }
60 60
61 // 61 //
62 var objOffset = canvas.getActiveObject().getBoundingRect(); 62 var objOffset = canvas.getActiveObject().getBoundingRect();
63 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; 63 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
64 //console.log(objOffset,canvas.height,canvas.width); 64 //console.log(objOffset,canvas.height,canvas.width);
65 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 65 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
66 if (confirm('削除してもよろしいですか')){ 66 if (confirm('削除してもよろしいですか')){
67 canvas.getActiveObject().remove(); 67 canvas.getActiveObject().remove();
68 }else{ 68 }else{
69 undoCanvas(); 69 undoCanvas();
70 return; 70 return;
71 } 71 }
72 } 72 }
73 73
74 var object = options.target; 74 var object = options.target;
75 // console.log('object:modified'); 75 // console.log('object:modified');
76 if (actionObj === true) { 76 if (actionObj === true) {
77 stateObj = [stateObj[indexCurr2]]; 77 stateObj = [stateObj[indexCurr2]];
78 listObj = [listObj[indexCurr2]]; 78 listObj = [listObj[indexCurr2]];
79 79
80 actionObj = false; 80 actionObj = false;
81 console.log(stateObj); 81 console.log(stateObj);
82 indexCurr = 1; 82 indexCurr = 1;
83 } 83 }
84 84
85 object.saveState(); 85 object.saveState();
86 86
87 stateObj[indexCurr] = JSON.stringify(object.originalState); 87 stateObj[indexCurr] = JSON.stringify(object.originalState);
88 listObj[indexCurr] = object; 88 listObj[indexCurr] = object;
89 indexCurr++; 89 indexCurr++;
90 indexCurr2 = indexCurr - 1; 90 indexCurr2 = indexCurr - 1;
91 // console.log(stateObj); 91 // console.log(stateObj);
92 refreshObj = true; 92 refreshObj = true;
93 } 93 }
94 94
95 function onIllustrationChange(options) { 95 function onIllustrationChange(options) {
96 // options.target.setCoords(); 96 // options.target.setCoords();
97 // canvas.forEachObject(function(obj) { 97 // canvas.forEachObject(function(obj) {
98 // if (obj === options.target) return; 98 // if (obj === options.target) return;
99 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); 99 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
100 // }); 100 // });
101 } 101 }
102 102
103 function onIllustrationMoving(options) { 103 function onIllustrationMoving(options) {
104 var pointer = canvas.getPointer(options.e); 104 var pointer = canvas.getPointer(options.e);
105 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 105 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
106 $('.design-content .trash-design').css({'opacity':'0.5'}); 106 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
107 }else{ 107 }else{
108 $('.design-content .trash-design').css({'opacity':'1'}); 108 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
109 } 109 }
110 } 110 }
111 111
112 function onObjectOut() { 112 function onObjectOut() {
113 delete currentObj; 113 delete currentObj;
114 $scope.designTextValue = ''; 114 $scope.designTextValue = '';
115 } 115 }
116 116
117 function undoCanvas() { 117 function undoCanvas() {
118 if (indexCurr <= 0) { 118 if (indexCurr <= 0) {
119 indexCurr = 0; 119 indexCurr = 0;
120 return; 120 return;
121 } 121 }
122 122
123 if (refreshObj === true) { 123 if (refreshObj === true) {
124 indexCurr--; 124 indexCurr--;
125 refreshObj = false; 125 refreshObj = false;
126 } 126 }
127 127
128 console.log('undo'); 128 console.log('undo');
129 129
130 indexCurr2 = indexCurr - 1; 130 indexCurr2 = indexCurr - 1;
131 currentObj = listObj[indexCurr2]; 131 currentObj = listObj[indexCurr2];
132 if (currentObj){ 132 if (currentObj){
133 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 133 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
134 } 134 }
135 135
136 indexCurr--; 136 indexCurr--;
137 currentObj.setCoords(); 137 currentObj.setCoords();
138 canvas.renderAll(); 138 canvas.renderAll();
139 actionObj = true; 139 actionObj = true;
140 } 140 }
141 141
142 function redoCanvas() { 142 function redoCanvas() {
143 actionObj = true; 143 actionObj = true;
144 if (indexCurr >= stateObj.length - 1) { 144 if (indexCurr >= stateObj.length - 1) {
145 return; 145 return;
146 } 146 }
147 147
148 console.log('redo'); 148 console.log('redo');
149 149
150 indexCurr2 = indexCurr + 1; 150 indexCurr2 = indexCurr + 1;
151 currentObj = listObj[indexCurr2]; 151 currentObj = listObj[indexCurr2];
152 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 152 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
153 153
154 indexCurr++; 154 indexCurr++;
155 currentObj.setCoords(); 155 currentObj.setCoords();
156 canvas.renderAll(); 156 canvas.renderAll();
157 } 157 }
158 158
159 $scope.canvasClearAll = function(){ 159 $scope.canvasClearAll = function(){
160 if (confirm('配置されたすべての文字や画像を消去します')){ 160 if (confirm('配置されたすべての文字や画像を消去します')){
161 canvas.clear(); 161 canvas.clear();
162 } 162 }
163 } 163 }
164 164
165 function onObjectSelected(options) { 165 function onObjectSelected(options) {
166 var currentObj = options.target; 166 var currentObj = options.target;
167 // console.log(currentObj.text); 167 // console.log(currentObj.text);
168 $scope.typeObject = currentObj.type; 168 $scope.typeObject = currentObj.type;
169 switch ($scope.typeObject) { 169 switch ($scope.typeObject) {
170 case 'i-text' : 170 case 'i-text' :
171 $rootScope.isShowLeftPanel = 'text'; 171 $rootScope.isShowLeftPanel = 'text';
172 var text = currentObj.text; 172 var text = currentObj.text;
173 if(text != '') { 173 if(text != '') {
174 $scope.designText = text; 174 $scope.designText = text;
175 $scope.designTextValue = text; 175 $scope.designTextValue = text;
176 } 176 }
177 break; 177 break;
178 178
179 case 'path-group' : 179 case 'path-group' :
180 $rootScope.isShowLeftPanel = 'illustration'; 180 $rootScope.isShowLeftPanel = 'illustration';
181 break; 181 break;
182 182
183 case 'image': 183 case 'image':
184 $rootScope.isShowLeftPanel = 'image'; 184 $rootScope.isShowLeftPanel = 'image';
185 break; 185 break;
186 186
187 default : 187 default :
188 $rootScope.isShowLeftPanel = 'default'; 188 $rootScope.isShowLeftPanel = 'default';
189 break; 189 break;
190 } 190 }
191 $rootScope.safeApply(); 191 $rootScope.safeApply();
192 } 192 }
193 193
194 // Illustration process 194 // Illustration process
195 $scope.changeIllustrationCategory = function(currentIllustration){ 195 $scope.changeIllustrationCategory = function(currentIllustration){
196 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 196 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
197 //console.log($scope.currentIllustrationCate); 197 //console.log($scope.currentIllustrationCate);
198 }; 198 };
199 199
200 $scope.insertSvg = function(item){ 200 $scope.insertSvg = function(item){
201 fabric.loadSVGFromURL(item.path, function(objects, options) { 201 fabric.loadSVGFromURL(item.path, function(objects, options) {
202 var shape = fabric.util.groupSVGElements(objects, options); 202 var shape = fabric.util.groupSVGElements(objects, options);
203 //shape.setFill('green'); 203 //shape.setFill('green');
204 canvas.add(shape.scale(0.6)); 204 canvas.add(shape.scale(0.6));
205 shape.set({ left: 150, top: 200 }).setCoords(); 205 shape.set({ left: 150, top: 200 }).setCoords();
206 canvas.renderAll(); 206 canvas.renderAll();
207 canvas.setActiveObject(shape); 207 canvas.setActiveObject(shape);
208 }); 208 });
209 }; 209 };
210 210
211 // color pattern 211 // color pattern
212 $scope.listColorPatterns = [ 212 $scope.listColorPatterns = [
213 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 213 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
214 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 214 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
215 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 215 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
216 '#333333' 216 '#333333'
217 ]; 217 ];
218 218
219 $scope.changeColorPattern = function(color){ 219 $scope.changeColorPattern = function(color){
220 var obj = canvas.getActiveObject(); 220 var obj = canvas.getActiveObject();
221 if (!color){ 221 if (!color){
222 color = 'none'; 222 color = 'none';
223 } 223 }
224 if (obj instanceof fabric.PathGroup) { 224 if (obj instanceof fabric.PathGroup) {
225 obj.getObjects().forEach(function(o) { 225 obj.getObjects().forEach(function(o) {
226 o.fill = color; 226 o.fill = color;
227 }); 227 });
228 } 228 }
229 else { 229 else {
230 obj.fill = color; 230 obj.fill = color;
231 } 231 }
232 canvas.renderAll(); 232 canvas.renderAll();
233 // if (canvas.getActiveObject()){ 233 // if (canvas.getActiveObject()){
234 // canvas.getActiveObject().set("fill", color); 234 // canvas.getActiveObject().set("fill", color);
235 // canvas.renderAll(); 235 // canvas.renderAll();
236 // } 236 // }
237 }; 237 };
238 238
239 //Font 239 //Font
240 $scope.listFontFamily = [ 240 $scope.listFontFamily = [
241 { 241 {
242 name : 'GN Aki iro Sesami Cookies', 242 name : 'GN Aki iro Sesami Cookies',
243 slug : 'gn_aki_iro_sesami_cookies', 243 slug : 'gn_aki_iro_sesami_cookies',
244 }, 244 },
245 { 245 {
246 name : 'GN-Fuyu-iro_Script_Bold', 246 name : 'GN-Fuyu-iro_Script_Bold',
247 slug : 'gn_fuyu_iro_script_bold' 247 slug : 'gn_fuyu_iro_script_bold'
248 }, 248 },
249 { 249 {
250 name : 'GN Killgothic U Kanana', 250 name : 'GN Killgothic U Kanana',
251 slug : 'gn_killgothic_u_kanana' 251 slug : 'gn_killgothic_u_kanana'
252 }, 252 },
253 { 253 {
254 name : 'GN-Kin-iro_Alphabet_Cookies', 254 name : 'GN-Kin-iro_Alphabet_Cookies',
255 slug : 'gn_kin_iro_alphabet_cookies' 255 slug : 'gn_kin_iro_alphabet_cookies'
256 256
257 }, 257 },
258 { 258 {
259 name : 'GN-Kin-iro_SansSerif', 259 name : 'GN-Kin-iro_SansSerif',
260 slug : 'gn_kin_iro_sansserif' 260 slug : 'gn_kin_iro_sansserif'
261 261
262 }, 262 },
263 { 263 {
264 name : 'GN-Koharuiro_Sunray', 264 name : 'GN-Koharuiro_Sunray',
265 slug : 'gn_koharuiro_sunray' 265 slug : 'gn_koharuiro_sunray'
266 266
267 }, 267 },
268 { 268 {
269 name : 'GN-Kyu-pin', 269 name : 'GN-Kyu-pin',
270 slug : 'gn_kyu_pin' 270 slug : 'gn_kyu_pin'
271 }, 271 },
272 { 272 {
273 name : 'gn_natsu_iro_schedule', 273 name : 'gn_natsu_iro_schedule',
274 slug : 'gn_natsu_iro_schedule' 274 slug : 'gn_natsu_iro_schedule'
275 275
276 }, 276 },
277 { 277 {
278 name : 'gnkana_kiniro_sansserif_l', 278 name : 'gnkana_kiniro_sansserif_l',
279 slug : 'gnkana_kiniro_sansserif_l' 279 slug : 'gnkana_kiniro_sansserif_l'
280 280
281 }, 281 },
282 { 282 {
283 name : 'gnkana_kiniro_sansserif_st', 283 name : 'gnkana_kiniro_sansserif_st',
284 slug : 'gnkana_kiniro_sansserif_st' 284 slug : 'gnkana_kiniro_sansserif_st'
285 }, 285 },
286 { 286 {
287 name : 'gnkana_kon_iro_nightfall', 287 name : 'gnkana_kon_iro_nightfall',
288 slug : 'gnkana_kon_iro_nightfall' 288 slug : 'gnkana_kon_iro_nightfall'
289 289
290 }, 290 },
291 { 291 {
292 name : 'ms_gothic', 292 name : 'ms_gothic',
293 slug : 'ms_gothic' 293 slug : 'ms_gothic'
294 294
295 }, 295 },
296 { 296 {
297 name : 'msmincho', 297 name : 'msmincho',
298 slug : 'msmincho' 298 slug : 'msmincho'
299 }, 299 },
300 { 300 {
301 name : 'ufonts_com_ms_pgothic', 301 name : 'ufonts_com_ms_pgothic',
302 slug : 'ufonts_com_ms_pgothic' 302 slug : 'ufonts_com_ms_pgothic'
303 } 303 }
304 ]; 304 ];
305 305
306 // layer process 306 // layer process
307 $scope.layerProcess = function(mode) { 307 $scope.layerProcess = function(mode) {
308 // console.log('layerProcess'); 308 // console.log('layerProcess');
309 var activeObject = canvas.getActiveObject(); 309 var activeObject = canvas.getActiveObject();
310 310
311 console.log(activeObject); 311 console.log(activeObject);
312 312
313 if (activeObject){ 313 if (activeObject){
314 switch (mode) { 314 switch (mode) {
315 case 1: 315 case 1:
316 // canvas.bringForward(activeObject); 316 // canvas.bringForward(activeObject);
317 activeObject.bringForward(); 317 activeObject.bringForward();
318 break; 318 break;
319 case 2: 319 case 2:
320 // canvas.sendBackwards(activeObject); 320 // canvas.sendBackwards(activeObject);
321 activeObject.sendBackwards(); 321 activeObject.sendBackwards();
322 break; 322 break;
323 case 3: 323 case 3:
324 // canvas.bringToFront(activeObject); 324 // canvas.bringToFront(activeObject);
325 activeObject.bringToFront(); 325 activeObject.bringToFront();
326 break; 326 break;
327 case 4: 327 case 4:
328 // canvas.sendToBack(activeObject); 328 // canvas.sendToBack(activeObject);
329 activeObject.sendToBack(); 329 activeObject.sendToBack();
330 break; 330 break;
331 } 331 }
332 canvas.deactivateAll().renderAll(); 332 canvas.deactivateAll().renderAll();
333 } 333 }
334 }; 334 };
335 335
336 $scope.focusInputText = function(text) { 336 $scope.focusInputText = function(text) {
337 currentObj = canvas.getActiveObject(); 337 currentObj = canvas.getActiveObject();
338 if(typeof currentObj == 'undefined' || currentObj == null) { 338 if(typeof currentObj == 'undefined' || currentObj == null) {
339 $scope.iText = new fabric.IText('', { 339 $scope.iText = new fabric.IText('', {
340 left: 150, 340 left: 150,
341 top: 200, 341 top: 200,
342 fontFamily: 'Arial', 342 fontFamily: 'Arial',
343 fontWeight: 'normal', 343 fontWeight: 'normal',
344 textAlign: 'center', 344 textAlign: 'center',
345 fontSize: 28, 345 fontSize: 28,
346 fill: 'black' 346 fill: 'black'
347 }); 347 });
348 } else { 348 } else {
349 if(currentObj.type != 'i-text') { 349 if(currentObj.type != 'i-text') {
350 $scope.iText = new fabric.IText('', { 350 $scope.iText = new fabric.IText('', {
351 left: 150, 351 left: 150,
352 top: 200, 352 top: 200,
353 fontFamily: 'Arial', 353 fontFamily: 'Arial',
354 fontWeight: 'normal', 354 fontWeight: 'normal',
355 textAlign: 'center', 355 textAlign: 'center',
356 fontSize: 28, 356 fontSize: 28,
357 fill: 'black' 357 fill: 'black'
358 }); 358 });
359 } else{ 359 } else{
360 $scope.iText = currentObj; 360 $scope.iText = currentObj;
361 } 361 }
362 } 362 }
363 }; 363 };
364 364
365 //Design text 365 //Design text
366 $scope.inputText = function(e) { 366 $scope.inputText = function(e) {
367 if(typeof $scope.iText != "undefined") { 367 if(typeof $scope.iText != "undefined") {
368 var iText = $scope.iText; 368 var iText = $scope.iText;
369 iText.text = e; 369 iText.text = e;
370 canvas.add(iText); 370 canvas.add(iText);
371 canvas.renderAll(); 371 canvas.renderAll();
372 canvas.setActiveObject(iText); 372 canvas.setActiveObject(iText);
373 } 373 }
374 }; 374 };
375 $scope.setFontFamily = function(font) { 375 $scope.setFontFamily = function(font) {
376 if(canvas.getActiveObject()) { 376 if(canvas.getActiveObject()) {
377 var currentObj = canvas.getActiveObject(); 377 var currentObj = canvas.getActiveObject();
378 if(currentObj.type == 'i-text') { 378 if(currentObj.type == 'i-text') {
379 currentObj.set('fontFamily', font); 379 currentObj.set('fontFamily', font);
380 canvas.renderAll(); 380 canvas.renderAll();
381 canvas.setActiveObject(currentObj); 381 canvas.setActiveObject(currentObj);
382 } 382 }
383 383
384 } 384 }
385 }; 385 };
386 //Set letter spacing text 386 //Set letter spacing text
387 $scope.setLetterSpacingText = function(e) { 387 $scope.setLetterSpacingText = function(e) {
388 if(canvas.getActiveObject()) { 388 if(canvas.getActiveObject()) {
389 var currentObj = canvas.getActiveObject(); 389 var currentObj = canvas.getActiveObject();
390 if(currentObj.type == 'i-text') { 390 if(currentObj.type == 'i-text') {
391 if(e == 'plus') 391 if(e == 'plus')
392 spacingNum = spacingNum + 30; 392 spacingNum = spacingNum + 30;
393 else if (spacingNum >= 30){ 393 else if (spacingNum >= 30){
394 spacingNum = spacingNum - 30; 394 spacingNum = spacingNum - 30;
395 } 395 }
396 currentObj.set('charSpacing', spacingNum); 396 currentObj.set('charSpacing', spacingNum);
397 canvas.renderAll(); 397 canvas.renderAll();
398 canvas.setActiveObject(currentObj); 398 canvas.setActiveObject(currentObj);
399 } 399 }
400 } 400 }
401 } 401 }
402 402
403 403
404 /**** process insert image */ 404 /**** process insert image */
405 $scope.chooseImage = function(e){console.log(e); 405 $scope.chooseImage = function(e){console.log(e);
406 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ 406 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
407 alert('アップロードできませんでした'); 407 alert('アップロードできませんでした');
408 return; 408 return;
409 } 409 }
410 var reader = new FileReader(); 410 var reader = new FileReader();
411 reader.onload = function (event) { 411 reader.onload = function (event) {
412 var imgObj = new Image();//console.log(event.target); 412 var imgObj = new Image();//console.log(event.target);
413 imgObj.src = event.target.result; 413 imgObj.src = event.target.result;
414 imgObj.onload = function () { 414 imgObj.onload = function () {
415 // start fabricJS stuff 415 // start fabricJS stuff
416 416
417 var image = new fabric.Image(imgObj); 417 var image = new fabric.Image(imgObj);
418 image.set({ 418 image.set({
419 left: 50, 419 left: 50,
420 top: 50 420 top: 50
421 }); 421 });
422 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 422 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
423 image.scaleToWidth(200); 423 image.scaleToWidth(200);
424 canvas.add(image); 424 canvas.add(image);
425 } 425 }
426 } 426 }
427 reader.readAsDataURL(e.target.files[0]); 427 reader.readAsDataURL(e.target.files[0]);
428 } 428 }
429 429
430 //Traslation text 430 //Traslation text
431 $scope.rotateText = function(style) { 431 $scope.rotateText = function(style) {
432 if(canvas.getActiveObject()) { 432 if(canvas.getActiveObject()) {
433 var currentObj = canvas.getActiveObject(); 433 var currentObj = canvas.getActiveObject();
434 if(currentObj.type == 'i-text') { 434 if(currentObj.type == 'i-text') {
435 currentObj.set('rotate', Math.PI / 4); 435 currentObj.set('rotate', Math.PI / 4);
436 canvas.renderAll(); 436 canvas.renderAll();
437 canvas.setActiveObject(currentObj); 437 canvas.setActiveObject(currentObj);
438 } 438 }
439 } 439 }
440 }; 440 };
441 441
442 442
443 /* Process output */ 443 /* Process output */
444 $scope.outputDesign = function(){ 444 $scope.outputDesign = function(){
445 $rootScope.outputImage = canvas.toDataURL('png'); 445 $rootScope.outputImage = canvas.toDataURL('png');
446 // console.log(); 446 // console.log();
447 $('#tshirt-design').modal('hide'); 447 $('#tshirt-design').modal('hide');
448 } 448 }
449 }); 449 });
450 }); 450 });
451 451
app/views/tshirt-design.html
Diff comments   View file @ 3ab3e50
1 <!-- Modal --> 1 <!-- Modal -->
2 <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl"> 2 <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl">
3 3
4 <div class="modal-dialog" role="document"> 4 <div class="modal-dialog" role="document">
5 <div class="modal-content"> 5 <div class="modal-content">
6 <div class="modal-header"> 6 <div class="modal-header">
7 <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button> 7 <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button>
8 <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button> 8 <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button>
9 </div> 9 </div>
10 <div class="modal-body"> 10 <div class="modal-body">
11 <header class="clearfix"> 11 <header class="clearfix">
12 <ul class="nav pull-left"> 12 <ul class="nav pull-left">
13 <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')"> 13 <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showDesignTab('text')">
14 <i class="fa fa-jpy" aria-hidden="true"></i> 文字 14 <i class="fa fa-jpy" aria-hidden="true"></i> 文字
15 </li> 15 </li>
16 <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')"> 16 <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showDesignTab('illustration')">
17 <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ 17 <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ
18 </li> 18 </li>
19 <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')"> 19 <li ng-class="{'active': isShowLeftPanel=='image'}" ng-click="showDesignTab('image')">
20 <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真 20 <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真
21 </li> 21 </li>
22 <li ng-click="canvasClearAll()"> 22 <li ng-click="canvasClearAll()">
23 <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去 23 <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去
24 </li> 24 </li>
25 </ul> 25 </ul>
26 <div class="action pull-right"> 26 <div class="action pull-right">
27 <button class="white"> 27 <button class="white">
28 アルバムを開く 28 アルバムを開く
29 </button> 29 </button>
30 <button class="white"> 30 <button class="white">
31 アルバムに入れる 31 アルバムに入れる
32 </button> 32 </button>
33 </div> 33 </div>
34 </header> 34 </header>
35 <section class="tshirt-design-container clearfix"> 35 <section class="tshirt-design-container clearfix">
36 <div class="aside col-xs-4"> 36 <div class="aside col-xs-4">
37 <!-- Default--> 37 <!-- Default-->
38 <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault"> 38 <ul class="box-design-option" id="choice-design-option" ng-show="isShowLeftPanel=='default' " ng-include="designPartDefault">
39 </ul> 39 </ul>
40 <!-- Illustration design--> 40 <!-- Illustration design-->
41 <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration"> 41 <ul class="box-design-option" id="choice-illustration" ng-show="isShowLeftPanel=='illustration'" ng-include="designPartIllustration">
42 </ul> 42 </ul>
43 <!-- Custom image design--> 43 <!-- Custom image design-->
44 <ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage"> 44 <ul class="box-design-option" id="choice-image" ng-show="isShowLeftPanel=='image'" ng-include="designPartImage">
45 </ul> 45 </ul>
46 <!-- Text design--> 46 <!-- Text design-->
47 <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText"> 47 <ul class="box-design-option" id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="designPartText">
48 </ul> 48 </ul>
49 </div> 49 </div>
50 <div class="design-content col-xs-8"> 50 <div class="design-content col-xs-8">
51 <div class="content" ng-style="{'background-color' : tShirtColorCode}"> 51 <div class="content" ng-style="{'background-color' : tShirtColorCode}">
52 <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas"> 52 <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas">
53 53
54 </canvas> 54 </canvas>
55 </div> 55 </div>
56 <div class="agree-design" ng-click="outputDesign()"> 56 <div class="agree-design" ng-click="outputDesign()">
57 <img src="images/agree-design.png" alt="agree design" /> 57 <img src="images/agree-design.png" alt="agree design" />
58 </div> 58 </div>
59 <div class="trash-design"> 59 <div class="trash-design">
60 <!--<span ng-click="undoCanvas()" class="fa fa-undo"> Undo</span><br>--> 60 <!--<span ng-click="undoCanvas()" class="fa fa-undo"> Undo</span><br>-->
61 <!--<span ng-click="redoCanvas()" class="fa fa-repeat"> Redo</span><br>--> 61 <!--<span ng-click="redoCanvas()" class="fa fa-repeat"> Redo</span><br>-->
62 <img src="images/trash.png" alt="trash design" /> 62 <img src="images/trash.png" alt="trash design" />
63 </div> 63 </div>
64 <img style="display:none" src="images/trash-hover.png" alt="trash-hover cache" />
64 </div> 65 </div>
65 </section> 66 </section>
66 </div> 67 </div>
67 </div> 68 </div>
68 </div> 69 </div>
69 </div> 70 </div>