tshirtdesign.js
2.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
define(['app'], function (app) {
//'use strict';
app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
var canvas = new fabric.Canvas('main-design-container');
fabric.Object.prototype.transparentCorners = false;
canvas.on('after:render', function() {
});
canvas.on({
'object:moving': onIllustrationChange,
'object:scaling': onIllustrationChange,
'object:rotating': onIllustrationChange,
'object:selected': onIllustrationSelected,
'selected:deselected' : onIllustrationOut,
//'selected:out' : onIllustrationOut,
//'mouse:up' : onIllustrationOut,
});
function onIllustrationChange(options) {
// options.target.setCoords();
// canvas.forEachObject(function(obj) {
// if (obj === options.target) return;
// obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
// });
}
function onIllustrationOut() {
console.log('out object');
}
$scope.currentObject = null;
function onIllustrationSelected(options) {
var object = options.target;
$scope.typeObject = object.type;
switch ($scope.typeObject) {
case 'i-text' :
$('#input-design-text').focus();
$rootScope.isShowLeftPanel = 'text';
break;
case 'path-group' :
$rootScope.isShowLeftPanel = 'illustration';
break;
default :
$rootScope.isShowLeftPanel = 'default';
break;
}
$rootScope.safeApply();
}
// Illustration process
$scope.changeIllustrationCategory = function(currentIllustration){
$scope.currentIllustrationCate = $illustration.getList(currentIllustration);
//console.log($scope.currentIllustrationCate);
};
$scope.insertSvg = function(item){
fabric.loadSVGFromURL(item.path, function(objects, options) {
var shape = fabric.util.groupSVGElements(objects, options);
// shape.setFill('green');
canvas.add(shape.scale(0.6));
shape.set({ left: 150, top: 200 }).setCoords();
canvas.renderAll();
canvas.setActiveObject(shape);
});
};
// color pattern
$scope.changeColorPattern = function(color){
canvas.getActiveObject().set("fill", color);
canvas.renderAll();
};
$scope.listColorPatterns = [
'#000000',
'#ffff00',
'#ff6600',
'#ff0000',
'#ff6262',
'#ffa19c',
'#ff9933',
'#c45d01',
'#5d2b03',
'#ffffcc',
'#000000',
'#ffff00',
'#ff6600',
'#ff0000',
'#ff6262',
'#ffa19c',
'#ff9933',
'#c45d01',
'#5d2b03',
'#ffffcc',
'#000000',
'#ffff00',
'#ff6600',
'#ff0000',
'#ff6262',
'#ffa19c',
'#ff9933',
'#c45d01',
'#5d2b03',
'#ffffcc',
'#ffffcc'
];
$scope.focusInputText = function() {
if($scope.typeObject != 'i-text')
$scope.iText = new fabric.IText('');
};
//Design text
$scope.inputText = function(e) {
var iText = $scope.iText;
iText.text = e;
canvas.add(iText);
canvas.renderAll();
canvas.setActiveObject(iText);
};
//init
//$scope.showIllustration('default');
});
});