From 92271fd7c0bd66301033c89ad87be49bb2d19697 Mon Sep 17 00:00:00 2001 From: Dang Date: Thu, 17 Nov 2016 21:35:26 +0700 Subject: [PATCH] add event --- app/scripts/controllers/tshirtdesign.js | 114 +++++++++++++++++++++----------- app/views/design_part/text.html | 4 +- 2 files changed, 76 insertions(+), 42 deletions(-) diff --git a/app/scripts/controllers/tshirtdesign.js b/app/scripts/controllers/tshirtdesign.js index 7629165..c24fd0e 100644 --- a/app/scripts/controllers/tshirtdesign.js +++ b/app/scripts/controllers/tshirtdesign.js @@ -6,17 +6,16 @@ define(['app'], function (app) { fabric.Object.prototype.transparentCorners = false; canvas.on('after:render', function() { + console.log('after render'); }); canvas.on({ - 'object:added': onIllustrationAdded, - 'object:moving': onIllustrationChange, - 'object:scaling': onIllustrationChange, - 'object:rotating': onIllustrationChange, - 'object:selected': onIllustrationSelected, - 'object:modified': onIllustrationModifield, - 'selected:deselected' : onIllustrationOut, - //'selected:out' : onIllustrationOut, - //'mouse:up' : onIllustrationOut, + 'object:added' : onIllustrationAdded, + 'object:moving' : onIllustrationChange, + 'object:scaling' : onIllustrationChange, + 'object:rotating' : onIllustrationChange, + 'object:selected' : onObjectSelected, + 'object:modified' : onIllustrationModifield, + 'selection:cleared' : onObjectOut, }); var currentObj; @@ -26,6 +25,7 @@ define(['app'], function (app) { var indexCurr2 = 0; var actionObj = false; var refreshObj = true; + var spacingNum = 0; function onIllustrationAdded(options){ var object = options.target; @@ -92,8 +92,9 @@ define(['app'], function (app) { } - function onIllustrationOut() { - console.log('out object'); + function onObjectOut() { + delete currentObj; + $scope.designTextValue = ''; } function undoCanvas() { @@ -137,17 +138,19 @@ define(['app'], function (app) { currentObj.setCoords(); canvas.renderAll(); } - - $scope.currentObject = null; - function onIllustrationSelected(options) { - var object = options.target; - $scope.typeObject = object.type; + + function onObjectSelected(options) { + var currentObj = options.target; + console.log(currentObj.text); + $scope.typeObject = currentObj.type; switch ($scope.typeObject) { case 'i-text' : $rootScope.isShowLeftPanel = 'text'; - $('#input-design-text').focus(function() { - - }); + var text = currentObj.text; + if(text != '') { + $scope.designText = text; + $scope.designTextValue = text; + } break; case 'path-group' : @@ -260,47 +263,69 @@ define(['app'], function (app) { }; // layer process - $scope.layerProcess = function(mode){ - var activeObject = canvas.getActiveObject() + $scope.layerProcess = function(mode) { + // console.log('layerProcess'); + var activeObject = canvas.getActiveObject(); + + console.log(activeObject); + if (activeObject){ switch (mode) { case 1: + // canvas.bringForward(activeObject); activeObject.bringForward(); break; case 2: + // canvas.sendBackwards(activeObject); activeObject.sendBackwards(); break; case 3: + // canvas.bringToFront(activeObject); activeObject.bringToFront(); break; case 4: + // canvas.sendToBack(activeObject); activeObject.sendToBack(); break; } canvas.renderAll(); } }; - - - $scope.focusInputText = function() { - if($scope.typeObject != 'i-text') + $scope.focusInputText = function(text) { + currentObj = canvas.getActiveObject(); + if(typeof currentObj == 'undefined' || currentObj == null) { $scope.iText = new fabric.IText('', { left: 150, top: 200, fontFamily: 'Arial', fontWeight: 'normal', + textAlign: 'center', fontSize: 28, fill: 'black' }); + } else { + if(currentObj.type != 'i-text') { + $scope.iText = new fabric.IText('', { + left: 150, + top: 200, + fontFamily: 'Arial', + fontWeight: 'normal', + textAlign: 'center', + fontSize: 28, + fill: 'black' + }); + } else{ + $scope.iText = currentObj; + } + } }; //Design text $scope.inputText = function(e) { - var iText = $scope.iText; - if(e != '') { + if(typeof $scope.iText != "undefined") { + var iText = $scope.iText; iText.text = e; - iText.set().setCoords(); canvas.add(iText); canvas.renderAll(); canvas.setActiveObject(iText); @@ -308,32 +333,41 @@ define(['app'], function (app) { }; $scope.setFontFamily = function(font) { if(canvas.getActiveObject()) { - var currentObject = canvas.getActiveObject(); - if(currentObject.type == 'i-text') { - currentObject.set('fontFamily', font); + var currentObj = canvas.getActiveObject(); + if(currentObj.type == 'i-text') { + currentObj.set('fontFamily', font); canvas.renderAll(); - canvas.setActiveObject(currentObject); + canvas.setActiveObject(currentObj); } } }; //Set letter spacing text - var spacingNum = 0; $scope.setLetterSpacingText = function(e) { if(canvas.getActiveObject()) { - var currentObject = canvas.getActiveObject(); - if(currentObject.type == 'i-text') { + var currentObj = canvas.getActiveObject(); + if(currentObj.type == 'i-text') { if(e == 'plus') spacingNum = spacingNum + 30; - else if (spacingNum>=30){ + else if (spacingNum >= 30){ spacingNum = spacingNum - 30; } - currentObject.set('charSpacing', spacingNum); + currentObj.set('charSpacing', spacingNum); canvas.renderAll(); - canvas.setActiveObject(currentObject); + canvas.setActiveObject(currentObj); } - } - } + }; + //Traslation text + $scope.rotateText = function(style) { + if(canvas.getActiveObject()) { + var currentObj = canvas.getActiveObject(); + if(currentObj.type == 'i-text') { + currentObj.set('rotate', Math.PI / 4); + canvas.renderAll(); + canvas.setActiveObject(currentObj); + } + } + }; }); }); diff --git a/app/views/design_part/text.html b/app/views/design_part/text.html index 0372608..f228b7c 100644 --- a/app/views/design_part/text.html +++ b/app/views/design_part/text.html @@ -5,7 +5,7 @@
- +
    @@ -13,7 +13,7 @@
-
文字を変形する
+
文字を変形する
-- 1.8.5.3