tshirtdesign.js
2.27 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
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': onllustrationSelected,
});
function onIllustrationChange(options) {
// options.target.setCoords();
// canvas.forEachObject(function(obj) {
// if (obj === options.target) return;
// obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1);
// });
}
$scope.currentObject = null;
function onllustrationSelected(options){
$scope.currentObject = canvas.getActiveObject();
console.log(canvas.getActiveObject());
}
// 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'
];
//Design text
$scope.inputText = function(e) {
var text = e;
var iText = new fabric.IText(text);
canvas.add(iText);
canvas.renderAll();
canvas.setActiveObject(iText);
}
});
});