diff --git a/js/kitchensink/controller.js b/js/kitchensink/controller.js index 33d73df0b0..52a996b87b 100644 --- a/js/kitchensink/controller.js +++ b/js/kitchensink/controller.js @@ -270,6 +270,24 @@ function addAccessors($scope) { canvas.add(textSample); }; + $scope.addTextbox = function() { + var text = 'Lorem ipsum dolor sit amet,\nconsectetur adipisicing elit,\nsed do eiusmod tempor incididunt\nut labore et dolore magna aliqua.\n' + + 'Ut enim ad minim veniam,\nquis nostrud exercitation ullamco\nlaboris nisi ut aliquip ex ea commodo consequat.'; + + var textBoxSample = new fabric.Textbox(text, { + left: getRandomInt(350, 400), + top: getRandomInt(350, 400), + width: 500, + fontFamily: 'helvetica', + angle: getRandomInt(-10, 10), + fill: '#' + getRandomColor(), + scaleX: 0.5, + scaleY: 0.5, + }); + + canvas.add(textBoxSample); + }; + var addShape = function(shapeName) { console.log('adding shape', shapeName); @@ -713,7 +731,27 @@ function addAccessors($scope) { } }); - canvas.add(iText, iText2); + var textBox = new fabric.Textbox('foo bar\nbaz', { + left: 50, + top: 10, + fontFamily: 'Helvetica', + fill: '#333', + styles: { + 0: { + 0: { fill: 'red' }, + 1: { fill: 'red' }, + 2: { fill: 'red' } + }, + 2: { + 0: { fill: 'blue' }, + 1: { fill: 'blue' }, + 2: { fill: 'blue' }, + 3: { fill: 'blue' } + } + } + }); + + canvas.add(iText, iText2, textBox); } addTexts(); @@ -899,6 +937,42 @@ function addAccessors($scope) { return patternCanvas; }; } + + function bindShortcuts(){ + + $(document).keydown(function(event) { + // If Control for Windows and metaKey for Max + if((event.ctrlKey || event.metaKey) && event.which === 66 && $scope.getText()) { // 66 = B/b key event.preventDefault(); + $scope.toggleBold(); + return false; + }else if((event.ctrlKey || event.metaKey) && event.which === 73 && $scope.getText()){ // 73=I/i + event.preventDefault(); + $scope.toggleItalic(); + return false; + }else if((event.ctrlKey || event.metaKey) && event.which === 85 && $scope.getText()){ // 73=I/i + event.preventDefault(); + $scope.toggleUnderline(); + return false; + }else if((event.ctrlKey || event.metaKey) && event.which === 107 && $scope.getText()){ // 107 = +(plus) + event.preventDefault(); + $scope.setFontSize(parseInt($scope.getFontSize(),10)+1); + $scope.toggleUnderline(); + return false; + }else if((event.ctrlKey || event.metaKey) && event.which === 109 && $scope.getText()){ // 109 = -(minus) + event.preventDefault(); + $scope.setFontSize(parseInt($scope.getFontSize(),10)-1); + $scope.toggleUnderline(); + return false; + }else if(event.which === 46 || ((event.ctrlKey || event.metaKey) && event.which === 68)){ // 46 = DELETE key, 68 = D/d + event.preventDefault(); + $scope.removeSelected(); + return false; + } + }); + } + + bindShortcuts(); + } function watchCanvas($scope) { diff --git a/posts/demos/_posts/2011-9-1-kitchensink.html b/posts/demos/_posts/2011-9-1-kitchensink.html index a69a183760..0ceeb5bc5d 100644 --- a/posts/demos/_posts/2011-9-1-kitchensink.html +++ b/posts/demos/_posts/2011-9-1-kitchensink.html @@ -286,6 +286,7 @@

+

Add images to canvas: