TRUONG / T-Shats Frontend

Compare View

switch
from
...
to
 
Commits (2)

Changes

Showing 5 changed files Inline Diff

app/images/trash-hover.png
Diff comments   View file @ 1be40f0

2.77 KB
app/images/trash.png
Diff comments   View file @ 1be40f0

2.46 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 <script type="text/javascript" src="bower_components/fabric-customise-controls/dist/customiseControls.min.js"></script>
45 <script src="bower_components/es5-shim/es5-shim.js"></script> 45 <!--[if lt IE 9]>
46 <script src="bower_components/json3/lib/json3.min.js"></script> 46 <script src="bower_components/es5-shim/es5-shim.js"></script>
47 <![endif]--> 47 <script src="bower_components/json3/lib/json3.min.js"></script>
48 <script type="text/javascript"> 48 <![endif]-->
49 var VERSION = '22-11_01'; 49 <script type="text/javascript">
50 var require = { 50 var VERSION = '22-11_01';
51 urlArgs: "ver="+VERSION, 51 var require = {
52 }; 52 urlArgs: "ver="+VERSION,
53 </script> 53 };
54 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script> 54 </script>
55 </body> 55 <script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
56 </html> 56 </body>
57 57 </html>
58
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ 1be40f0
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 fabric.Object.prototype.hasRotatingPoint = false;
8 canvas.on('after:render', function() { 8 var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
9 // console.log('after render'); 9 for(key in ctrVisible) {
10 }); 10 fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
11 canvas.on({ 11 }
12 'object:added' : onIllustrationAdded, 12 fabric.Object.prototype.customiseCornerIcons({
13 'object:moving' : onIllustrationMoving, 13 settings: {
14 'object:scaling' : onIllustrationChange, 14 borderColor: '#0000ff',
15 'object:rotating' : onIllustrationChange, 15 cornerSize: 25,
16 'object:selected' : onObjectSelected, 16 cornerShape: 'circle',
17 'object:modified' : onIllustrationModifield, 17 cornerBackgroundColor: '#0171b4',
18 'selection:cleared' : onObjectOut, 18 cornerPadding: 6
19 }); 19 },
20 20 mt: {
21 var currentObj; 21 icon: 'images/control-icon/ok.png'
22 var listObj = []; 22 },
23 var stateObj = []; 23 br: {
24 var indexCurr = 0; 24 icon: 'images/control-icon/resize.png'
25 var indexCurr2 = 0; 25 },
26 var actionObj = false; 26 tr: {
27 var refreshObj = true; 27 icon: 'images/control-icon/rotate.png'
28 var spacingNum = 0; 28 }
29 29 });
30 function onIllustrationAdded(options){ 30
31 var object = options.target; 31 fabric.Canvas.prototype.customiseControls({
32 // console.log('object:added'); 32 mt: {
33 33 cursor: 'pointer',
34 if (actionObj === true) { 34 action: function (e, target) {
35 stateObj = [stateObj[indexCurr2]]; 35 target.hasControls = false;
36 listObj = [listObj[indexCurr2]]; 36 target.hasBorders = false;
37 37 canvas.deactivateAll().renderAll();
38 actionObj = false; 38 setTimeout(function() {
39 console.log(stateObj); 39 target.hasControls = true;
40 indexCurr = 1; 40 target.hasBorders = true;
41 } 41 }, 1);
42 object.saveState(); 42 }
43 43 },
44 console.log(object.originalState); 44 br: {
45 stateObj[indexCurr] = JSON.stringify(object.originalState); 45
46 listObj[indexCurr] = object; 46 },
47 indexCurr++; 47 tr: {
48 indexCurr2 = indexCurr - 1; 48 action: 'rotate',
49 refreshObj = true; 49 cursor: 'crosshair'
50 } 50 }
51 51 });
52 function onIllustrationModifield(options){ 52
53 // 53 canvas.on('after:render', function() {
54 var pointer = canvas.getPointer(options.e); 54 // console.log('after render');
55 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 55 });
56 canvas.getActiveObject().remove(); 56 canvas.on({
57 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 57 'mouse:up' : mouseUp,
58 return; 58 'object:added' : onIllustrationAdded,
59 } 59 'object:moving' : onIllustrationMoving,
60 60 'object:scaling' : onIllustrationChange,
61 // 61 'object:rotating' : onIllustrationChange,
62 var objOffset = canvas.getActiveObject().getBoundingRect(); 62 'object:selected' : onObjectSelected,
63 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20; 63 'object:modified' : onIllustrationModifield,
64 //console.log(objOffset,canvas.height,canvas.width); 64 'selection:cleared' : onObjectOut,
65 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){ 65 });
66 if (confirm('削除してもよろしいですか')){ 66
67 canvas.getActiveObject().remove(); 67 var currentObj;
68 }else{ 68 var listObj = [];
69 undoCanvas(); 69 var stateObj = [];
70 return; 70 var indexCurr = 0;
71 } 71 var indexCurr2 = 0;
72 } 72 var actionObj = false;
73 73 var refreshObj = true;
74 var object = options.target; 74 var spacingNum = 0;
75 // console.log('object:modified'); 75
76 if (actionObj === true) { 76 function mouseUp(e) {
77 stateObj = [stateObj[indexCurr2]]; 77 currentObj = canvas.getActiveObject();
78 listObj = [listObj[indexCurr2]]; 78 console.log(currentObj);
79 79 currentObj.activate();
80 actionObj = false; 80 }
81 console.log(stateObj); 81
82 indexCurr = 1; 82
83 } 83 function onIllustrationAdded(options){
84 84 var object = options.target;
85 object.saveState(); 85 // console.log('object:added');
86 86
87 stateObj[indexCurr] = JSON.stringify(object.originalState); 87 if (actionObj === true) {
88 listObj[indexCurr] = object; 88 stateObj = [stateObj[indexCurr2]];
89 indexCurr++; 89 listObj = [listObj[indexCurr2]];
90 indexCurr2 = indexCurr - 1; 90
91 // console.log(stateObj); 91 actionObj = false;
92 refreshObj = true; 92 console.log(stateObj);
93 } 93 indexCurr = 1;
94 94 }
95 function onIllustrationChange(options) { 95 object.saveState();
96 // options.target.setCoords(); 96
97 // canvas.forEachObject(function(obj) { 97 console.log(object.originalState);
98 // if (obj === options.target) return; 98 stateObj[indexCurr] = JSON.stringify(object.originalState);
99 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); 99 listObj[indexCurr] = object;
100 // }); 100 indexCurr++;
101 } 101 indexCurr2 = indexCurr - 1;
102 102 refreshObj = true;
103 function onIllustrationMoving(options) { 103 }
104 var pointer = canvas.getPointer(options.e); 104
105 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){ 105 function onIllustrationModifield(options){
106 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'}); 106 //
107 }else{ 107 var pointer = canvas.getPointer(options.e);
108 $('.design-content .trash-design img').attr({'src':'images/trash.png'}); 108 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
109 } 109 canvas.getActiveObject().remove();
110 } 110 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
111 111 return;
112 function onObjectOut() { 112 }
113 delete currentObj; 113
114 $scope.designTextValue = ''; 114 //
115 } 115 var objOffset = canvas.getActiveObject().getBoundingRect();
116 116 var cH = canvas.height, cW = canvas.width, H0 = 20, W0 = 20;
117 function undoCanvas() { 117 //console.log(objOffset,canvas.height,canvas.width);
118 if (indexCurr <= 0) { 118 if (objOffset.left<W0-objOffset.width || objOffset.left>cW-W0 || objOffset.top<H0-objOffset.height || objOffset.top>cH-H0){
119 indexCurr = 0; 119 if (confirm('削除してもよろしいですか')){
120 return; 120 canvas.getActiveObject().remove();
121 } 121 }else{
122 122 undoCanvas();
123 if (refreshObj === true) { 123 return;
124 indexCurr--; 124 }
125 refreshObj = false; 125 }
126 } 126
127 127 var object = options.target;
128 console.log('undo'); 128 // console.log('object:modified');
129 129 if (actionObj === true) {
130 indexCurr2 = indexCurr - 1; 130 stateObj = [stateObj[indexCurr2]];
131 currentObj = listObj[indexCurr2]; 131 listObj = [listObj[indexCurr2]];
132 if (currentObj){ 132
133 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 133 actionObj = false;
134 } 134 console.log(stateObj);
135 135 indexCurr = 1;
136 indexCurr--; 136 }
137 currentObj.setCoords(); 137
138 canvas.renderAll(); 138 object.saveState();
139 actionObj = true; 139
140 } 140 stateObj[indexCurr] = JSON.stringify(object.originalState);
141 141 listObj[indexCurr] = object;
142 function redoCanvas() { 142 indexCurr++;
143 actionObj = true; 143 indexCurr2 = indexCurr - 1;
144 if (indexCurr >= stateObj.length - 1) { 144 // console.log(stateObj);
145 return; 145 refreshObj = true;
146 } 146 }
147 147
148 console.log('redo'); 148 function onIllustrationChange(options) {
149 149 // options.target.setCoords();
150 indexCurr2 = indexCurr + 1; 150 // canvas.forEachObject(function(obj) {
151 currentObj = listObj[indexCurr2]; 151 // if (obj === options.target) return;
152 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])); 152 // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
153 153 // });
154 indexCurr++; 154 }
155 currentObj.setCoords(); 155
156 canvas.renderAll(); 156 function onIllustrationMoving(options) {
157 } 157 var pointer = canvas.getPointer(options.e);
158 158 if (pointer.x >= 567 && pointer.y >= 620 && pointer.x <= 600 && pointer.y <= 670){
159 $scope.canvasClearAll = function(){ 159 $('.design-content .trash-design img').attr({'src':'images/trash-hover.png'});
160 if (confirm('配置されたすべての文字や画像を消去します')){ 160 }else{
161 canvas.clear(); 161 $('.design-content .trash-design img').attr({'src':'images/trash.png'});
162 } 162 }
163 } 163 }
164 164
165 function onObjectSelected(options) { 165 function onObjectOut() {
166 var currentObj = options.target; 166 delete currentObj;
167 // console.log(currentObj.text); 167 $scope.designTextValue = '';
168 $scope.typeObject = currentObj.type; 168 }
169 switch ($scope.typeObject) { 169
170 case 'i-text' : 170 function undoCanvas() {
171 $rootScope.isShowLeftPanel = 'text'; 171 if (indexCurr <= 0) {
172 var text = currentObj.text; 172 indexCurr = 0;
173 if(text != '') { 173 return;
174 $scope.designText = text; 174 }
175 $scope.designTextValue = text; 175
176 } 176 if (refreshObj === true) {
177 break; 177 indexCurr--;
178 178 refreshObj = false;
179 case 'path-group' : 179 }
180 $rootScope.isShowLeftPanel = 'illustration'; 180
181 break; 181 console.log('undo');
182 182
183 case 'image': 183 indexCurr2 = indexCurr - 1;
184 $rootScope.isShowLeftPanel = 'image'; 184 currentObj = listObj[indexCurr2];
185 break; 185 if (currentObj){
186 186 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
187 default : 187 }
188 $rootScope.isShowLeftPanel = 'default'; 188
189 break; 189 indexCurr--;
190 } 190 currentObj.setCoords();
191 $rootScope.safeApply(); 191 canvas.renderAll();
192 } 192 actionObj = true;
193 193 }
194 // Illustration process 194
195 $scope.changeIllustrationCategory = function(currentIllustration){ 195 function redoCanvas() {
196 $scope.currentIllustrationCate = $illustration.getList(currentIllustration); 196 actionObj = true;
197 //console.log($scope.currentIllustrationCate); 197 if (indexCurr >= stateObj.length - 1) {
198 }; 198 return;
199 199 }
200 $scope.insertSvg = function(item){ 200
201 fabric.loadSVGFromURL(item.path, function(objects, options) { 201 console.log('redo');
202 var shape = fabric.util.groupSVGElements(objects, options); 202
203 //shape.setFill('green'); 203 indexCurr2 = indexCurr + 1;
204 canvas.add(shape.scale(0.6)); 204 currentObj = listObj[indexCurr2];
205 shape.set({ left: 150, top: 200 }).setCoords(); 205 currentObj.setOptions(JSON.parse(indexCurr[indexCurr2]));
206 canvas.renderAll(); 206
207 canvas.setActiveObject(shape); 207 indexCurr++;
208 }); 208 currentObj.setCoords();
209 }; 209 canvas.renderAll();
210 210 }
211 // color pattern 211
212 $scope.listColorPatterns = [ 212 $scope.canvasClearAll = function(){
213 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc', 213 if (confirm('配置されたすべての文字や画像を消去します')){
214 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450', 214 canvas.clear();
215 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666', 215 }
216 '#333333' 216 }
217 ]; 217
218 218 function onObjectSelected(options) {
219 $scope.changeColorPattern = function(color){ 219 var currentObj = options.target;
220 var obj = canvas.getActiveObject(); 220 //Set default
221 if (!color){ 221 console.log('selected object');
222 color = 'none'; 222 // currentObj.hasControls = true;
223 } 223 // currentObj.hasBorders = true;
224 if (obj instanceof fabric.PathGroup) { 224 $scope.typeObject = currentObj.type;
225 obj.getObjects().forEach(function(o) { 225 switch ($scope.typeObject) {
226 o.fill = color; 226 case 'i-text' :
227 }); 227 $rootScope.isShowLeftPanel = 'text';
228 } 228 var text = currentObj.text;
229 else { 229 if(text != '') {
230 obj.fill = color; 230 $scope.designText = text;
231 } 231 $scope.designTextValue = text;
232 canvas.renderAll(); 232 }
233 // if (canvas.getActiveObject()){ 233 break;
234 // canvas.getActiveObject().set("fill", color); 234
235 // canvas.renderAll(); 235 case 'path-group' :
236 // } 236 $rootScope.isShowLeftPanel = 'illustration';
237 }; 237 break;
238 238
239 //Font 239 case 'image':
240 $scope.listFontFamily = [ 240 $rootScope.isShowLeftPanel = 'image';
241 { 241 break;
242 name : 'GN Aki iro Sesami Cookies', 242
243 slug : 'gn_aki_iro_sesami_cookies', 243 default :
244 }, 244 $rootScope.isShowLeftPanel = 'default';
245 { 245 break;
246 name : 'GN-Fuyu-iro_Script_Bold', 246 }
247 slug : 'gn_fuyu_iro_script_bold' 247 $rootScope.safeApply();
248 }, 248 }
249 { 249
250 name : 'GN Killgothic U Kanana', 250 // Illustration process
251 slug : 'gn_killgothic_u_kanana' 251 $scope.changeIllustrationCategory = function(currentIllustration){
252 }, 252 $scope.currentIllustrationCate = $illustration.getList(currentIllustration);
253 { 253 //console.log($scope.currentIllustrationCate);
254 name : 'GN-Kin-iro_Alphabet_Cookies', 254 };
255 slug : 'gn_kin_iro_alphabet_cookies' 255
256 256 $scope.insertSvg = function(item){
257 }, 257 fabric.loadSVGFromURL(item.path, function(objects, options) {
258 { 258 var shape = fabric.util.groupSVGElements(objects, options);
259 name : 'GN-Kin-iro_SansSerif', 259 //shape.setFill('green');
260 slug : 'gn_kin_iro_sansserif' 260 canvas.add(shape.scale(0.6));
261 261 shape.set({ left: 150, top: 200 }).setCoords();
262 }, 262 canvas.renderAll();
263 { 263 canvas.setActiveObject(shape);
264 name : 'GN-Koharuiro_Sunray', 264 });
265 slug : 'gn_koharuiro_sunray' 265 };
266 266
267 }, 267 // color pattern
268 { 268 $scope.listColorPatterns = [
269 name : 'GN-Kyu-pin', 269 '#000000','#ffff00','#ff6600','#ff0000','#ff6262','#ffa19c','#ff9933','#c45d01','#5d2b03','#ffffcc',
270 slug : 'gn_kyu_pin' 270 '#ffff99','#ffd500','#c0db50','#21a52a','#00663f','#abfcab','#36ffaa','#89eaea','#00938c','#005450',
271 }, 271 '#0badff','#006cff','#839aff','#0410a0','#ffb2ff','#f93fff','#6600ca','#ff6699','#999999','#666666',
272 { 272 '#333333'
273 name : 'gn_natsu_iro_schedule', 273 ];
274 slug : 'gn_natsu_iro_schedule' 274
275 275 $scope.changeColorPattern = function(color){
276 }, 276 var obj = canvas.getActiveObject();
277 { 277 if (!color){
278 name : 'gnkana_kiniro_sansserif_l', 278 color = 'none';
279 slug : 'gnkana_kiniro_sansserif_l' 279 }
280 280 if (obj instanceof fabric.PathGroup) {
281 }, 281 obj.getObjects().forEach(function(o) {
282 { 282 o.fill = color;
283 name : 'gnkana_kiniro_sansserif_st', 283 });
284 slug : 'gnkana_kiniro_sansserif_st' 284 }
285 }, 285 else {
286 { 286 obj.fill = color;
287 name : 'gnkana_kon_iro_nightfall', 287 }
288 slug : 'gnkana_kon_iro_nightfall' 288 canvas.renderAll();
289 289 // if (canvas.getActiveObject()){
290 }, 290 // canvas.getActiveObject().set("fill", color);
291 { 291 // canvas.renderAll();
292 name : 'ms_gothic', 292 // }
293 slug : 'ms_gothic' 293 };
294 294
295 }, 295 //Font
296 { 296 $scope.listFontFamily = [
297 name : 'msmincho', 297 {
298 slug : 'msmincho' 298 name : 'GN Aki iro Sesami Cookies',
299 }, 299 slug : 'gn_aki_iro_sesami_cookies',
300 { 300 },
301 name : 'ufonts_com_ms_pgothic', 301 {
302 slug : 'ufonts_com_ms_pgothic' 302 name : 'GN-Fuyu-iro_Script_Bold',
303 } 303 slug : 'gn_fuyu_iro_script_bold'
304 ]; 304 },
305 305 {
306 // layer process 306 name : 'GN Killgothic U Kanana',
307 $scope.layerProcess = function(mode) { 307 slug : 'gn_killgothic_u_kanana'
308 // console.log('layerProcess'); 308 },
309 var activeObject = canvas.getActiveObject(); 309 {
310 310 name : 'GN-Kin-iro_Alphabet_Cookies',
311 console.log(activeObject); 311 slug : 'gn_kin_iro_alphabet_cookies'
312 312
313 if (activeObject){ 313 },
314 switch (mode) { 314 {
315 case 1: 315 name : 'GN-Kin-iro_SansSerif',
316 // canvas.bringForward(activeObject); 316 slug : 'gn_kin_iro_sansserif'
317 activeObject.bringForward(); 317
318 break; 318 },
319 case 2: 319 {
320 // canvas.sendBackwards(activeObject); 320 name : 'GN-Koharuiro_Sunray',
321 activeObject.sendBackwards(); 321 slug : 'gn_koharuiro_sunray'
322 break; 322
323 case 3: 323 },
324 // canvas.bringToFront(activeObject); 324 {
325 activeObject.bringToFront(); 325 name : 'GN-Kyu-pin',
326 break; 326 slug : 'gn_kyu_pin'
327 case 4: 327 },
328 // canvas.sendToBack(activeObject); 328 {
329 activeObject.sendToBack(); 329 name : 'gn_natsu_iro_schedule',
330 break; 330 slug : 'gn_natsu_iro_schedule'
331 } 331
332 canvas.deactivateAll().renderAll(); 332 },
333 } 333 {
334 }; 334 name : 'gnkana_kiniro_sansserif_l',
335 335 slug : 'gnkana_kiniro_sansserif_l'
336 $scope.focusInputText = function(text) { 336
337 currentObj = canvas.getActiveObject(); 337 },
338 if(typeof currentObj == 'undefined' || currentObj == null) { 338 {
339 $scope.iText = new fabric.IText('', { 339 name : 'gnkana_kiniro_sansserif_st',
340 left: 150, 340 slug : 'gnkana_kiniro_sansserif_st'
341 top: 200, 341 },
342 fontFamily: 'Arial', 342 {
343 fontWeight: 'normal', 343 name : 'gnkana_kon_iro_nightfall',
344 textAlign: 'center', 344 slug : 'gnkana_kon_iro_nightfall'
345 fontSize: 28, 345
346 fill: 'black' 346 },
347 }); 347 {
348 } else { 348 name : 'ms_gothic',
349 if(currentObj.type != 'i-text') { 349 slug : 'ms_gothic'
350 $scope.iText = new fabric.IText('', { 350
351 left: 150, 351 },
352 top: 200, 352 {
353 fontFamily: 'Arial', 353 name : 'msmincho',
354 fontWeight: 'normal', 354 slug : 'msmincho'
355 textAlign: 'center', 355 },
356 fontSize: 28, 356 {
357 fill: 'black' 357 name : 'ufonts_com_ms_pgothic',
358 }); 358 slug : 'ufonts_com_ms_pgothic'
359 } else{ 359 }
360 $scope.iText = currentObj; 360 ];
361 } 361
362 } 362 // layer process
363 }; 363 $scope.layerProcess = function(mode) {
364 364 // console.log('layerProcess');
365 //Design text 365 var activeObject = canvas.getActiveObject();
366 $scope.inputText = function(e) { 366
367 if(typeof $scope.iText != "undefined") { 367 console.log(activeObject);
368 var iText = $scope.iText; 368
369 iText.text = e; 369 if (activeObject){
370 canvas.add(iText); 370 switch (mode) {
371 canvas.renderAll(); 371 case 1:
372 canvas.setActiveObject(iText); 372 // canvas.bringForward(activeObject);
373 } 373 activeObject.bringForward();
374 }; 374 break;
375 $scope.setFontFamily = function(font) { 375 case 2:
376 if(canvas.getActiveObject()) { 376 // canvas.sendBackwards(activeObject);
377 var currentObj = canvas.getActiveObject(); 377 activeObject.sendBackwards();
378 if(currentObj.type == 'i-text') { 378 break;
379 currentObj.set('fontFamily', font); 379 case 3:
380 canvas.renderAll(); 380 // canvas.bringToFront(activeObject);
381 canvas.setActiveObject(currentObj); 381 activeObject.bringToFront();
382 } 382 break;
383 383 case 4:
384 } 384 // canvas.sendToBack(activeObject);
385 }; 385 activeObject.sendToBack();
386 //Set letter spacing text 386 break;
387 $scope.setLetterSpacingText = function(e) { 387 }
388 if(canvas.getActiveObject()) { 388 canvas.deactivateAll().renderAll();
389 var currentObj = canvas.getActiveObject(); 389 }
390 if(currentObj.type == 'i-text') { 390 };
391 if(e == 'plus') 391
392 spacingNum = spacingNum + 30; 392 $scope.focusInputText = function(text) {
393 else if (spacingNum >= 30){ 393 currentObj = canvas.getActiveObject();
394 spacingNum = spacingNum - 30; 394 if(typeof currentObj == 'undefined' || currentObj == null) {
395 } 395 $scope.iText = new fabric.IText('', {
396 currentObj.set('charSpacing', spacingNum); 396 left: 150,
397 canvas.renderAll(); 397 top: 200,
398 canvas.setActiveObject(currentObj); 398 fontFamily: 'Arial',
399 } 399 fontWeight: 'normal',
400 } 400 textAlign: 'center',
401 } 401 fontSize: 28,
402 402 fill: 'black'
403 403 });
404 /**** process insert image */ 404 } else {
405 $scope.chooseImage = function(e){console.log(e); 405 if(currentObj.type != 'i-text') {
406 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){ 406 $scope.iText = new fabric.IText('', {
407 alert('アップロードできませんでした'); 407 left: 150,
408 return; 408 top: 200,
409 } 409 fontFamily: 'Arial',
410 var reader = new FileReader(); 410 fontWeight: 'normal',
411 reader.onload = function (event) { 411 textAlign: 'center',
412 var imgObj = new Image();//console.log(event.target); 412 fontSize: 28,
413 imgObj.src = event.target.result; 413 fill: 'black'
414 imgObj.onload = function () { 414 });
415 // start fabricJS stuff 415 } else{
416 416 $scope.iText = currentObj;
417 var image = new fabric.Image(imgObj); 417 }
418 image.set({ 418 }
419 left: 50, 419 };
420 top: 50 420
421 }); 421 //Design text
422 //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 422 $scope.inputText = function(e) {
423 image.scaleToWidth(200); 423 if(typeof $scope.iText != "undefined") {
424 canvas.add(image); 424 var iText = $scope.iText;
425 } 425 iText.text = e;
426 } 426 canvas.add(iText);
427 reader.readAsDataURL(e.target.files[0]); 427 canvas.renderAll();
428 } 428 canvas.setActiveObject(iText);
429 429 }
430 //Traslation text 430 };
431 $scope.rotateText = function(style) { 431 $scope.setFontFamily = function(font) {
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('fontFamily', font);
436 canvas.renderAll(); 436 canvas.renderAll();
437 canvas.setActiveObject(currentObj); 437 canvas.setActiveObject(currentObj);
438 } 438 }
439 } 439
440 }; 440 }
441 441 };
442 442 //Set letter spacing text
443 /* Process output */ 443 $scope.setLetterSpacingText = function(e) {
444 $scope.outputDesign = function(){ 444 if(canvas.getActiveObject()) {
445 $rootScope.outputImage = canvas.toDataURL('png'); 445 var currentObj = canvas.getActiveObject();
446 // console.log(); 446 if(currentObj.type == 'i-text') {
447 $('#tshirt-design').modal('hide'); 447 if(e == 'plus')
448 } 448 spacingNum = spacingNum + 30;
449 }); 449 else if (spacingNum >= 30){
450 }); 450 spacingNum = spacingNum - 30;
451 451 }
452 currentObj.set('charSpacing', spacingNum);
453 canvas.renderAll();
454 canvas.setActiveObject(currentObj);
455 }
456 }
457 }
458
459
460 /**** process insert image */
461 $scope.chooseImage = function(e){console.log(e);
462 if (e.target.files[0] && e.target.files[0].size > 5*1024*1024){
463 alert('アップロードできませんでした');
464 return;
465 }
466 var reader = new FileReader();
467 reader.onload = function (event) {
468 var imgObj = new Image();//console.log(event.target);
469 imgObj.src = event.target.result;
470 imgObj.onload = function () {
471 // start fabricJS stuff
472
473 var image = new fabric.Image(imgObj);
474 image.set({
475 left: 50,
476 top: 50
477 });
478 //image.scale(getRandomNum(0.1, 0.25)).setCoords();
479 image.scaleToWidth(200);
480 canvas.add(image);
481 }
482 }
483 reader.readAsDataURL(e.target.files[0]);
484 }
485
486 //Traslation text
487 $scope.rotateText = function(style) {
488 if(canvas.getActiveObject()) {
489 var currentObj = canvas.getActiveObject();
490 if(currentObj.type == 'i-text') {
491 currentObj.set('rotate', Math.PI / 4);
492 canvas.renderAll();
493 canvas.setActiveObject(currentObj);
494 }
495 }
496 };
497
498
499 /* Process output */
500 $scope.outputDesign = function(){
501 $rootScope.outputImage = canvas.toDataURL('png');
502 // console.log();
503 $('#tshirt-design').modal('hide');
504 }
505 });
506 });
507
app/views/tshirt-design.html
Diff comments   View file @ 1be40f0
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-sm-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-sm-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 <img style="display:none" src="images/trash-hover.png" alt="trash-hover cache" /> 65 </div>
65 </div> 66 </section>
66 </section> 67 </div>
67 </div> 68 </div>
68 </div> 69 </div>
69 </div> 70 </div>