TRUONG / T-Shats Frontend

Commit e4a2f2dbc674071924f78a71c7f40c765b8d474b

Authored by TRUONG 2016-11-18 00:10:16 +0900

merge conflict

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

Showing 6 changed files Inline Diff

app/index.html
app/scripts/controllers/tshirtdesign.js
app/views/design_part/text.html
dist/index.html
dist/scripts/controllers/tshirtdesign.js
dist/views/design_part/text.html

app/index.html

Diff comments View file @ e4a2f2d

1	<!doctype html>	1	<!doctype html>
2	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]-->	2	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]-->
3	<!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]-->	3	<!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]-->
4	<!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]-->	4	<!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]-->
5	<head>	5	<head>
6	<meta charset="utf-8">	6	<meta charset="utf-8">
7	<meta http-equiv="X-UA-Compatible" content="IE=edge">	7	<meta http-equiv="X-UA-Compatible" content="IE=edge">
8	<title></title>	8	<title></title>
9	<meta name="description" content="">	9	<meta name="description" content="">
10	<meta name="viewport" content="width=device-width">	10	<meta name="viewport" content="width=device-width">
11	<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->	11	<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
12	<!-- build:css styles/vendor.css -->	12	<!-- build:css styles/vendor.css -->
13	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />	13	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
14	<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />	14	<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css" />
15	<link rel="stylesheet" href="bower_components/select2/select2.css">	15	<link rel="stylesheet" href="bower_components/select2/select2.css">
16	<!-- bower:css -->	16	<!-- bower:css -->
17	<!-- endbower -->	17	<!-- endbower -->
18	<!-- endbuild -->	18	<!-- endbuild -->
19	<!-- build:css({.tmp,app}) styles/main.css -->	19	<!-- build:css({.tmp,app}) styles/main.css -->
20	<link rel="stylesheet" href="styles/main.css">	20	<link rel="stylesheet" href="styles/main.css">
21	<!-- endbuild -->	21	<!-- endbuild -->
22	</head>	22	</head>
23	<body ng-app="tshatsApp">	23	<body ng-app="tshatsApp">
24	<!--[if lt IE 7]>	24	<!--[if lt IE 7]>
25	<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>	25	<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
26	<![endif]-->	26	<![endif]-->
27		27
28	<!-- Add your site or application content here -->	28	<!-- Add your site or application content here -->
29	<div class="container" ng-view></div>	29	<div class="container" ng-view></div>
30		30
31	<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->	31	<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
32	<script>	32	<script>
33	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){	33	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){
34	(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),	34	(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
35	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)	35	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
36	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');	36	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
37		37
38	ga('create', 'UA-XXXXX-X');	38	ga('create', 'UA-XXXXX-X');
39	ga('send', 'pageview');	39	ga('send', 'pageview');
40	</script>	40	</script>
41	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>	41	<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
42	<script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script>	42	<script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script>
43	<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>	43	<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
44	<!--[if lt IE 9]>	44	<!--[if lt IE 9]>
45	<script src="bower_components/es5-shim/es5-shim.js"></script>	45	<script src="bower_components/es5-shim/es5-shim.js"></script>
46	<script src="bower_components/json3/lib/json3.min.js"></script>	46	<script src="bower_components/json3/lib/json3.min.js"></script>
47	<![endif]-->	47	<![endif]-->
48	<script type="text/javascript">	48	<script type="text/javascript">
49	var VERSION = '17-11_02';	49	var VERSION = '17-11_03';
50	var require = {	50	var require = {
51	urlArgs: "ver="+VERSION,	51	urlArgs: "ver="+VERSION,
52	};	52	};
53	</script>	53	</script>
54	<script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>	54	<script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>
55	</body>	55	</body>
56	</html>	56	</html>
57		57

app/scripts/controllers/tshirtdesign.js

Diff comments View file @ e4a2f2d

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

app/views/design_part/text.html

Diff comments View file @ e4a2f2d

1	<li>	1	<li>
2	<div class="title">	2	<div class="title">
3	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->	3	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
4	文字入力	4	文字入力
5	</div>	5	</div>
6	<div class="content clearfix">	6	<div class="content clearfix">
7	<div>	7	<div>
8	<input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">	8	<input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText(designText)" ng-change="inputText(designText)" ng-model="designText" ng-value="designTextValue">
9	</div>	9	</div>
10	<div>	10	<div>
11	<ul class="font-family-box">	11	<ul class="font-family-box">
12	<li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li>	12	<li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li>
13	</ul>	13	</ul>
14	</div>	14	</div>
15	<div>	15	<div>
16	<div>文字を変形する</div>	16	<div ng-click="rotateText('1')">文字を変形する</div>
17	</div>	17	</div>
18	<div class="clearfix spacing-letter ">	18	<div class="clearfix spacing-letter ">
19	<div class="pull-left text-label">	19	<div class="pull-left text-label">
20	文字間隔 :	20	文字間隔 :
21	</div>	21	</div>
22	<div class="pull-right">	22	<div class="pull-right">
23	<div class="box clearfix">	23	<div class="box clearfix">
24	<div class="item item-plus" ng-click="setLetterSpacingText('plus')">	24	<div class="item item-plus" ng-click="setLetterSpacingText('plus')">
25	<i class="fa fa-plus-square-o" aria-hidden="true"></i>	25	<i class="fa fa-plus-square-o" aria-hidden="true"></i>
26	</div>	26	</div>
27	<div class="item item-text">	27	<div class="item item-text">
28	リセット	28	リセット
29	</div>	29	</div>
30	<div class="item item-minus" ng-click="setLetterSpacingText('minus')">	30	<div class="item item-minus" ng-click="setLetterSpacingText('minus')">
31	<i class="fa fa-minus-square-o" aria-hidden="true"></i>	31	<i class="fa fa-minus-square-o" aria-hidden="true"></i>
32	</div>	32	</div>
33	</div>	33	</div>
34	</div>	34	</div>
35	</div>	35	</div>
36	</div>	36	</div>
37	</li>	37	</li>
38	<li>	38	<li>
39	<div class="title">	39	<div class="title">
40	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->	40	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
41	カラー変更	41	カラー変更
42	<!--<div class="pull-right">元の色に戻す</div>-->	42	<!--<div class="pull-right">元の色に戻す</div>-->
43	</div>	43	</div>
44	<div class="content clearfix">	44	<div class="content clearfix">
45	<div class="color-patterns">	45	<div class="color-patterns">
46	<div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">	46	<div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
47	</div>	47	</div>
48	<div class="clearfix"></div>	48	<div class="clearfix"></div>
49	</div>	49	</div>
50	</div>	50	</div>
51	</li>	51	</li>
52		52
53	<li>	53	<li>
54	<div class="title">	54	<div class="title">
55	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->	55	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
56	重ね順変更	56	重ね順変更
57	</div>	57	</div>
58	<div class="content clearfix">	58	<div class="content clearfix">
59	<div class="col-xs-3 layer-item" ng-click="layerProcess(1)">	59	<div class="col-xs-3 layer-item" ng-click="layerProcess(1)">
60	<img src="images/layer-icon-1.png"/>	60	<img src="images/layer-icon-1.png"/>
61	<div>前面へ</div>	61	<div>前面へ</div>
62	</div>	62	</div>
63	<div class="col-xs-3 layer-item" ng-click="layerProcess(2)">	63	<div class="col-xs-3 layer-item" ng-click="layerProcess(2)">
64	<img src="images/layer-icon-2.png"/>	64	<img src="images/layer-icon-2.png"/>
65	<div>背面へ</div>	65	<div>背面へ</div>
66	</div>	66	</div>
67	<div class="col-xs-3 layer-item" ng-click="layerProcess(3)">	67	<div class="col-xs-3 layer-item" ng-click="layerProcess(3)">
68	<img src="images/layer-icon-3.png"/>	68	<img src="images/layer-icon-3.png"/>
69	<div>最前面へ</div>	69	<div>最前面へ</div>
70	</div>	70	</div>
71	<div class="col-xs-3 layer-item" ng-click="layerProcess(4)">	71	<div class="col-xs-3 layer-item" ng-click="layerProcess(4)">
72	<img src="images/layer-icon-4.png"/>	72	<img src="images/layer-icon-4.png"/>
73	<div>最前面へ</div>	73	<div>最前面へ</div>
74	</div>	74	</div>
75	</div>	75	</div>
76	</li>	76	</li>
77		77

dist/index.html

Diff comments View file @ e4a2f2d

1	<!doctype html><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--><!--[if gt IE 8]><!--><html class="no-js" ng-app=""><!--<![endif]--><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width"><!-- Place favicon.ico and apple-touch-icon.png in the root directory --><link rel="stylesheet" href="styles/271347a9.vendor.css"><link rel="stylesheet" href="styles/e87ab03f.main.css"><body ng-app="tshatsApp"><!--[if lt IE 7]>	1	<!doctype html><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" id="ng-app" ng-app=""> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9" id="ng-app" ng-app=""> <![endif]--><!--[if gt IE 8]><!--><html class="no-js" ng-app=""><!--<![endif]--><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><meta name="description" content=""><meta name="viewport" content="width=device-width"><!-- Place favicon.ico and apple-touch-icon.png in the root directory --><link rel="stylesheet" href="styles/271347a9.vendor.css"><link rel="stylesheet" href="styles/e87ab03f.main.css"><body ng-app="tshatsApp"><!--[if lt IE 7]>
2	<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>	2	<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
3	<![endif]--><!-- Add your site or application content here --><div class="container" ng-view=""></div><!-- Google Analytics: change UA-XXXXX-X to be your site's ID --><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){	3	<![endif]--><!-- Add your site or application content here --><div class="container" ng-view=""></div><!-- Google Analytics: change UA-XXXXX-X to be your site's ID --><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]\|\|function(){
4	(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),	4	(i[r].q=i[r].q\|\|[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
5	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)	5	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
6	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');	6	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
7		7
8	ga('create', 'UA-XXXXX-X');	8	ga('create', 'UA-XXXXX-X');
9	ga('send', 'pageview');</script><script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script><script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script><script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script><!--[if lt IE 9]>	9	ga('send', 'pageview');</script><script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script><script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script><script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script><!--[if lt IE 9]>
10	<script src="bower_components/es5-shim/es5-shim.js"></script>	10	<script src="bower_components/es5-shim/es5-shim.js"></script>
11	<script src="bower_components/json3/lib/json3.min.js"></script>	11	<script src="bower_components/json3/lib/json3.min.js"></script>
12	<![endif]--><script type="text/javascript">var VERSION = '17-11_01';	12	<![endif]--><script type="text/javascript">var VERSION = '17-11_03';
13	var require = {	13	var require = {
14	urlArgs: "ver="+VERSION,	14	urlArgs: "ver="+VERSION,
15	};</script><script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>	15	};</script><script src="bower_components/requirejs/require.js" data-main="scripts/main"></script>

dist/scripts/controllers/tshirtdesign.js

Diff comments View file @ e4a2f2d

define(["app"],function(app){app.controller("TshirtdesignCtrl",function($scope,$rootScope,$illustration){function onIllustrationAdded(options){var object=options.target;console.log("object:added"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),console.log(object.originalState),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,refreshObj=!0}function onIllustrationModifield(options){var objOffset=canvas.getActiveObject().getBoundingRect(),cH=canvas.height,cW=canvas.width,H0=50,W0=50;if(objOffset.left<W0-objOffset.width||objOffset.left>cW-W0||objOffset.top<H0-objOffset.height||objOffset.top>cH-H0){if(!confirm("削除してもよろしいですか"))return void undoCanvas();canvas.getActiveObject().remove()}var object=options.target;console.log("object:modified"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,console.log(stateObj),refreshObj=!0}function onIllustrationChange(options){}function onIllustrationOut(){console.log("out object")}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&&currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onIllustrationSelected(options){var object=options.target;switch($scope.typeObject=object.type,$scope.typeObject){case"i-text":$rootScope.isShowLeftPanel="text",$("#input-design-text").focus(function(){});break;case"path-group":$rootScope.isShowLeftPanel="illustration";break;default:$rootScope.isShowLeftPanel="default"}$rootScope.safeApply()}var canvas=new fabric.Canvas("main-design-container");fabric.Object.prototype.transparentCorners=!1,canvas.on("after:render",function(){}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onIllustrationSelected,"object:modified":onIllustrationModifield,"selected:deselected":onIllustrationOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0;$scope.currentObject=null,$scope.changeIllustrationCategory=function(currentIllustration){$scope.currentIllustrationCate=$illustration.getList(currentIllustration)},$scope.insertSvg=function(item){fabric.loadSVGFromURL(item.path,function(objects,options){var shape=fabric.util.groupSVGElements(objects,options);canvas.add(shape.scale(.6)),shape.set({left:150,top:200}).setCoords(),canvas.renderAll(),canvas.setActiveObject(shape)})},$scope.listColorPatterns=["#000000","#ffff00","#ff6600","#ff0000","#ff6262","#ffa19c","#ff9933","#c45d01","#5d2b03","#ffffcc","#ffff99","#ffd500","#c0db50","#21a52a","#00663f","#abfcab","#36ffaa","#89eaea","#00938c","#005450","#0badff","#006cff","#839aff","#0410a0","#ffb2ff","#f93fff","#6600ca","#ff6699","#999999","#666666","#333333"],$scope.listFontFamily=[{name:"GN Aki iro Sesami Cookies",slug:"gn_aki_iro_sesami_cookies"},{name:"GN-Fuyu-iro_Script_Bold",slug:"gn_fuyu_iro_script_bold"},{name:"GN Killgothic U Kanana",slug:"gn_killgothic_u_kanana"},{name:"GN-Kin-iro_Alphabet_Cookies",slug:"gn_kin_iro_alphabet_cookies"},{name:"GN-Kin-iro_SansSerif",slug:"gn_kin_iro_sansserif"},{name:"GN-Koharuiro_Sunray",slug:"gn_koharuiro_sunray"},{name:"GN-Kyu-pin",slug:"gn_kyu_pin"},{name:"gn_natsu_iro_schedule",slug:"gn_natsu_iro_schedule"},{name:"gnkana_kiniro_sansserif_l",slug:"gnkana_kiniro_sansserif_l"},{name:"gnkana_kiniro_sansserif_st",slug:"gnkana_kiniro_sansserif_st"},{name:"gnkana_kon_iro_nightfall",slug:"gnkana_kon_iro_nightfall"},{name:"ms_gothic",slug:"ms_gothic"},{name:"msmincho",slug:"msmincho"},{name:"ufonts_com_ms_pgothic",slug:"ufonts_com_ms_pgothic"}],$scope.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$scope.layerProcess=function(mode){var activeObject=canvas.getActiveObject();if(activeObject){switch(mode){case 1:activeObject.bringForward();break;case 2:activeObject.sendBackwards();break;case 3:activeObject.bringToFront();break;case 4:activeObject.sendToBack()}canvas.renderAll()}},$scope.focusInputText=function(){"i-text"!=$scope.typeObject&&($scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",fontSize:28,fill:"black"}))},$scope.inputText=function(e){var iText=$scope.iText;""!=e&&(iText.text=e,iText.set().setCoords(),canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText))},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObject=canvas.getActiveObject();"i-text"==currentObject.type&&(currentObject.set("fontFamily",font),canvas.renderAll(),canvas.setActiveObject(currentObject))}};var spacingNum=0;$scope.setLetterSpacingText=function(e){if(canvas.getActiveObject()){var currentObject=canvas.getActiveObject();"i-text"==currentObject.type&&("plus"==e?spacingNum+=30:spacingNum>=30&&(spacingNum-=30),currentObject.set("charSpacing",spacingNum),canvas.renderAll(),canvas.setActiveObject(currentObject))}}})});

define(["app"],function(app){app.controller("TshirtdesignCtrl",function($scope,$rootScope,$illustration){function onIllustrationAdded(options){var object=options.target;console.log("object:added"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),console.log(object.originalState),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,refreshObj=!0}function onIllustrationModifield(options){var objOffset=canvas.getActiveObject().getBoundingRect(),cH=canvas.height,cW=canvas.width,H0=50,W0=50;if(objOffset.left<W0-objOffset.width||objOffset.left>cW-W0||objOffset.top<H0-objOffset.height||objOffset.top>cH-H0){if(!confirm("削除してもよろしいですか"))return void undoCanvas();canvas.getActiveObject().remove()}var object=options.target;console.log("object:modified"),actionObj===!0&&(stateObj=[stateObj[indexCurr2]],listObj=[listObj[indexCurr2]],actionObj=!1,console.log(stateObj),indexCurr=1),object.saveState(),stateObj[indexCurr]=JSON.stringify(object.originalState),listObj[indexCurr]=object,indexCurr++,indexCurr2=indexCurr-1,console.log(stateObj),refreshObj=!0}function onIllustrationChange(options){}function onObjectOut(){delete currentObj,$scope.designTextValue=""}function undoCanvas(){return 0>=indexCurr?void(indexCurr=0):(refreshObj===!0&&(indexCurr--,refreshObj=!1),console.log("undo"),indexCurr2=indexCurr-1,currentObj=listObj[indexCurr2],currentObj&&currentObj.setOptions(JSON.parse(indexCurr[indexCurr2])),indexCurr--,currentObj.setCoords(),canvas.renderAll(),void(actionObj=!0))}function onObjectSelected(options){var currentObj=options.target;switch(console.log(currentObj.text),$scope.typeObject=currentObj.type,$scope.typeObject){case"i-text":$rootScope.isShowLeftPanel="text";var text=currentObj.text;""!=text&&($scope.designText=text,$scope.designTextValue=text);break;case"path-group":$rootScope.isShowLeftPanel="illustration";break;default:$rootScope.isShowLeftPanel="default"}$rootScope.safeApply()}var canvas=new fabric.Canvas("main-design-container");fabric.Object.prototype.transparentCorners=!1,canvas.on("after:render",function(){console.log("after render")}),canvas.on({"object:added":onIllustrationAdded,"object:moving":onIllustrationChange,"object:scaling":onIllustrationChange,"object:rotating":onIllustrationChange,"object:selected":onObjectSelected,"object:modified":onIllustrationModifield,"selection:cleared":onObjectOut});var currentObj,listObj=[],stateObj=[],indexCurr=0,indexCurr2=0,actionObj=!1,refreshObj=!0,spacingNum=0;$scope.changeIllustrationCategory=function(currentIllustration){$scope.currentIllustrationCate=$illustration.getList(currentIllustration)},$scope.insertSvg=function(item){fabric.loadSVGFromURL(item.path,function(objects,options){var shape=fabric.util.groupSVGElements(objects,options);canvas.add(shape.scale(.6)),shape.set({left:150,top:200}).setCoords(),canvas.renderAll(),canvas.setActiveObject(shape)})},$scope.listColorPatterns=["#000000","#ffff00","#ff6600","#ff0000","#ff6262","#ffa19c","#ff9933","#c45d01","#5d2b03","#ffffcc","#ffff99","#ffd500","#c0db50","#21a52a","#00663f","#abfcab","#36ffaa","#89eaea","#00938c","#005450","#0badff","#006cff","#839aff","#0410a0","#ffb2ff","#f93fff","#6600ca","#ff6699","#999999","#666666","#333333"],$scope.listFontFamily=[{name:"GN Aki iro Sesami Cookies",slug:"gn_aki_iro_sesami_cookies"},{name:"GN-Fuyu-iro_Script_Bold",slug:"gn_fuyu_iro_script_bold"},{name:"GN Killgothic U Kanana",slug:"gn_killgothic_u_kanana"},{name:"GN-Kin-iro_Alphabet_Cookies",slug:"gn_kin_iro_alphabet_cookies"},{name:"GN-Kin-iro_SansSerif",slug:"gn_kin_iro_sansserif"},{name:"GN-Koharuiro_Sunray",slug:"gn_koharuiro_sunray"},{name:"GN-Kyu-pin",slug:"gn_kyu_pin"},{name:"gn_natsu_iro_schedule",slug:"gn_natsu_iro_schedule"},{name:"gnkana_kiniro_sansserif_l",slug:"gnkana_kiniro_sansserif_l"},{name:"gnkana_kiniro_sansserif_st",slug:"gnkana_kiniro_sansserif_st"},{name:"gnkana_kon_iro_nightfall",slug:"gnkana_kon_iro_nightfall"},{name:"ms_gothic",slug:"ms_gothic"},{name:"msmincho",slug:"msmincho"},{name:"ufonts_com_ms_pgothic",slug:"ufonts_com_ms_pgothic"}],$scope.changeColorPattern=function(color){canvas.getActiveObject()&&(canvas.getActiveObject().set("fill",color),canvas.renderAll())},$scope.layerProcess=function(mode){var activeObject=canvas.getActiveObject();if(console.log(activeObject),activeObject){switch(mode){case 1:activeObject.bringForward();break;case 2:activeObject.sendBackwards();break;case 3:activeObject.bringToFront();break;case 4:activeObject.sendToBack()}canvas.renderAll()}},$scope.focusInputText=function(text){currentObj=canvas.getActiveObject(),"undefined"==typeof currentObj||null==currentObj?$scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",textAlign:"center",fontSize:28,fill:"black"}):"i-text"!=currentObj.type?$scope.iText=new fabric.IText("",{left:150,top:200,fontFamily:"Arial",fontWeight:"normal",textAlign:"center",fontSize:28,fill:"black"}):$scope.iText=currentObj},$scope.inputText=function(e){if("undefined"!=typeof $scope.iText){var iText=$scope.iText;iText.text=e,canvas.add(iText),canvas.renderAll(),canvas.setActiveObject(iText)}},$scope.setFontFamily=function(font){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&(currentObj.set("fontFamily",font),canvas.renderAll(),canvas.setActiveObject(currentObj))}},$scope.setLetterSpacingText=function(e){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&("plus"==e?spacingNum+=30:spacingNum>=30&&(spacingNum-=30),currentObj.set("charSpacing",spacingNum),canvas.renderAll(),canvas.setActiveObject(currentObj))}},$scope.rotateText=function(style){if(canvas.getActiveObject()){var currentObj=canvas.getActiveObject();"i-text"==currentObj.type&&(currentObj.set("rotate",Math.PI/4),canvas.renderAll(),canvas.setActiveObject(currentObj))}}})});

dist/views/design_part/text.html

Diff comments View file @ e4a2f2d

1	<li>	1	<li>
2	<div class="title">	2	<div class="title">
3	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->	3	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
4	文字入力	4	文字入力
5	</div>	5	</div>
6	<div class="content clearfix">	6	<div class="content clearfix">
7	<div>	7	<div>
8	<input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText()" ng-change="inputText(design_text)" ng-model="design_text">	8	<input type="text" class="form-control" placeholder="ここに入力してください。" id="input-design-text" ng-focus="focusInputText(designText)" ng-change="inputText(designText)" ng-model="designText" ng-value="designTextValue">
9	</div>	9	</div>
10	<div>	10	<div>
11	<ul class="font-family-box">	11	<ul class="font-family-box">
12	<li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li>	12	<li ng-repeat="item in listFontFamily" ng-click="setFontFamily(item.slug)" ng-style="{'font-family' : item.slug}">{{ item.name }}</li>
13	</ul>	13	</ul>
14	</div>	14	</div>
15	<div>	15	<div>
16	<div>文字を変形する</div>	16	<div ng-click="rotateText('1')">文字を変形する</div>
17	</div>	17	</div>
18	<div class="clearfix spacing-letter ">	18	<div class="clearfix spacing-letter ">
19	<div class="pull-left text-label">	19	<div class="pull-left text-label">
20	文字間隔 :	20	文字間隔 :
21	</div>	21	</div>
22	<div class="pull-right">	22	<div class="pull-right">
23	<div class="box clearfix">	23	<div class="box clearfix">
24	<div class="item item-plus" ng-click="setLetterSpacingText('plus')">	24	<div class="item item-plus" ng-click="setLetterSpacingText('plus')">
25	<i class="fa fa-plus-square-o" aria-hidden="true"></i>	25	<i class="fa fa-plus-square-o" aria-hidden="true"></i>
26	</div>	26	</div>
27	<div class="item item-text">	27	<div class="item item-text">
28	リセット	28	リセット
29	</div>	29	</div>
30	<div class="item item-minus" ng-click="setLetterSpacingText('minus')">	30	<div class="item item-minus" ng-click="setLetterSpacingText('minus')">
31	<i class="fa fa-minus-square-o" aria-hidden="true"></i>	31	<i class="fa fa-minus-square-o" aria-hidden="true"></i>
32	</div>	32	</div>
33	</div>	33	</div>
34	</div>	34	</div>
35	</div>	35	</div>
36	</div>	36	</div>
37	</li>	37	</li>
38	<li>	38	<li>
39	<div class="title">	39	<div class="title">
40	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->	40	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
41	カラー変更	41	カラー変更
42	<!--<div class="pull-right">元の色に戻す</div>-->	42	<!--<div class="pull-right">元の色に戻す</div>-->
43	</div>	43	</div>
44	<div class="content clearfix">	44	<div class="content clearfix">
45	<div class="color-patterns">	45	<div class="color-patterns">
46	<div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">	46	<div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}">
47	</div>	47	</div>
48	<div class="clearfix"></div>	48	<div class="clearfix"></div>
49	</div>	49	</div>
50	</div>	50	</div>
51	</li>	51	</li>
52		52
53	<li>	53	<li>
54	<div class="title">	54	<div class="title">
55	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->	55	<!--<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>-->
56	重ね順変更	56	重ね順変更
57	</div>	57	</div>
58	<div class="content clearfix">	58	<div class="content clearfix">
59	<div class="col-xs-3 layer-item" ng-click="layerProcess(1)">	59	<div class="col-xs-3 layer-item" ng-click="layerProcess(1)">
60	<img src="images/layer-icon-1.png"/>	60	<img src="images/layer-icon-1.png"/>
61	<div>前面へ</div>	61	<div>前面へ</div>
62	</div>	62	</div>
63	<div class="col-xs-3 layer-item" ng-click="layerProcess(2)">	63	<div class="col-xs-3 layer-item" ng-click="layerProcess(2)">
64	<img src="images/layer-icon-2.png"/>	64	<img src="images/layer-icon-2.png"/>
65	<div>背面へ</div>	65	<div>背面へ</div>
66	</div>	66	</div>
67	<div class="col-xs-3 layer-item" ng-click="layerProcess(3)">	67	<div class="col-xs-3 layer-item" ng-click="layerProcess(3)">
68	<img src="images/layer-icon-3.png"/>	68	<img src="images/layer-icon-3.png"/>
69	<div>最前面へ</div>	69	<div>最前面へ</div>
70	</div>	70	</div>
71	<div class="col-xs-3 layer-item" ng-click="layerProcess(4)">	71	<div class="col-xs-3 layer-item" ng-click="layerProcess(4)">
72	<img src="images/layer-icon-4.png"/>	72	<img src="images/layer-icon-4.png"/>
73	<div>最前面へ</div>	73	<div>最前面へ</div>
74	</div>	74	</div>
75	</div>	75	</div>
76	</li>	76	</li>
77		77