lsm/konva
1
0
Fork 0
mirror of https://github.com/konvajs/konva.git synced 2025-12-05 03:24:23 +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
Download Patch File Download Diff File Expand all files Collapse all files

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;