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

first pass at implementing auto word wrap. Still have a few edge cases to cover. Removed vertical align property as it is no longer relevant

Browse Source
This commit is contained in:
Eric Rowell 2012-06-30 00:40:54 -07:00
parent 07ef653441
commit 6663b9e612
5 changed files with 159 additions and 146 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
dist/kinetic-core.js vendored
View File

@ -3,7 +3,7 @@
* http://www.kineticjs.com/ * http://www.kineticjs.com/
* Copyright 2012, Eric Rowell * Copyright 2012, Eric Rowell
* Licensed under the MIT or GPL Version 2 licenses. * Licensed under the MIT or GPL Version 2 licenses.
* Date: Jun 27 2012 * Date: Jun 30 2012
* *
* Copyright (C) 2011 - 2012 by Eric Rowell * Copyright (C) 2011 - 2012 by Eric Rowell
* *
@ -569,11 +569,8 @@ Kinetic.Node.prototype = {
/** /**
* set attrs * set attrs
* @param {Object} config * @param {Object} config
* @param {Boolean} skipPublish set the second argument to true
* to skip publication of the attr change event in case you want
* to silently update an attribute
*/ */
setAttrs: function(config, skipPublish) { setAttrs: function(config) {
var go = Kinetic.GlobalObject; var go = Kinetic.GlobalObject;
var that = this; var that = this;
@ -652,7 +649,7 @@ Kinetic.Node.prototype = {
* only fire change event for root * only fire change event for root
* level attrs * level attrs
*/ */
if(level === 0 && !skipPublish) { if(level === 0) {
that._fireChangeEvent(key); that._fireChangeEvent(key);
} }
} }
@ -3891,9 +3888,11 @@ Kinetic.Text = function(config) {
width: 'auto', width: 'auto',
height: 'auto', height: 'auto',
detectionType: 'path', detectionType: 'path',
cornerRadius: 0 cornerRadius: 0,
lineHeight: 1.2
}); });
this.dummyCanvas = document.createElement('canvas');
this.shapeType = "Text"; this.shapeType = "Text";
this.boxShape = new Kinetic.Rect({}); this.boxShape = new Kinetic.Rect({});
@ -3913,40 +3912,24 @@ Kinetic.Text = function(config) {
var p = that.attrs.padding; var p = that.attrs.padding;
context.beginPath(); var lineHeightPx = that.attrs.lineHeight * that.getTextHeight();
context.rect(p / 2, p / 2, that.getBoxWidth() - p, that.getBoxHeight() - p);
context.closePath();
if(that.attrs.width !== 'auto' && (that.getTextWidth() > that.getBoxWidth() - p || that.getTextHeight() > that.getBoxHeight() - p)) {
context.clip();
}
// horizontal align // horizontal align
if(that.attrs.align === 'left') { context.translate(p, 0);
context.translate(p / 2, 0);
}
else if(that.attrs.align === 'center') {
context.translate((that.getBoxWidth() - that.getTextWidth()) / 2, 0);
}
// right
else {
context.translate(that.getBoxWidth() - that.getTextWidth() - p / 2, 0);
}
// vertical align // vertical align
if(that.attrs.verticalAlign === 'top') { context.translate(0, p + that.getTextHeight() / 2);
context.translate(0, (p + that.getTextHeight()) / 2);
} // draw text lines
else if(that.attrs.verticalAlign === 'middle') { var textArr = that.textArr;
context.translate(0, that.getBoxHeight() / 2); for(var n = 0; n < textArr.length; n++) {
} var text = textArr[n];
// bottom this.fillText(text);
else { this.strokeText(text);
context.translate(0, that.getBoxHeight() - (p + that.getTextHeight()) / 2);
context.translate(0, lineHeightPx);
} }
this.fillText(that.attrs.text);
this.strokeText(that.attrs.text);
context.restore(); context.restore();
} }
}); });
@ -3958,14 +3941,19 @@ Kinetic.Text = function(config) {
this.add(this.boxShape); this.add(this.boxShape);
this.add(this.textShape); this.add(this.textShape);
// bind events to sync attrs // sync attrs
var attrs = ['width', 'height', 'cornerRadius', 'stroke', 'strokeWidth', 'fill', 'shadow', 'detectionType', 'textFill', 'textStroke', 'textStrokeWidth']; var attrs = ['width', 'height', 'cornerRadius', 'stroke', 'strokeWidth', 'fill', 'shadow', 'detectionType', 'textFill', 'textStroke', 'textStrokeWidth'];
var that = this;
for(var n = 0; n < attrs.length; n++) { for(var n = 0; n < attrs.length; n++) {
var attr = attrs[n]; var attr = attrs[n];
this.on(attr + 'Change', this._syncAttrs); this.on(attr + 'Change', function(evt) {
if(!evt.shape) {
that._syncAttrs();
}
});
} }
that._setTextData();
this._syncAttrs(); this._syncAttrs();
}; };
/* /*
@ -3976,41 +3964,61 @@ Kinetic.Text.prototype = {
* get text width in pixels * get text width in pixels
*/ */
getTextWidth: function() { getTextWidth: function() {
return this.getTextSize().width; return this.textWidth;
}, },
/** /**
* get text height in pixels * get text height in pixels
*/ */
getTextHeight: function() { getTextHeight: function() {
return this.getTextSize().height; return this.textHeight;
}, },
/** /**
* get text size in pixels * get box width
*/ */
getTextSize: function() { getBoxWidth: function() {
var dummyCanvas = document.createElement('canvas'); return this.attrs.width === 'auto' ? this.getTextWidth() + this.attrs.padding * 2 : this.attrs.width;
},
/**
* get box height
*/
getBoxHeight: function() {
return this.attrs.height === 'auto' ? (this.getTextHeight() * this.textArr.length * this.attrs.lineHeight) + this.attrs.padding * 2 : this.attrs.height;
},
_getTextSize: function(text) {
var dummyCanvas = this.dummyCanvas;
var context = dummyCanvas.getContext('2d'); var context = dummyCanvas.getContext('2d');
context.save(); context.save();
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily; context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
var metrics = context.measureText(this.attrs.text); var metrics = context.measureText(text);
context.restore(); context.restore();
return { return {
width: metrics.width, width: metrics.width,
height: parseInt(this.attrs.fontSize, 10) height: parseInt(this.attrs.fontSize, 10)
}; };
}, },
/** _setTextData: function() {
* get box width var charArr = this.attrs.text.split('');
*/ var arr = [];
getBoxWidth: function() { var lastWord = '';
return (this.attrs.width === 'auto' ? this.getTextWidth() : this.attrs.width) + this.attrs.padding; this.textArr = [];
}, this.textWidth = 0;
/** this.textHeight = 0;
* get box height while(charArr.length > 0) {
*/ var line = lastWord;
getBoxHeight: function() { while(charArr[0] !== undefined && (this.attrs.width === 'auto' || this._getTextSize(line + charArr[0]).width < this.attrs.width - this.attrs.padding)) {
return (this.attrs.height === 'auto' ? this.getTextHeight() : this.attrs.height) + this.attrs.padding; lastWord = charArr[0] === ' ' || charArr[0] === '-' ? '' : lastWord + charArr[0];
line += charArr.splice(0, 1);
}
if(charArr.length > 0 && charArr[0] !== ' ' && charArr[0] !== '-') {
line = line.substring(0, line.lastIndexOf(lastWord));
}
this.textWidth = Math.max(this.textWidth, this._getTextSize(line).width);
arr.push(line);
}
this.textHeight = this._getTextSize(arr[0]).height;
this.textArr = arr;
}, },
_syncAttrs: function() { _syncAttrs: function() {
this.boxShape.setAttrs({ this.boxShape.setAttrs({
@ -4040,7 +4048,7 @@ Kinetic.Text.prototype = {
Kinetic.GlobalObject.extend(Kinetic.Text, Kinetic.Group); Kinetic.GlobalObject.extend(Kinetic.Text, Kinetic.Group);
// add setters and getters // add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'verticalAlign', 'text', 'width', 'height', 'cornerRadius', 'fill', 'stroke', 'strokeWidth', 'shadow']); Kinetic.GlobalObject.addSettersGetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'cornerRadius', 'fill', 'stroke', 'strokeWidth', 'shadow']);
/** /**
* set font family * set font family
@ -4099,10 +4107,10 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Text, ['fontFamily', 'fontSize',
*/ */
/** /**
* set vertical align of text * set line height
* @name setVerticalAlign * @name setLineHeight
* @methodOf Kinetic.Text.prototype * @methodOf Kinetic.Text.prototype
* @param {String} verticalAlign verticalAlign can be "top", "middle", or "bottom" * @param {Number} lineHeight default is 1.2
*/ */
/** /**
@ -4182,8 +4190,8 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Text, ['fontFamily', 'fontSize',
*/ */
/** /**
* get vertical align * get line height
* @name getVerticalAlign * @name getLineHeight
* @methodOf Kinetic.Text.prototype * @methodOf Kinetic.Text.prototype
*/ */

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

File diff suppressed because one or more lines are too long

7
src/Node.js
View File

@ -172,11 +172,8 @@ Kinetic.Node.prototype = {
/** /**
* set attrs * set attrs
* @param {Object} config * @param {Object} config
* @param {Boolean} skipPublish set the second argument to true
* to skip publication of the attr change event in case you want
* to silently update an attribute
*/ */
setAttrs: function(config, skipPublish) { setAttrs: function(config) {
var go = Kinetic.GlobalObject; var go = Kinetic.GlobalObject;
var that = this; var that = this;
@ -255,7 +252,7 @@ Kinetic.Node.prototype = {
* only fire change event for root * only fire change event for root
* level attrs * level attrs
*/ */
if(level === 0 && !skipPublish) { if(level === 0) {
that._fireChangeEvent(key); that._fireChangeEvent(key);
} }
} }

121
src/shapes/Text.js
View File

@ -19,9 +19,11 @@ Kinetic.Text = function(config) {
width: 'auto', width: 'auto',
height: 'auto', height: 'auto',
detectionType: 'path', detectionType: 'path',
cornerRadius: 0 cornerRadius: 0,
lineHeight: 1.2
}); });
this.dummyCanvas = document.createElement('canvas');
this.shapeType = "Text"; this.shapeType = "Text";
this.boxShape = new Kinetic.Rect({}); this.boxShape = new Kinetic.Rect({});
@ -41,40 +43,24 @@ Kinetic.Text = function(config) {
var p = that.attrs.padding; var p = that.attrs.padding;
context.beginPath(); var lineHeightPx = that.attrs.lineHeight * that.getTextHeight();
context.rect(p / 2, p / 2, that.getBoxWidth() - p, that.getBoxHeight() - p);
context.closePath();
if(that.attrs.width !== 'auto' && (that.getTextWidth() > that.getBoxWidth() - p || that.getTextHeight() > that.getBoxHeight() - p)) {
context.clip();
}
// horizontal align // horizontal align
if(that.attrs.align === 'left') { context.translate(p, 0);
context.translate(p / 2, 0);
}
else if(that.attrs.align === 'center') {
context.translate((that.getBoxWidth() - that.getTextWidth()) / 2, 0);
}
// right
else {
context.translate(that.getBoxWidth() - that.getTextWidth() - p / 2, 0);
}
// vertical align // vertical align
if(that.attrs.verticalAlign === 'top') { context.translate(0, p + that.getTextHeight() / 2);
context.translate(0, (p + that.getTextHeight()) / 2);
} // draw text lines
else if(that.attrs.verticalAlign === 'middle') { var textArr = that.textArr;
context.translate(0, that.getBoxHeight() / 2); for(var n = 0; n < textArr.length; n++) {
} var text = textArr[n];
// bottom this.fillText(text);
else { this.strokeText(text);
context.translate(0, that.getBoxHeight() - (p + that.getTextHeight()) / 2);
context.translate(0, lineHeightPx);
} }
this.fillText(that.attrs.text);
this.strokeText(that.attrs.text);
context.restore(); context.restore();
} }
}); });
@ -86,14 +72,19 @@ Kinetic.Text = function(config) {
this.add(this.boxShape); this.add(this.boxShape);
this.add(this.textShape); this.add(this.textShape);
// bind events to sync attrs // sync attrs
var attrs = ['width', 'height', 'cornerRadius', 'stroke', 'strokeWidth', 'fill', 'shadow', 'detectionType', 'textFill', 'textStroke', 'textStrokeWidth']; var attrs = ['width', 'height', 'cornerRadius', 'stroke', 'strokeWidth', 'fill', 'shadow', 'detectionType', 'textFill', 'textStroke', 'textStrokeWidth'];
var that = this;
for(var n = 0; n < attrs.length; n++) { for(var n = 0; n < attrs.length; n++) {
var attr = attrs[n]; var attr = attrs[n];
this.on(attr + 'Change', this._syncAttrs); this.on(attr + 'Change', function(evt) {
if(!evt.shape) {
that._syncAttrs();
}
});
} }
that._setTextData();
this._syncAttrs(); this._syncAttrs();
}; };
/* /*
@ -104,41 +95,61 @@ Kinetic.Text.prototype = {
* get text width in pixels * get text width in pixels
*/ */
getTextWidth: function() { getTextWidth: function() {
return this.getTextSize().width; return this.textWidth;
}, },
/** /**
* get text height in pixels * get text height in pixels
*/ */
getTextHeight: function() { getTextHeight: function() {
return this.getTextSize().height; return this.textHeight;
}, },
/** /**
* get text size in pixels * get box width
*/ */
getTextSize: function() { getBoxWidth: function() {
var dummyCanvas = document.createElement('canvas'); return this.attrs.width === 'auto' ? this.getTextWidth() + this.attrs.padding * 2 : this.attrs.width;
},
/**
* get box height
*/
getBoxHeight: function() {
return this.attrs.height === 'auto' ? (this.getTextHeight() * this.textArr.length * this.attrs.lineHeight) + this.attrs.padding * 2 : this.attrs.height;
},
_getTextSize: function(text) {
var dummyCanvas = this.dummyCanvas;
var context = dummyCanvas.getContext('2d'); var context = dummyCanvas.getContext('2d');
context.save(); context.save();
context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily; context.font = this.attrs.fontStyle + ' ' + this.attrs.fontSize + 'pt ' + this.attrs.fontFamily;
var metrics = context.measureText(this.attrs.text); var metrics = context.measureText(text);
context.restore(); context.restore();
return { return {
width: metrics.width, width: metrics.width,
height: parseInt(this.attrs.fontSize, 10) height: parseInt(this.attrs.fontSize, 10)
}; };
}, },
/** _setTextData: function() {
* get box width var charArr = this.attrs.text.split('');
*/ var arr = [];
getBoxWidth: function() { var lastWord = '';
return (this.attrs.width === 'auto' ? this.getTextWidth() : this.attrs.width) + this.attrs.padding; this.textArr = [];
}, this.textWidth = 0;
/** this.textHeight = 0;
* get box height while(charArr.length > 0) {
*/ var line = lastWord;
getBoxHeight: function() { while(charArr[0] !== undefined && (this.attrs.width === 'auto' || this._getTextSize(line + charArr[0]).width < this.attrs.width - this.attrs.padding)) {
return (this.attrs.height === 'auto' ? this.getTextHeight() : this.attrs.height) + this.attrs.padding; lastWord = charArr[0] === ' ' || charArr[0] === '-' ? '' : lastWord + charArr[0];
line += charArr.splice(0, 1);
}
if(charArr.length > 0 && charArr[0] !== ' ' && charArr[0] !== '-') {
line = line.substring(0, line.lastIndexOf(lastWord));
}
this.textWidth = Math.max(this.textWidth, this._getTextSize(line).width);
arr.push(line);
}
this.textHeight = this._getTextSize(arr[0]).height;
this.textArr = arr;
}, },
_syncAttrs: function() { _syncAttrs: function() {
this.boxShape.setAttrs({ this.boxShape.setAttrs({
@ -168,7 +179,7 @@ Kinetic.Text.prototype = {
Kinetic.GlobalObject.extend(Kinetic.Text, Kinetic.Group); Kinetic.GlobalObject.extend(Kinetic.Text, Kinetic.Group);
// add setters and getters // add setters and getters
Kinetic.GlobalObject.addSettersGetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'verticalAlign', 'text', 'width', 'height', 'cornerRadius', 'fill', 'stroke', 'strokeWidth', 'shadow']); Kinetic.GlobalObject.addSettersGetters(Kinetic.Text, ['fontFamily', 'fontSize', 'fontStyle', 'textFill', 'textStroke', 'textStrokeWidth', 'padding', 'align', 'lineHeight', 'text', 'width', 'height', 'cornerRadius', 'fill', 'stroke', 'strokeWidth', 'shadow']);
/** /**
* set font family * set font family
@ -227,10 +238,10 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Text, ['fontFamily', 'fontSize',
*/ */
/** /**
* set vertical align of text * set line height
* @name setVerticalAlign * @name setLineHeight
* @methodOf Kinetic.Text.prototype * @methodOf Kinetic.Text.prototype
* @param {String} verticalAlign verticalAlign can be "top", "middle", or "bottom" * @param {Number} lineHeight default is 1.2
*/ */
/** /**
@ -310,8 +321,8 @@ Kinetic.GlobalObject.addSettersGetters(Kinetic.Text, ['fontFamily', 'fontSize',
*/ */
/** /**
* get vertical align * get line height
* @name getVerticalAlign * @name getLineHeight
* @methodOf Kinetic.Text.prototype * @methodOf Kinetic.Text.prototype
*/ */

41
tests/js/unitTests.js
View File

@ -2848,7 +2848,6 @@ Test.prototype.tests = {
textFill: '#888', textFill: '#888',
textStroke: '#333', textStroke: '#333',
align: 'right', align: 'right',
verticalAlign: 'bottom',
width: 400, width: 400,
height: 100, height: 100,
padding: 40, padding: 40,
@ -2885,7 +2884,6 @@ Test.prototype.tests = {
test(text.getTextFill() == '#888', 'text fill should be #888'); test(text.getTextFill() == '#888', 'text fill should be #888');
test(text.getTextStroke() == '#333', 'text fill should be #333'); test(text.getTextStroke() == '#333', 'text fill should be #333');
test(text.getAlign() === 'right', 'text should be aligned right'); test(text.getAlign() === 'right', 'text should be aligned right');
test(text.getVerticalAlign() === 'bottom', 'text should be vertically aligned at the bottom');
test(text.getWidth() === 400, 'width should be 400'); test(text.getWidth() === 400, 'width should be 400');
test(text.getHeight() === 100, 'height should be 100'); test(text.getHeight() === 100, 'height should be 100');
test(text.getPadding() === 40, 'padding should be 40'); test(text.getPadding() === 40, 'padding should be 40');
@ -2906,7 +2904,6 @@ Test.prototype.tests = {
text.setTextFill('green'); text.setTextFill('green');
text.setTextStroke('yellow'); text.setTextStroke('yellow');
text.setAlign('left'); text.setAlign('left');
text.setVerticalAlign('top');
text.setWidth(300); text.setWidth(300);
text.setHeight(75); text.setHeight(75);
text.setPadding(20); text.setPadding(20);
@ -2929,7 +2926,6 @@ Test.prototype.tests = {
test(text.getTextFill() == 'green', 'text fill should be green'); test(text.getTextFill() == 'green', 'text fill should be green');
test(text.getTextStroke() == 'yellow', 'text fill should be yellow'); test(text.getTextStroke() == 'yellow', 'text fill should be yellow');
test(text.getAlign() === 'left', 'text should be aligned left'); test(text.getAlign() === 'left', 'text should be aligned left');
test(text.getVerticalAlign() === 'top', 'text should be vertically aligned at the top');
test(text.getWidth() === 300, 'width should be 300'); test(text.getWidth() === 300, 'width should be 300');
test(text.getHeight() === 75, 'height should be 75'); test(text.getHeight() === 75, 'height should be 75');
test(text.getPadding() === 20, 'padding should be 20'); test(text.getPadding() === 20, 'padding should be 20');
@ -2939,7 +2935,7 @@ Test.prototype.tests = {
test(text.getDetectionType() === 'pixel', 'text detection type should be pixel'); test(text.getDetectionType() === 'pixel', 'text detection type should be pixel');
}, },
'SHAPE - get text metrics': function(containerId) { 'SHAPE - text multi line': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({
container: containerId, container: containerId,
width: 578, width: 578,
@ -2950,32 +2946,33 @@ Test.prototype.tests = {
var text = new Kinetic.Text({ var text = new Kinetic.Text({
x: stage.getWidth() / 2, x: stage.getWidth() / 2,
y: stage.getHeight() / 2, y: stage.getHeight() / 2,
text: 'Hello World!', stroke: '#555',
fontSize: 60, strokeWidth: 5,
fill: '#ddd',
text: 'All the world \'s a stage, and all the men and women merely players. They have their exits and their entrances; And one man in his time plays many parts.',
fontSize: 16,
fontFamily: 'Calibri', fontFamily: 'Calibri',
fontStyle: 'normal', fontStyle: 'normal',
textStroke: 'green', textFill: '#555',
fontStyle: 'italic', width: 385,
align: 'center', padding: 20,
verticalAlign: 'middle',
shadow: { shadow: {
color: 'black', color: 'black',
blur: 2, blur: 1,
offset: [5, 5], offset: [10, 10],
alpha: 1 alpha: 0.2
} },
cornerRadius: 10,
draggable: true,
detectionType: 'path'
}); });
// test text width before adding it to stage // center text box
test(text.getTextWidth() > 0, 'text width should have a value'); text.setOffset(text.getBoxWidth() / 2, text.getBoxHeight() / 2);
layer.add(text); layer.add(text);
stage.add(layer); stage.add(layer);
test(text.getTextSize().width > 0, 'text width should have a value');
test(text.getTextSize().height > 0, 'text height should have a value');
test(text.getTextWidth() > 0, 'text width should have a value');
test(text.getTextHeight() > 0, 'text height should have a value');
}, },
'SHAPE - get shape name': function(containerId) { 'SHAPE - get shape name': function(containerId) {
var stage = new Kinetic.Stage({ var stage = new Kinetic.Stage({