TRUONG / T-Shats Frontend

Download as
Browse Code »

Commit c3bee6bb30f09df67ade7eea0478afdc44c35a48

Authored by TRUONG
1 parent 60b61386b4
Exists in master and in 1 other branch develop

fix trash icon effection

Showing 2 changed files with 21 additions and 3 deletions Inline Diff

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