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

after a bit more thought, I've decided to change the maxWidth property to width, to make it even more similar to CSS sizing rules. If you set the width of the text box to a certain value, and the text string width is longer than that width, the text will be clipped

Browse Source
This commit is contained in:
Eric Rowell 2012-05-12 17:49:01 -07:00
parent 05df078295
commit 92919058b2
4 changed files with 21 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
dist/kinetic-core.js vendored
View File

@ -3381,14 +3381,11 @@ Kinetic.Text = function(config) {
fontFamily: 'Calibri', fontFamily: 'Calibri',
text: '', text: '',
fontSize: 12, fontSize: 12,
fill: undefined,
textStroke: undefined,
textStrokeWidth: undefined,
align: 'left', align: 'left',
verticalAlign: 'top', verticalAlign: 'top',
padding: 0, padding: 0,
fontStyle: 'normal', fontStyle: 'normal',
maxWidth: undefined width: 'auto'
}); });
this.shapeType = "Text"; this.shapeType = "Text";
@ -3398,7 +3395,7 @@ Kinetic.Text = function(config) {
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily; context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
context.textBaseline = 'middle'; context.textBaseline = 'middle';
var textHeight = this.getTextHeight(); var textHeight = this.getTextHeight();
var textWidth = this.getMaxWidth() === undefined ? this.getTextWidth() : this.getMaxWidth(); var textWidth = this.attrs.width === 'auto' ? this.getTextWidth() : this.attrs.width;
var p = this.attrs.padding; var p = this.attrs.padding;
var x = 0; var x = 0;
var y = 0; var y = 0;
@ -3434,7 +3431,7 @@ Kinetic.Text = function(config) {
// clipping region for max width // clipping region for max width
context.save(); context.save();
if(this.attrs.maxWidth !== undefined) { if(this.attrs.width !== 'auto') {
context.beginPath(); context.beginPath();
context.rect(x, y, textWidth + p, textHeight + p * 2); context.rect(x, y, textWidth + p, textHeight + p * 2);
context.closePath(); context.closePath();
@ -3635,17 +3632,17 @@ Kinetic.Text.prototype = {
}; };
}, },
/** /**
* get max width in pixels * get width in pixels
*/ */
getMaxWidth: function() { getWidth: function() {
return this.attrs.maxWidth; return this.attrs.width;
}, },
/** /**
* set width * set width
* @param {Number} max width * @param {Number} width
*/ */
setMaxWidth: function(maxWidth) { setWidth: function(width) {
this.attrs.maxWidth = maxWidth; this.attrs.width = width;
} }
}; };
// extend Shape // extend Shape

2
dist/kinetic-core.min.js vendored
View File

File diff suppressed because one or more lines are too long

21
src/shapes/Text.js
View File

@ -12,14 +12,11 @@ Kinetic.Text = function(config) {
fontFamily: 'Calibri', fontFamily: 'Calibri',
text: '', text: '',
fontSize: 12, fontSize: 12,
fill: undefined,
textStroke: undefined,
textStrokeWidth: undefined,
align: 'left', align: 'left',
verticalAlign: 'top', verticalAlign: 'top',
padding: 0, padding: 0,
fontStyle: 'normal', fontStyle: 'normal',
maxWidth: undefined width: 'auto'
}); });
this.shapeType = "Text"; this.shapeType = "Text";
@ -29,7 +26,7 @@ Kinetic.Text = function(config) {
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily; context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
context.textBaseline = 'middle'; context.textBaseline = 'middle';
var textHeight = this.getTextHeight(); var textHeight = this.getTextHeight();
var textWidth = this.getMaxWidth() === undefined ? this.getTextWidth() : this.getMaxWidth(); var textWidth = this.attrs.width === 'auto' ? this.getTextWidth() : this.attrs.width;
var p = this.attrs.padding; var p = this.attrs.padding;
var x = 0; var x = 0;
var y = 0; var y = 0;
@ -65,7 +62,7 @@ Kinetic.Text = function(config) {
// clipping region for max width // clipping region for max width
context.save(); context.save();
if(this.attrs.maxWidth !== undefined) { if(this.attrs.width !== 'auto') {
context.beginPath(); context.beginPath();
context.rect(x, y, textWidth + p, textHeight + p * 2); context.rect(x, y, textWidth + p, textHeight + p * 2);
context.closePath(); context.closePath();
@ -266,17 +263,17 @@ Kinetic.Text.prototype = {
}; };
}, },
/** /**
* get max width in pixels * get width in pixels
*/ */
getMaxWidth: function() { getWidth: function() {
return this.attrs.maxWidth; return this.attrs.width;
}, },
/** /**
* set width * set width
* @param {Number} max width * @param {Number} width
*/ */
setMaxWidth: function(maxWidth) { setWidth: function(width) {
this.attrs.maxWidth = maxWidth; this.attrs.width = width;
} }
}; };
// extend Shape // extend Shape

4
tests/js/unitTests.js
View File

@ -1889,7 +1889,7 @@ Test.prototype.tests = {
//draggable: true, //draggable: true,
align: 'center', align: 'center',
verticalAlign: 'middle', verticalAlign: 'middle',
maxWidth: 200 width: 200
}); });
layer.add(text); layer.add(text);
@ -1903,7 +1903,7 @@ Test.prototype.tests = {
test(text.getFontStyle() == 'normal', 'font style should be normal'); test(text.getFontStyle() == 'normal', 'font style should be normal');
text.setPadding(20); text.setPadding(20);
test(text.getPadding() === 20, 'padding should be 20'); test(text.getPadding() === 20, 'padding should be 20');
test(text.getMaxWidth() === 200, 'max width should be 200'); test(text.getWidth() === 200, 'width should be 200');
stage.add(layer); stage.add(layer);