lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-04-29 01:55:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

reworked text max width logic to use clipping rather than native max width functionality which scales the text (what was w3c thinking? no idea)

Browse Source
This commit is contained in:
Eric Rowell 2012-05-12 17:11:57 -07:00
parent 4b1403f7fe
commit 05df078295
4 changed files with 73 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
dist/kinetic-core.js vendored
View File

@ -3387,7 +3387,8 @@ Kinetic.Text = function(config) {
align: 'left',
verticalAlign: 'top',
padding: 0,
fontStyle: 'normal'
fontStyle: 'normal',
maxWidth: undefined
});
this.shapeType = "Text";
@ -3397,7 +3398,7 @@ Kinetic.Text = function(config) {
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
context.textBaseline = 'middle';
var textHeight = this.getTextHeight();
var textWidth = this.getTextWidth();
var textWidth = this.getMaxWidth() === undefined ? this.getTextWidth() : this.getMaxWidth();
var p = this.attrs.padding;
var x = 0;
var y = 0;
@ -3431,6 +3432,15 @@ Kinetic.Text = function(config) {
var tx = p + x;
var ty = textHeight / 2 + p + y;
// clipping region for max width
context.save();
if(this.attrs.maxWidth !== undefined) {
context.beginPath();
context.rect(x, y, textWidth + p, textHeight + p * 2);
context.closePath();
context.clip();
}
// draw text
if(this.attrs.textFill !== undefined) {
context.fillStyle = this.attrs.textFill;
@ -3448,6 +3458,7 @@ Kinetic.Text = function(config) {
context.strokeStyle = this.attrs.textStroke;
context.strokeText(this.attrs.text, tx, ty);
}
context.restore();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
@ -3622,6 +3633,19 @@ Kinetic.Text.prototype = {
width: metrics.width,
height: parseInt(this.attrs.fontSize, 10)
};
},
/**
* get max width in pixels
*/
getMaxWidth: function() {
return this.attrs.maxWidth;
},
/**
* set width
* @param {Number} max width
*/
setMaxWidth: function(maxWidth) {
this.attrs.maxWidth = maxWidth;
}
};
// extend Shape

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

File diff suppressed because one or more lines are too long

32
src/shapes/Text.js
View File

@ -29,7 +29,7 @@ Kinetic.Text = function(config) {
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
context.textBaseline = 'middle';
var textHeight = this.getTextHeight();
var textWidth = this.getTextWidth();
var textWidth = this.getMaxWidth() === undefined ? this.getTextWidth() : this.getMaxWidth();
var p = this.attrs.padding;
var x = 0;
var y = 0;
@ -63,16 +63,19 @@ Kinetic.Text = function(config) {
var tx = p + x;
var ty = textHeight / 2 + p + y;
// clipping region for max width
context.save();
if(this.attrs.maxWidth !== undefined) {
context.beginPath();
context.rect(x, y, textWidth + p, textHeight + p * 2);
context.closePath();
context.clip();
}
// draw text
if(this.attrs.textFill !== undefined) {
context.fillStyle = this.attrs.textFill;
if (this.attrs.maxWidth !== undefined) {
context.fillText(this.attrs.text, tx, ty, this.attrs.maxWidth);
}
else {
context.fillText(this.attrs.text, tx, ty);
}
context.fillText(this.attrs.text, tx, ty);
}
if(this.attrs.textStroke !== undefined || this.attrs.textStrokeWidth !== undefined) {
// defaults
@ -84,14 +87,9 @@ Kinetic.Text = function(config) {
}
context.lineWidth = this.attrs.textStrokeWidth;
context.strokeStyle = this.attrs.textStroke;
if (this.attrs.maxWidth !== undefined) {
context.strokeText(this.attrs.text, tx, ty, this.attrs.maxWidth);
}
else {
context.strokeText(this.attrs.text, tx, ty);
}
context.strokeText(this.attrs.text, tx, ty);
}
context.restore();
};
// call super constructor
Kinetic.Shape.apply(this, [config]);
@ -274,8 +272,8 @@ Kinetic.Text.prototype = {
return this.attrs.maxWidth;
},
/**
* set max width
* @param {float} max width
* set width
* @param {Number} max width
*/
setMaxWidth: function(maxWidth) {
this.attrs.maxWidth = maxWidth;

4
tests/js/unitTests.js
View File

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