TRUONG / T-Shats Frontend

Download as
Browse Code ยป

Commit cc65fa10271649ffbede055223658314da0a743c

Authored by DANG
1 parent 010854c35d
Exists in master and in 1 other branch develop

Custom control

Showing 9 changed files with 60 additions and 2 deletions Side-by-side Diff

No preview for this file type
No preview for this file type
app/images/.DS_Store
Diff comments   View file @ cc65fa1
No preview for this file type
app/images/control-icon/ok.png
Diff comments   View file @ cc65fa1

3.45 KB
app/images/control-icon/resize.png
Diff comments   View file @ cc65fa1

3.78 KB
app/images/control-icon/rotate.png
Diff comments   View file @ cc65fa1

4.07 KB
... ... @@ -41,6 +41,7 @@
41 41 <script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
42 42 <script type="text/javascript" src="bower_components/fabric.js/dist/fabric.min.js"></script>
43 43 <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
  44 + <script type="text/javascript" src="bower_components/fabric-customise-controls/dist/customiseControls.min.js"></script>
44 45 <!--[if lt IE 9]>
45 46 <script src="bower_components/es5-shim/es5-shim.js"></script>
46 47 <script src="bower_components/json3/lib/json3.min.js"></script>
app/scripts/controllers/tshirtdesign.js
Diff comments   View file @ cc65fa1
... ... @@ -4,11 +4,57 @@
4 4 app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) {
5 5 var canvas = new fabric.Canvas('main-design-container');
6 6 fabric.Object.prototype.transparentCorners = false;
  7 + fabric.Object.prototype.hasRotatingPoint = false;
  8 + var ctrVisible = {tl: false, ml:false, bl:false, mb: false, br: true, mr: false, tr: true, mt: true, mtr: false};
  9 + for(key in ctrVisible) {
  10 + fabric.Object.prototype.setControlVisible(key,ctrVisible[key]);
  11 + }
  12 + fabric.Object.prototype.customiseCornerIcons({
  13 + settings: {
  14 + borderColor: '#0000ff',
  15 + cornerSize: 25,
  16 + cornerShape: 'circle',
  17 + cornerBackgroundColor: '#0171b4',
  18 + cornerPadding: 6
  19 + },
  20 + mt: {
  21 + icon: 'images/control-icon/ok.png'
  22 + },
  23 + br: {
  24 + icon: 'images/control-icon/resize.png'
  25 + },
  26 + tr: {
  27 + icon: 'images/control-icon/rotate.png'
  28 + }
  29 + });
7 30  
  31 + fabric.Canvas.prototype.customiseControls({
  32 + mt: {
  33 + cursor: 'pointer',
  34 + action: function (e, target) {
  35 + target.hasControls = false;
  36 + target.hasBorders = false;
  37 + canvas.deactivateAll().renderAll();
  38 + setTimeout(function() {
  39 + target.hasControls = true;
  40 + target.hasBorders = true;
  41 + }, 1);
  42 + }
  43 + },
  44 + br: {
  45 +
  46 + },
  47 + tr: {
  48 + action: 'rotate',
  49 + cursor: 'crosshair'
  50 + }
  51 + });
  52 +
8 53 canvas.on('after:render', function() {
9 54 // console.log('after render');
10 55 });
11 56 canvas.on({
  57 + 'mouse:up' : mouseUp,
12 58 'object:added' : onIllustrationAdded,
13 59 'object:moving' : onIllustrationMoving,
14 60 'object:scaling' : onIllustrationChange,
... ... @@ -26,6 +72,13 @@
26 72 var actionObj = false;
27 73 var refreshObj = true;
28 74 var spacingNum = 0;
  75 +
  76 + function mouseUp(e) {
  77 + currentObj = canvas.getActiveObject();
  78 + console.log(currentObj);
  79 + currentObj.activate();
  80 + }
  81 +
29 82  
30 83 function onIllustrationAdded(options){
31 84 var object = options.target;
... ... @@ -164,7 +217,10 @@
164 217  
165 218 function onObjectSelected(options) {
166 219 var currentObj = options.target;
167   - // console.log(currentObj.text);
  220 + //Set default
  221 + console.log('selected object');
  222 + // currentObj.hasControls = true;
  223 + // currentObj.hasBorders = true;
168 224 $scope.typeObject = currentObj.type;
169 225 switch ($scope.typeObject) {
170 226 case 'i-text' :
... ... @@ -14,7 +14,8 @@
14 14 "bootstrap": "~3.3.7",
15 15 "jquery": "~3.1.1",
16 16 "fabric.js": "fabric#^1.6.6",
17   - "angular-ui-select2": "^0.0.5"
  17 + "angular-ui-select2": "^0.0.5",
  18 + "fabric-customise-controls": "^0.1.8"
18 19 },
19 20 "devDependencies": {
20 21 "angular-mocks": "1.2.11",