lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-30 05:36:13 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fontStyle params for Text objects

Browse Source 
Specify css font-variant|font-style options via the fontStyle parameter

Also getFontStyle and setFontStyle functions for this object.
This commit is contained in:
Andy Yaco-Mink 2012-03-30 10:08:44 -05:00
parent d8c5ca24af
commit bd43ffbc0e
3 changed files with 42 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
dist/kinetic-core.js vendored
View File

@ -2385,10 +2385,13 @@ Kinetic.Text = function(config) {
if(config.padding === undefined) {
config.padding = 0;
}
if(config.fontStyle === undefined) {
config.fontStyle = 'normal';
}
config.drawFunc = function() {
var context = this.getContext();
context.font = this.fontSize + 'pt ' + this.fontFamily;
context.font = this.fontStyle + ' ' + this.fontSize + 'pt ' + this.fontFamily;
context.textBaseline = 'middle';
var metrics = context.measureText(this.text);
var textHeight = textHeight = parseInt(this.fontSize, 10);
@ -2477,6 +2480,21 @@ Kinetic.Text.prototype = {
getFontSize: function() {
return this.fontSize;
},
/**
* set font style using same rules as the first argument for the css spec's shorthand font property:
* http://www.w3.org/TR/CSS21/fonts.html#propdef-font
* i.e. [ <'font-style'> || <'font-variant'> || <'font-weight'> ]
* @param {String} fontStyle
*/
setFontStyle: function(fontStyle) {
this.fontStyle = fontStyle;
},
/**
* get font style
*/
getFontStyle: function() {
return this.fontStyle;
},
/**
* set text fill color
* @param {String} textFill

20
src/shapes/Text.js
View File

@ -28,10 +28,13 @@ Kinetic.Text = function(config) {
if(config.padding === undefined) {
config.padding = 0;
}
if(config.fontStyle === undefined) {
config.fontStyle = 'normal';
}
config.drawFunc = function() {
var context = this.getContext();
context.font = this.fontSize + 'pt ' + this.fontFamily;
context.font = this.fontStyle + ' ' + this.fontSize + 'pt ' + this.fontFamily;
context.textBaseline = 'middle';
var metrics = context.measureText(this.text);
var textHeight = textHeight = parseInt(this.fontSize, 10);
@ -120,6 +123,21 @@ Kinetic.Text.prototype = {
getFontSize: function() {
return this.fontSize;
},
/**
* set font style using same rules as the first argument for the css spec's shorthand font property:
* http://www.w3.org/TR/CSS21/fonts.html#propdef-font
* i.e. [ <'font-style'> || <'font-variant'> || <'font-weight'> ]
* @param {String} fontStyle
*/
setFontStyle: function(fontStyle) {
this.fontStyle = fontStyle;
},
/**
* get font style
*/
getFontStyle: function() {
return this.fontStyle;
},
/**
* set text fill color
* @param {String} textFill

4
tests/js/unitTests.js
View File

@ -828,6 +828,7 @@ Test.prototype.tests = {
text: 'Hello World!',
fontSize: 60,
fontFamily: 'Calibri',
fontStyle: 'normal',
textFill: '#888',
textStroke: '#333',
padding: 10,
@ -851,6 +852,7 @@ Test.prototype.tests = {
text.setText('Bye World!');
test(text.getText() === 'Bye World!', 'text should be Bye World!');
test(text.getPadding() === 10, 'padding should be 10');
test(text.getFontStyle() == 'normal', 'font style should be normal');
text.setPadding(20);
test(text.getPadding() === 20, 'padding should be 20');
@ -858,6 +860,7 @@ Test.prototype.tests = {
text.setFontFamily('Arial');
text.setFontSize(30);
text.setFontStyle('italic');
text.setAlign('right');
text.setVerticalAlign('top');
text.setTextFill('blue');
@ -866,6 +869,7 @@ Test.prototype.tests = {
test(text.getFontFamily() === 'Arial', 'font family should be Arial');
test(text.getFontSize() === 30, 'text size should be 30');
test(text.getFontStyle() == 'italic', 'font style should be italic');
test(text.getAlign() === 'right', 'text align should be right');
test(text.getVerticalAlign() === 'top', 'vertical align should be top');
test(text.getTextFill() === 'blue', 'text fill should be blue');