Commit d75c45c56c1fcbf03e232c5845cb8841c5bbe087
1 parent
6f105dbd55
Exists in
master
and in
2 other branches
remove test showcase
Showing 1 changed file with 6 additions and 6 deletions Inline Diff
app/scripts/controllers/tshirtdesign.js
| 1 | define(['app'], function (app) { | 1 | define(['app'], function (app) { |
| 2 | 'use strict'; | 2 | 'use strict'; |
| 3 | 3 | ||
| 4 | app.controller('TshirtdesignCtrl', function ($scope, $illustration) { | 4 | app.controller('TshirtdesignCtrl', function ($scope, $illustration) { |
| 5 | //$scope.IllustrationList = $illustration.getAll(); | 5 | //$scope.IllustrationList = $illustration.getAll(); |
| 6 | 6 | ||
| 7 | var canvas = new fabric.Canvas('main-design-container'); | 7 | var canvas = new fabric.Canvas('main-design-container'); |
| 8 | fabric.Object.prototype.transparentCorners = false; | 8 | fabric.Object.prototype.transparentCorners = false; |
| 9 | 9 | ||
| 10 | canvas.on('after:render', function() { | 10 | canvas.on('after:render', function() { |
| 11 | }); | 11 | }); |
| 12 | canvas.on({ | 12 | canvas.on({ |
| 13 | 'object:moving': onIllustrationChange, | 13 | 'object:moving': onIllustrationChange, |
| 14 | 'object:scaling': onIllustrationChange, | 14 | 'object:scaling': onIllustrationChange, |
| 15 | 'object:rotating': onIllustrationChange, | 15 | 'object:rotating': onIllustrationChange, |
| 16 | 'object:selected': onllustrationSelected, | 16 | 'object:selected': onllustrationSelected, |
| 17 | }); | 17 | }); |
| 18 | function onIllustrationChange(options) { | 18 | function onIllustrationChange(options) { |
| 19 | options.target.setCoords(); | 19 | // options.target.setCoords(); |
| 20 | canvas.forEachObject(function(obj) { | 20 | // canvas.forEachObject(function(obj) { |
| 21 | if (obj === options.target) return; | 21 | // if (obj === options.target) return; |
| 22 | obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); | 22 | // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); |
| 23 | }); | 23 | // }); |
| 24 | } | 24 | } |
| 25 | 25 | ||
| 26 | $scope.currentObject = null; | 26 | $scope.currentObject = null; |
| 27 | function onllustrationSelected(options){ | 27 | function onllustrationSelected(options){ |
| 28 | $scope.currentObject = canvas.getActiveObject(); | 28 | $scope.currentObject = canvas.getActiveObject(); |
| 29 | console.log(canvas.getActiveObject()); | 29 | console.log(canvas.getActiveObject()); |
| 30 | } | 30 | } |
| 31 | 31 | ||
| 32 | // Illustration process | 32 | // Illustration process |
| 33 | $scope.changeIllustrationCategory = function(currentIllustration){ | 33 | $scope.changeIllustrationCategory = function(currentIllustration){ |
| 34 | $scope.currentIllustrationCate = $illustration.getList(currentIllustration); | 34 | $scope.currentIllustrationCate = $illustration.getList(currentIllustration); |
| 35 | console.log($scope.currentIllustrationCate); | 35 | console.log($scope.currentIllustrationCate); |
| 36 | } | 36 | } |
| 37 | 37 | ||
| 38 | $scope.insertSvg = function(item){ | 38 | $scope.insertSvg = function(item){ |
| 39 | fabric.loadSVGFromURL(item.path, function(objects, options) { | 39 | fabric.loadSVGFromURL(item.path, function(objects, options) { |
| 40 | var shape = fabric.util.groupSVGElements(objects, options); | 40 | var shape = fabric.util.groupSVGElements(objects, options); |
| 41 | shape.setFill('green'); | 41 | // shape.setFill('green'); |
| 42 | canvas.add(shape.scale(0.6)); | 42 | canvas.add(shape.scale(0.6)); |
| 43 | shape.set({ left: 150, top: 200 }).setCoords(); | 43 | shape.set({ left: 150, top: 200 }).setCoords(); |
| 44 | canvas.renderAll(); | 44 | canvas.renderAll(); |
| 45 | canvas.setActiveObject(shape); | 45 | canvas.setActiveObject(shape); |
| 46 | }); | 46 | }); |
| 47 | } | 47 | } |
| 48 | 48 | ||
| 49 | // color pattern | 49 | // color pattern |
| 50 | $scope.changeColorPattern = function(color){ | 50 | $scope.changeColorPattern = function(color){ |
| 51 | canvas.getActiveObject().set("fill", color); | 51 | canvas.getActiveObject().set("fill", color); |
| 52 | canvas.renderAll(); | 52 | canvas.renderAll(); |
| 53 | } | 53 | } |
| 54 | $scope.listColorPatterns = [ | 54 | $scope.listColorPatterns = [ |
| 55 | '#000000', | 55 | '#000000', |
| 56 | '#ffff00', | 56 | '#ffff00', |
| 57 | '#ff6600', | 57 | '#ff6600', |
| 58 | '#ff0000', | 58 | '#ff0000', |
| 59 | '#ff6262', | 59 | '#ff6262', |
| 60 | '#ffa19c', | 60 | '#ffa19c', |
| 61 | '#ff9933', | 61 | '#ff9933', |
| 62 | '#c45d01', | 62 | '#c45d01', |
| 63 | '#5d2b03', | 63 | '#5d2b03', |
| 64 | '#ffffcc', | 64 | '#ffffcc', |
| 65 | 65 | ||
| 66 | '#000000', | 66 | '#000000', |
| 67 | '#ffff00', | 67 | '#ffff00', |
| 68 | '#ff6600', | 68 | '#ff6600', |
| 69 | '#ff0000', | 69 | '#ff0000', |
| 70 | '#ff6262', | 70 | '#ff6262', |
| 71 | '#ffa19c', | 71 | '#ffa19c', |
| 72 | '#ff9933', | 72 | '#ff9933', |
| 73 | '#c45d01', | 73 | '#c45d01', |
| 74 | '#5d2b03', | 74 | '#5d2b03', |
| 75 | '#ffffcc', | 75 | '#ffffcc', |
| 76 | 76 | ||
| 77 | '#000000', | 77 | '#000000', |
| 78 | '#ffff00', | 78 | '#ffff00', |
| 79 | '#ff6600', | 79 | '#ff6600', |
| 80 | '#ff0000', | 80 | '#ff0000', |
| 81 | '#ff6262', | 81 | '#ff6262', |
| 82 | '#ffa19c', | 82 | '#ffa19c', |
| 83 | '#ff9933', | 83 | '#ff9933', |
| 84 | '#c45d01', | 84 | '#c45d01', |
| 85 | '#5d2b03', | 85 | '#5d2b03', |
| 86 | '#ffffcc', | 86 | '#ffffcc', |
| 87 | 87 | ||
| 88 | '#ffffcc' | 88 | '#ffffcc' |
| 89 | ] | 89 | ] |
| 90 | }); | 90 | }); |
| 91 | }); | 91 | }); |
| 92 | 92 |