Commit 98acd3acd9faeb8d9d78736601394ec0a82b6391
1 parent
c9d8b2fe3d
Exists in
master
and in
1 other branch
Change text
Showing 3 changed files with 24 additions and 1 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, $rootScope, $illustration) { | 4 | app.controller('TshirtdesignCtrl', function ($scope, $rootScope, $illustration) { |
| 5 | 5 | ||
| 6 | var canvas = new fabric.Canvas('main-design-container'); | 6 | var canvas = new fabric.Canvas('main-design-container'); |
| 7 | fabric.Object.prototype.transparentCorners = false; | 7 | fabric.Object.prototype.transparentCorners = false; |
| 8 | 8 | ||
| 9 | canvas.on('after:render', function() { | 9 | canvas.on('after:render', function() { |
| 10 | }); | 10 | }); |
| 11 | canvas.on({ | 11 | canvas.on({ |
| 12 | 'object:moving': onIllustrationChange, | 12 | 'object:moving': onIllustrationChange, |
| 13 | 'object:scaling': onIllustrationChange, | 13 | 'object:scaling': onIllustrationChange, |
| 14 | 'object:rotating': onIllustrationChange, | 14 | 'object:rotating': onIllustrationChange, |
| 15 | 'object:selected': onllustrationSelected, | 15 | 'object:selected': onllustrationSelected, |
| 16 | }); | 16 | }); |
| 17 | function onIllustrationChange(options) { | 17 | function onIllustrationChange(options) { |
| 18 | // options.target.setCoords(); | 18 | // options.target.setCoords(); |
| 19 | // canvas.forEachObject(function(obj) { | 19 | // canvas.forEachObject(function(obj) { |
| 20 | // if (obj === options.target) return; | 20 | // if (obj === options.target) return; |
| 21 | // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); | 21 | // obj.setOpacity(options.target.intersectsWithObject(obj) ? 0.5 : 1); |
| 22 | // }); | 22 | // }); |
| 23 | } | 23 | } |
| 24 | 24 | ||
| 25 | $scope.currentObject = null; | 25 | $scope.currentObject = null; |
| 26 | function onllustrationSelected(options){ | 26 | function onllustrationSelected(options){ |
| 27 | $scope.currentObject = canvas.getActiveObject(); | 27 | $scope.currentObject = canvas.getActiveObject(); |
| 28 | console.log(canvas.getActiveObject()); | 28 | console.log(canvas.getActiveObject()); |
| 29 | } | 29 | } |
| 30 | 30 | ||
| 31 | // Illustration process | 31 | // Illustration process |
| 32 | $scope.changeIllustrationCategory = function(currentIllustration){ | 32 | $scope.changeIllustrationCategory = function(currentIllustration){ |
| 33 | $scope.currentIllustrationCate = $illustration.getList(currentIllustration); | 33 | $scope.currentIllustrationCate = $illustration.getList(currentIllustration); |
| 34 | console.log($scope.currentIllustrationCate); | 34 | console.log($scope.currentIllustrationCate); |
| 35 | }; | 35 | }; |
| 36 | 36 | ||
| 37 | $scope.insertSvg = function(item){ | 37 | $scope.insertSvg = function(item){ |
| 38 | fabric.loadSVGFromURL(item.path, function(objects, options) { | 38 | fabric.loadSVGFromURL(item.path, function(objects, options) { |
| 39 | var shape = fabric.util.groupSVGElements(objects, options); | 39 | var shape = fabric.util.groupSVGElements(objects, options); |
| 40 | // shape.setFill('green'); | 40 | // shape.setFill('green'); |
| 41 | canvas.add(shape.scale(0.6)); | 41 | canvas.add(shape.scale(0.6)); |
| 42 | shape.set({ left: 150, top: 200 }).setCoords(); | 42 | shape.set({ left: 150, top: 200 }).setCoords(); |
| 43 | canvas.renderAll(); | 43 | canvas.renderAll(); |
| 44 | canvas.setActiveObject(shape); | 44 | canvas.setActiveObject(shape); |
| 45 | }); | 45 | }); |
| 46 | }; | 46 | }; |
| 47 | 47 | ||
| 48 | // color pattern | 48 | // color pattern |
| 49 | $scope.changeColorPattern = function(color){ | 49 | $scope.changeColorPattern = function(color){ |
| 50 | canvas.getActiveObject().set("fill", color); | 50 | canvas.getActiveObject().set("fill", color); |
| 51 | canvas.renderAll(); | 51 | canvas.renderAll(); |
| 52 | }; | 52 | }; |
| 53 | $scope.listColorPatterns = [ | 53 | $scope.listColorPatterns = [ |
| 54 | '#000000', | 54 | '#000000', |
| 55 | '#ffff00', | 55 | '#ffff00', |
| 56 | '#ff6600', | 56 | '#ff6600', |
| 57 | '#ff0000', | 57 | '#ff0000', |
| 58 | '#ff6262', | 58 | '#ff6262', |
| 59 | '#ffa19c', | 59 | '#ffa19c', |
| 60 | '#ff9933', | 60 | '#ff9933', |
| 61 | '#c45d01', | 61 | '#c45d01', |
| 62 | '#5d2b03', | 62 | '#5d2b03', |
| 63 | '#ffffcc', | 63 | '#ffffcc', |
| 64 | '#000000', | 64 | '#000000', |
| 65 | '#ffff00', | 65 | '#ffff00', |
| 66 | '#ff6600', | 66 | '#ff6600', |
| 67 | '#ff0000', | 67 | '#ff0000', |
| 68 | '#ff6262', | 68 | '#ff6262', |
| 69 | '#ffa19c', | 69 | '#ffa19c', |
| 70 | '#ff9933', | 70 | '#ff9933', |
| 71 | '#c45d01', | 71 | '#c45d01', |
| 72 | '#5d2b03', | 72 | '#5d2b03', |
| 73 | '#ffffcc', | 73 | '#ffffcc', |
| 74 | '#000000', | 74 | '#000000', |
| 75 | '#ffff00', | 75 | '#ffff00', |
| 76 | '#ff6600', | 76 | '#ff6600', |
| 77 | '#ff0000', | 77 | '#ff0000', |
| 78 | '#ff6262', | 78 | '#ff6262', |
| 79 | '#ffa19c', | 79 | '#ffa19c', |
| 80 | '#ff9933', | 80 | '#ff9933', |
| 81 | '#c45d01', | 81 | '#c45d01', |
| 82 | '#5d2b03', | 82 | '#5d2b03', |
| 83 | '#ffffcc', | 83 | '#ffffcc', |
| 84 | '#ffffcc' | 84 | '#ffffcc' |
| 85 | ]; | 85 | ]; |
| 86 | 86 | ||
| 87 | 87 | ||
| 88 | //Design text | ||
| 89 | $scope.inputText = function(e) { | ||
| 90 | var text = e; | ||
| 91 | var iText = new fabric.IText(text); | ||
| 92 | canvas.add(iText); | ||
| 93 | canvas.renderAll(); | ||
| 94 | canvas.setActiveObject(iText); | ||
| 95 | } | ||
| 96 | |||
| 97 | |||
| 88 | }); | 98 | }); |
| 89 | }); | 99 | }); |
| 90 | 100 |
app/views/design_part/text.html
| File was created | 1 | <li> | |
| 2 | <div class="title"> | ||
| 3 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | ||
| 4 | Text | ||
| 5 | </div> | ||
| 6 | <div class="content clearfix"> | ||
| 7 | <input type="text" class="form-control" ng-keyup="inputText(design_text)" ng-model="design_text"> | ||
| 8 | </div> | ||
| 9 | </li> | ||
| 10 |
app/views/tshirt-design.html
| 1 | <!-- Modal --> | 1 | <!-- Modal --> |
| 2 | <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl"> | 2 | <div class="modal fade" id="tshirt-design" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" ng-controller="TshirtdesignCtrl"> |
| 3 | 3 | ||
| 4 | <div class="modal-dialog" role="document"> | 4 | <div class="modal-dialog" role="document"> |
| 5 | <div class="modal-content"> | 5 | <div class="modal-content"> |
| 6 | <div class="modal-header"> | 6 | <div class="modal-header"> |
| 7 | <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button> | 7 | <button class="black" ng-click="modalClose()"><i class="fa fa-times" aria-hidden="true"></i> キャンセル</button> |
| 8 | <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button> | 8 | <button class="black"> <i class="fa fa-angle-right" aria-hidden="true"></i> はじめての方へ</button> |
| 9 | </div> | 9 | </div> |
| 10 | <div class="modal-body"> | 10 | <div class="modal-body"> |
| 11 | <header class="clearfix"> | 11 | <header class="clearfix"> |
| 12 | <ul class="nav pull-left"> | 12 | <ul class="nav pull-left"> |
| 13 | <li ng-class="{'active': isShowLeftPanel=='default'}" ng-click="showIllustration('default')"> | 13 | <li ng-class="{'active': isShowLeftPanel=='text'}" ng-click="showIllustration('text')"> |
| 14 | <i class="fa fa-jpy" aria-hidden="true"></i> 文字 | 14 | <i class="fa fa-jpy" aria-hidden="true"></i> 文字 |
| 15 | </li> | 15 | </li> |
| 16 | <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showIllustration('illustration')"> | 16 | <li ng-class="{'active': isShowLeftPanel=='illustration'}" ng-click="showIllustration('illustration')"> |
| 17 | <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ | 17 | <i class="fa fa-btc" aria-hidden="true"></i> イラスト・イメージ |
| 18 | </li> | 18 | </li> |
| 19 | <li> | 19 | <li> |
| 20 | <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真 | 20 | <i class="fa fa-money" aria-hidden="true"></i> 自分の画像・写真 |
| 21 | </li> | 21 | </li> |
| 22 | <li> | 22 | <li> |
| 23 | <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去 | 23 | <i class="fa fa-minus-circle" aria-hidden="true"></i> 全消去 |
| 24 | </li> | 24 | </li> |
| 25 | </ul> | 25 | </ul> |
| 26 | <div class="action pull-right"> | 26 | <div class="action pull-right"> |
| 27 | <button class="white"> | 27 | <button class="white"> |
| 28 | アルバムを開く | 28 | アルバムを開く |
| 29 | </button> | 29 | </button> |
| 30 | <button class="white"> | 30 | <button class="white"> |
| 31 | アルバムに入れる | 31 | アルバムに入れる |
| 32 | </button> | 32 | </button> |
| 33 | </div> | 33 | </div> |
| 34 | </header> | 34 | </header> |
| 35 | <section class="tshirt-design-container clearfix"> | 35 | <section class="tshirt-design-container clearfix"> |
| 36 | <div class="aside col-xs-4"> | 36 | <div class="aside col-xs-4"> |
| 37 | <ul id="choice-design-option" ng-show="isShowLeftPanel=='default'"> | 37 | <ul id="choice-design-option" ng-show="isShowLeftPanel=='default'"> |
| 38 | <li> | 38 | <li> |
| 39 | <div class="hover"></div> | 39 | <div class="hover"></div> |
| 40 | <div class="title"> | 40 | <div class="title"> |
| 41 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 41 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
| 42 | 文字を追加 | 42 | 文字を追加 |
| 43 | </div> | 43 | </div> |
| 44 | <div class="content clearfix"> | 44 | <div class="content clearfix"> |
| 45 | <div class="col-xs-2 text-center"> | 45 | <div class="col-xs-2 text-center"> |
| 46 | <i class="fa fa-jpy" aria-hidden="true"></i> | 46 | <i class="fa fa-jpy" aria-hidden="true"></i> |
| 47 | </div> | 47 | </div> |
| 48 | <div class="col-xs-10 des padding-left-0"> | 48 | <div class="col-xs-10 des padding-left-0"> |
| 49 | 書体を選んでお好きな文字を入力できます | 49 | 書体を選んでお好きな文字を入力できます |
| 50 | </div> | 50 | </div> |
| 51 | </div> | 51 | </div> |
| 52 | </li> | 52 | </li> |
| 53 | <li> | 53 | <li> |
| 54 | <div class="hover"></div> | 54 | <div class="hover"></div> |
| 55 | <div class="title"> | 55 | <div class="title"> |
| 56 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 56 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
| 57 | イラストやイメージを追加 | 57 | イラストやイメージを追加 |
| 58 | </div> | 58 | </div> |
| 59 | <div class="content clearfix"> | 59 | <div class="content clearfix"> |
| 60 | <div class="col-xs-2 text-center"> | 60 | <div class="col-xs-2 text-center"> |
| 61 | <i class="fa fa-btc" aria-hidden="true"></i> | 61 | <i class="fa fa-btc" aria-hidden="true"></i> |
| 62 | </div> | 62 | </div> |
| 63 | <div class="col-xs-10 des padding-left-0"> | 63 | <div class="col-xs-10 des padding-left-0"> |
| 64 | 自由にお使いいただけるデザイン画像をご用意しました | 64 | 自由にお使いいただけるデザイン画像をご用意しました |
| 65 | </div> | 65 | </div> |
| 66 | </div> | 66 | </div> |
| 67 | </li> | 67 | </li> |
| 68 | <li> | 68 | <li> |
| 69 | <div class="hover"></div> | 69 | <div class="hover"></div> |
| 70 | <div class="title"> | 70 | <div class="title"> |
| 71 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 71 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
| 72 | 自分の画像・写真を追加 | 72 | 自分の画像・写真を追加 |
| 73 | </div> | 73 | </div> |
| 74 | <div class="content clearfix"> | 74 | <div class="content clearfix"> |
| 75 | <div class="col-xs-2 text-center"> | 75 | <div class="col-xs-2 text-center"> |
| 76 | <i class="fa fa-jpy" aria-hidden="true"></i> | 76 | <i class="fa fa-jpy" aria-hidden="true"></i> |
| 77 | </div> | 77 | </div> |
| 78 | <div class="col-xs-10 des padding-left-0"> | 78 | <div class="col-xs-10 des padding-left-0"> |
| 79 | ご自分で用意した画像をアップロードして使えます | 79 | ご自分で用意した画像をアップロードして使えます |
| 80 | </div> | 80 | </div> |
| 81 | </div> | 81 | </div> |
| 82 | </li> | 82 | </li> |
| 83 | <li> | 83 | <li> |
| 84 | <div class="hover"></div> | 84 | <div class="hover"></div> |
| 85 | <div class="title"> | 85 | <div class="title"> |
| 86 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 86 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
| 87 | おすすめデザインを使う | 87 | おすすめデザインを使う |
| 88 | </div> | 88 | </div> |
| 89 | <div class="content clearfix"> | 89 | <div class="content clearfix"> |
| 90 | <div class="col-xs-2 text-center"> | 90 | <div class="col-xs-2 text-center"> |
| 91 | <i class="fa fa-jpy" aria-hidden="true"></i> | 91 | <i class="fa fa-jpy" aria-hidden="true"></i> |
| 92 | </div> | 92 | </div> |
| 93 | <div class="col-xs-10 des padding-left-0"> | 93 | <div class="col-xs-10 des padding-left-0"> |
| 94 | おすすめデザインデータをご自由にカスタマイズしてお使いください | 94 | おすすめデザインデータをご自由にカスタマイズしてお使いください |
| 95 | </div> | 95 | </div> |
| 96 | </div> | 96 | </div> |
| 97 | </li> | 97 | </li> |
| 98 | </ul> | 98 | </ul> |
| 99 | <ul id="choice-illustration" ng-show="isShowLeftPanel=='illustration'"> | 99 | <ul id="choice-illustration" ng-show="isShowLeftPanel=='illustration'"> |
| 100 | <li> | 100 | <li> |
| 101 | <div class="hover"></div> | 101 | <div class="hover"></div> |
| 102 | <div class="title"> | 102 | <div class="title"> |
| 103 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 103 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
| 104 | items | 104 | items |
| 105 | </div> | 105 | </div> |
| 106 | <div class="content clearfix"> | 106 | <div class="content clearfix"> |
| 107 | <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration)" data-placeholder="Choose category" style="width: 100%"> | 107 | <select id="illustration-select-category" ui-select2="illustrationSelectConfig" ng-model="currentIllustration" ng-change="changeIllustrationCategory(currentIllustration)" data-placeholder="Choose category" style="width: 100%"> |
| 108 | <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option> | 108 | <option ng-repeat="(key,cate) in IllustrationList" value="{{key}}">{{cate.name}}</option> |
| 109 | </select> | 109 | </select> |
| 110 | <div class="illustration-list"> | 110 | <div class="illustration-list"> |
| 111 | <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list" ng-click="insertSvg(item)"> | 111 | <div class="illstration-item" ng-repeat="item in currentIllustrationCate.list" ng-click="insertSvg(item)"> |
| 112 | <img ng-src="{{item.path}}"/> | 112 | <img ng-src="{{item.path}}"/> |
| 113 | </div> | 113 | </div> |
| 114 | <div class="clearfix"></div> | 114 | <div class="clearfix"></div> |
| 115 | </div> | 115 | </div> |
| 116 | </div> | 116 | </div> |
| 117 | </li> | 117 | </li> |
| 118 | <li> | 118 | <li> |
| 119 | <div class="hover"></div> | 119 | <div class="hover"></div> |
| 120 | <div class="title"> | 120 | <div class="title"> |
| 121 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 121 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
| 122 | Color to fill | 122 | Color to fill |
| 123 | </div> | 123 | </div> |
| 124 | <div class="content clearfix"> | 124 | <div class="content clearfix"> |
| 125 | <div class="color-patterns"> | 125 | <div class="color-patterns"> |
| 126 | <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"> | 126 | <div class="color-pattern-item" ng-repeat="color in listColorPatterns track by $index" ng-click="changeColorPattern(color)" ng-style="{'background-color': color}"> |
| 127 | </div> | 127 | </div> |
| 128 | <div class="clearfix"></div> | 128 | <div class="clearfix"></div> |
| 129 | </div> | 129 | </div> |
| 130 | </div> | 130 | </div> |
| 131 | </li> | 131 | </li> |
| 132 | <li> | 132 | <li> |
| 133 | <div class="hover"></div> | 133 | <div class="hover"></div> |
| 134 | <div class="title"> | 134 | <div class="title"> |
| 135 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> | 135 | <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> |
| 136 | Layer option | 136 | Layer option |
| 137 | </div> | 137 | </div> |
| 138 | <div class="content clearfix"> | 138 | <div class="content clearfix"> |
| 139 | 139 | ||
| 140 | </div> | 140 | </div> |
| 141 | </li> | 141 | </li> |
| 142 | </ul> | ||
| 143 | |||
| 144 | <!-- Text design--> | ||
| 145 | <ul id="choice-text" ng-show="isShowLeftPanel=='text'" ng-include="'views/design_part/text.html'"> | ||
| 142 | </ul> | 146 | </ul> |
| 143 | </div> | 147 | </div> |
| 144 | <div class="design-content col-xs-8"> | 148 | <div class="design-content col-xs-8"> |
| 145 | <div class="content" ng-style="{'background-color' : tShirtColorCode}"> | 149 | <div class="content" ng-style="{'background-color' : tShirtColorCode}"> |
| 146 | <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas"> | 150 | <canvas id="main-design-container" width="510px" height="620px" class="selection-design lower-canvas"> |
| 147 | 151 | ||
| 148 | </canvas> | 152 | </canvas> |
| 149 | </div> | 153 | </div> |
| 150 | <div class="agree-design"> | 154 | <div class="agree-design"> |
| 151 | <img src="images/agree-design.png" alt="agree design" /> | 155 | <img src="images/agree-design.png" alt="agree design" /> |
| 152 | </div> | 156 | </div> |
| 153 | <div class="trash-design"> | 157 | <div class="trash-design"> |
| 154 | <img src="images/trash.png" alt="trash design" /> | 158 | <img src="images/trash.png" alt="trash design" /> |
| 155 | </div> | 159 | </div> |
| 156 | </div> | 160 | </div> |
| 157 | </section> | 161 | </section> |
| 158 | </div> | 162 | </div> |
| 159 | </div> | 163 | </div> |
| 160 | </div> | 164 | </div> |
| 161 | </div> | 165 | </div> |