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

Merge branch 'master' of github.com:konvajs/konva

Browse Source
This commit is contained in:
Anton Lavrenov 2018-02-27 09:37:56 +08:00
commit 2c17492ef2
5 changed files with 544 additions and 459 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -11,6 +11,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
* Add ability to remove event by callback `node.off('event', callback)`. * Add ability to remove event by callback `node.off('event', callback)`.
* new `Konva.Filters.Contrast`. * new `Konva.Filters.Contrast`.
* new `Konva.Util.haveIntersection()` to detect collusion * new `Konva.Util.haveIntersection()` to detect collusion
* add `Konva.Text.ellipsis` to add '…' to text string if width is fixed and wrap is set to 'none'
## Changed ## Changed

543
konva.js
View File

@ -2,7 +2,7 @@
* Konva JavaScript Framework v1.7.6 * Konva JavaScript Framework v1.7.6
* http://konvajs.github.io/ * http://konvajs.github.io/
* Licensed under the MIT * Licensed under the MIT
* Date: Thu Feb 22 2018 * Date: Mon Feb 26 2018
* *
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS) * Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva) * Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -4857,31 +4857,31 @@
Konva.Collection.mapMethods(Konva.Node); Konva.Collection.mapMethods(Konva.Node);
})(Konva); })(Konva);
(function() { (function() {
'use strict'; 'use strict';
/** /**
* Grayscale Filter * Grayscale Filter
* @function * @function
* @memberof Konva.Filters * @memberof Konva.Filters
* @param {Object} imageData * @param {Object} imageData
* @example * @example
* node.cache(); * node.cache();
* node.filters([Konva.Filters.Grayscale]); * node.filters([Konva.Filters.Grayscale]);
*/ */
Konva.Filters.Grayscale = function(imageData) { Konva.Filters.Grayscale = function(imageData) {
var data = imageData.data, len = data.length, i, brightness; var data = imageData.data, len = data.length, i, brightness;
for (i = 0; i < len; i += 4) { for (i = 0; i < len; i += 4) {
brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]; brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
// red // red
data[i] = brightness; data[i] = brightness;
// green // green
data[i + 1] = brightness; data[i + 1] = brightness;
// blue // blue
data[i + 2] = brightness; data[i + 2] = brightness;
} }
}; };
})(); })();
(function(Konva) { (function(Konva) {
'use strict'; 'use strict';
@ -4929,30 +4929,30 @@
*/ */
})(Konva); })(Konva);
(function() { (function() {
'use strict'; 'use strict';
/** /**
* Invert Filter * Invert Filter
* @function * @function
* @memberof Konva.Filters * @memberof Konva.Filters
* @param {Object} imageData * @param {Object} imageData
* @example * @example
* node.cache(); * node.cache();
* node.filters([Konva.Filters.Invert]); * node.filters([Konva.Filters.Invert]);
*/ */
Konva.Filters.Invert = function(imageData) { Konva.Filters.Invert = function(imageData) {
var data = imageData.data, len = data.length, i; var data = imageData.data, len = data.length, i;
for (i = 0; i < len; i += 4) { for (i = 0; i < len; i += 4) {
// red // red
data[i] = 255 - data[i]; data[i] = 255 - data[i];
// green // green
data[i + 1] = 255 - data[i + 1]; data[i + 1] = 255 - data[i + 1];
// blue // blue
data[i + 2] = 255 - data[i + 2]; data[i + 2] = 255 - data[i + 2];
} }
}; };
})(); })();
/* /*
the Gauss filter the Gauss filter
@ -6857,215 +6857,216 @@
*/ */
})(); })();
(function() { (function() {
'use strict'; 'use strict';
/** /**
* Noise Filter. Randomly adds or substracts to the color channels * Noise Filter. Randomly adds or substracts to the color channels
* @function * @function
* @name Noise * @name Noise
* @memberof Konva.Filters * @memberof Konva.Filters
* @param {Object} imageData * @param {Object} imageData
* @author ippo615 * @author ippo615
* @example * @example
* node.cache(); * node.cache();
* node.filters([Konva.Filters.Noise]); * node.filters([Konva.Filters.Noise]);
* node.noise(0.8); * node.noise(0.8);
*/ */
Konva.Filters.Noise = function(imageData) { Konva.Filters.Noise = function(imageData) {
var amount = this.noise() * 255, var amount = this.noise() * 255,
data = imageData.data, data = imageData.data,
nPixels = data.length, nPixels = data.length,
half = amount / 2, half = amount / 2,
i; i;
for (i = 0; i < nPixels; i += 4) {
data[i + 0] += half - 2 * half * Math.random();
data[i + 1] += half - 2 * half * Math.random();
data[i + 2] += half - 2 * half * Math.random();
}
};
Konva.Factory.addGetterSetter(
Konva.Node,
'noise',
0.2,
null,
Konva.Factory.afterSetFilter
);
/**
* get/set noise amount. Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter.
* @name noise
* @method
* @memberof Konva.Node.prototype
* @param {Number} noise
* @returns {Number}
*/
})();
/*eslint-disable max-depth */ for (i = 0; i < nPixels; i += 4) {
(function() { data[i + 0] += half - 2 * half * Math.random();
'use strict'; data[i + 1] += half - 2 * half * Math.random();
/** data[i + 2] += half - 2 * half * Math.random();
* Pixelate Filter. Averages groups of pixels and redraws }
* them as larger pixels };
* @function
* @name Pixelate
* @memberof Konva.Filters
* @param {Object} imageData
* @author ippo615
* @example
* node.cache();
* node.filters([Konva.Filters.Pixelate]);
* node.pixelSize(10);
*/
Konva.Filters.Pixelate = function(imageData) {
var pixelSize = Math.ceil(this.pixelSize()),
width = imageData.width,
height = imageData.height,
x,
y,
i,
//pixelsPerBin = pixelSize * pixelSize,
red,
green,
blue,
alpha,
nBinsX = Math.ceil(width / pixelSize),
nBinsY = Math.ceil(height / pixelSize),
xBinStart,
xBinEnd,
yBinStart,
yBinEnd,
xBin,
yBin,
pixelsInBin;
imageData = imageData.data;
if (pixelSize <= 0) {
Konva.Util.error('pixelSize value can not be <= 0');
return;
}
for (xBin = 0; xBin < nBinsX; xBin += 1) {
for (yBin = 0; yBin < nBinsY; yBin += 1) {
// Initialize the color accumlators to 0
red = 0;
green = 0;
blue = 0;
alpha = 0;
// Determine which pixels are included in this bin
xBinStart = xBin * pixelSize;
xBinEnd = xBinStart + pixelSize;
yBinStart = yBin * pixelSize;
yBinEnd = yBinStart + pixelSize;
// Add all of the pixels to this bin!
pixelsInBin = 0;
for (x = xBinStart; x < xBinEnd; x += 1) {
if (x >= width) {
continue;
}
for (y = yBinStart; y < yBinEnd; y += 1) {
if (y >= height) {
continue;
}
i = (width * y + x) * 4;
red += imageData[i + 0];
green += imageData[i + 1];
blue += imageData[i + 2];
alpha += imageData[i + 3];
pixelsInBin += 1;
}
}
// Make sure the channels are between 0-255
red = red / pixelsInBin;
green = green / pixelsInBin;
blue = blue / pixelsInBin;
// Draw this bin
for (x = xBinStart; x < xBinEnd; x += 1) {
if (x >= width) {
continue;
}
for (y = yBinStart; y < yBinEnd; y += 1) {
if (y >= height) {
continue;
}
i = (width * y + x) * 4;
imageData[i + 0] = red;
imageData[i + 1] = green;
imageData[i + 2] = blue;
imageData[i + 3] = alpha;
}
}
}
}
};
Konva.Factory.addGetterSetter(
Konva.Node,
'pixelSize',
8,
null,
Konva.Factory.afterSetFilter
);
/**
* get/set pixel size. Use with {@link Konva.Filters.Pixelate} filter.
* @name pixelSize
* @method
* @memberof Konva.Node.prototype
* @param {Integer} pixelSize
* @returns {Integer}
*/
})();
(function() { Konva.Factory.addGetterSetter(
'use strict'; Konva.Node,
/** 'noise',
* Threshold Filter. Pushes any value above the mid point to 0.2,
* the max and any value below the mid point to the min. null,
* This affects the alpha channel. Konva.Factory.afterSetFilter
* @function );
* @name Threshold /**
* @memberof Konva.Filters * get/set noise amount. Must be a value between 0 and 1. Use with {@link Konva.Filters.Noise} filter.
* @param {Object} imageData * @name noise
* @author ippo615 * @method
* @example * @memberof Konva.Node.prototype
* node.cache(); * @param {Number} noise
* node.filters([Konva.Filters.Threshold]); * @returns {Number}
* node.threshold(0.1); */
*/ })();
Konva.Filters.Threshold = function(imageData) { /*eslint-disable max-depth */
var level = this.threshold() * 255, (function() {
data = imageData.data, 'use strict';
len = data.length, /**
i; * Pixelate Filter. Averages groups of pixels and redraws
* them as larger pixels
for (i = 0; i < len; i += 1) { * @function
data[i] = data[i] < level ? 0 : 255; * @name Pixelate
} * @memberof Konva.Filters
}; * @param {Object} imageData
* @author ippo615
Konva.Factory.addGetterSetter( * @example
Konva.Node, * node.cache();
'threshold', * node.filters([Konva.Filters.Pixelate]);
0.5, * node.pixelSize(10);
null, */
Konva.Factory.afterSetFilter
); Konva.Filters.Pixelate = function(imageData) {
/** var pixelSize = Math.ceil(this.pixelSize()),
* get/set threshold. Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter. width = imageData.width,
* @name threshold height = imageData.height,
* @method x,
* @memberof Konva.Node.prototype y,
* @param {Number} threshold i,
* @returns {Number} //pixelsPerBin = pixelSize * pixelSize,
*/ red,
})(); green,
blue,
alpha,
nBinsX = Math.ceil(width / pixelSize),
nBinsY = Math.ceil(height / pixelSize),
xBinStart,
xBinEnd,
yBinStart,
yBinEnd,
xBin,
yBin,
pixelsInBin;
imageData = imageData.data;
if (pixelSize <= 0) {
Konva.Util.error('pixelSize value can not be <= 0');
return;
}
for (xBin = 0; xBin < nBinsX; xBin += 1) {
for (yBin = 0; yBin < nBinsY; yBin += 1) {
// Initialize the color accumlators to 0
red = 0;
green = 0;
blue = 0;
alpha = 0;
// Determine which pixels are included in this bin
xBinStart = xBin * pixelSize;
xBinEnd = xBinStart + pixelSize;
yBinStart = yBin * pixelSize;
yBinEnd = yBinStart + pixelSize;
// Add all of the pixels to this bin!
pixelsInBin = 0;
for (x = xBinStart; x < xBinEnd; x += 1) {
if (x >= width) {
continue;
}
for (y = yBinStart; y < yBinEnd; y += 1) {
if (y >= height) {
continue;
}
i = (width * y + x) * 4;
red += imageData[i + 0];
green += imageData[i + 1];
blue += imageData[i + 2];
alpha += imageData[i + 3];
pixelsInBin += 1;
}
}
// Make sure the channels are between 0-255
red = red / pixelsInBin;
green = green / pixelsInBin;
blue = blue / pixelsInBin;
alpha = alpha / pixelsInBin;
// Draw this bin
for (x = xBinStart; x < xBinEnd; x += 1) {
if (x >= width) {
continue;
}
for (y = yBinStart; y < yBinEnd; y += 1) {
if (y >= height) {
continue;
}
i = (width * y + x) * 4;
imageData[i + 0] = red;
imageData[i + 1] = green;
imageData[i + 2] = blue;
imageData[i + 3] = alpha;
}
}
}
}
};
Konva.Factory.addGetterSetter(
Konva.Node,
'pixelSize',
8,
null,
Konva.Factory.afterSetFilter
);
/**
* get/set pixel size. Use with {@link Konva.Filters.Pixelate} filter.
* @name pixelSize
* @method
* @memberof Konva.Node.prototype
* @param {Integer} pixelSize
* @returns {Integer}
*/
})();
(function() {
'use strict';
/**
* Threshold Filter. Pushes any value above the mid point to
* the max and any value below the mid point to the min.
* This affects the alpha channel.
* @function
* @name Threshold
* @memberof Konva.Filters
* @param {Object} imageData
* @author ippo615
* @example
* node.cache();
* node.filters([Konva.Filters.Threshold]);
* node.threshold(0.1);
*/
Konva.Filters.Threshold = function(imageData) {
var level = this.threshold() * 255,
data = imageData.data,
len = data.length,
i;
for (i = 0; i < len; i += 1) {
data[i] = data[i] < level ? 0 : 255;
}
};
Konva.Factory.addGetterSetter(
Konva.Node,
'threshold',
0.5,
null,
Konva.Factory.afterSetFilter
);
/**
* get/set threshold. Must be a value between 0 and 1. Use with {@link Konva.Filters.Threshold} or {@link Konva.Filters.Mask} filter.
* @name threshold
* @method
* @memberof Konva.Node.prototype
* @param {Number} threshold
* @returns {Number}
*/
})();
(function() { (function() {
'use strict'; 'use strict';
@ -14241,6 +14242,7 @@
WORD = 'word', WORD = 'word',
CHAR = 'char', CHAR = 'char',
NONE = 'none', NONE = 'none',
ELLIPSIS = '…',
ATTR_CHANGE_LIST = [ ATTR_CHANGE_LIST = [
'fontFamily', 'fontFamily',
'fontSize', 'fontSize',
@ -14253,6 +14255,7 @@
'width', 'width',
'height', 'height',
'wrap', 'wrap',
'ellipsis',
'letterSpacing' 'letterSpacing'
], ],
// cached variables // cached variables
@ -14281,6 +14284,7 @@
* @param {Number} [config.padding] * @param {Number} [config.padding]
* @param {Number} [config.lineHeight] default is 1 * @param {Number} [config.lineHeight] default is 1
* @param {String} [config.wrap] can be word, char, or none. Default is word * @param {String} [config.wrap] can be word, char, or none. Default is word
* @param {Boolean} [config.ellipsis] can be true or false. Default is false
* @param {String} [config.fill] fill color * @param {String} [config.fill] fill color
* @param {Image} [config.fillPatternImage] fill pattern image * @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX] * @param {Number} [config.fillPatternX]
@ -14633,13 +14637,15 @@
currentHeightPx = 0, currentHeightPx = 0,
wrap = this.getWrap(), wrap = this.getWrap(),
shouldWrap = wrap !== NONE, shouldWrap = wrap !== NONE,
wrapAtWord = wrap !== CHAR && shouldWrap; wrapAtWord = wrap !== CHAR && shouldWrap,
shouldAddEllipsis = this.getEllipsis() && !shouldWrap;
this.textArr = []; this.textArr = [];
getDummyContext().save(); getDummyContext().save();
getDummyContext().font = this._getContextFont(); getDummyContext().font = this._getContextFont();
for (var i = 0, max = lines.length; i < max; ++i) { for (var i = 0, max = lines.length; i < max; ++i) {
var line = lines[i]; var line = lines[i];
var additionalWidth = shouldAddEllipsis ? this._getTextWidth(ELLIPSIS) : 0;
var lineWidth = this._getTextWidth(line); var lineWidth = this._getTextWidth(line);
if (fixedWidth && lineWidth > maxWidth) { if (fixedWidth && lineWidth > maxWidth) {
@ -14659,10 +14665,10 @@
while (low < high) { while (low < high) {
var mid = (low + high) >>> 1, var mid = (low + high) >>> 1,
substr = line.slice(0, mid + 1), substr = line.slice(0, mid + 1),
substrWidth = this._getTextWidth(substr); substrWidth = this._getTextWidth(substr) + additionalWidth;
if (substrWidth <= maxWidth) { if (substrWidth <= maxWidth) {
low = mid + 1; low = mid + 1;
match = substr; match = substr + (shouldAddEllipsis ? ELLIPSIS : '');
matchWidth = substrWidth; matchWidth = substrWidth;
} else { } else {
high = mid; high = mid;
@ -14879,6 +14885,23 @@
* text.wrap('word'); * text.wrap('word');
*/ */
Konva.Factory.addGetterSetter(Konva.Text, 'ellipsis', false);
/**
* get/set ellipsis. Can be true or false. Default is false.
* @name ellipsis
* @method
* @memberof Konva.Text.prototype
* @param {Boolean} ellipsis
* @returns {Boolean}
* @example
* // get ellipsis
* var ellipsis = text.ellipsis();
*
* // set ellipsis
* text.ellipsis('word');
*/
Konva.Factory.addGetterSetter(Konva.Text, 'letterSpacing', 0); Konva.Factory.addGetterSetter(Konva.Text, 'letterSpacing', 0);
/** /**

8
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

415
src/shapes/Text.js
View File

@ -22,6 +22,7 @@
WORD = 'word', WORD = 'word',
CHAR = 'char', CHAR = 'char',
NONE = 'none', NONE = 'none',
ELLIPSIS = '…',
ATTR_CHANGE_LIST = [ ATTR_CHANGE_LIST = [
'fontFamily', 'fontFamily',
'fontSize', 'fontSize',
@ -34,6 +35,7 @@
'width', 'width',
'height', 'height',
'wrap', 'wrap',
'ellipsis',
'letterSpacing' 'letterSpacing'
], ],
// cached variables // cached variables
@ -48,32 +50,33 @@
} }
/** /**
* Text constructor * Text constructor
* @constructor * @constructor
* @memberof Konva * @memberof Konva
* @augments Konva.Shape * @augments Konva.Shape
* @param {Object} config * @param {Object} config
* @param {String} [config.fontFamily] default is Arial * @param {String} [config.fontFamily] default is Arial
* @param {Number} [config.fontSize] in pixels. Default is 12 * @param {Number} [config.fontSize] in pixels. Default is 12
* @param {String} [config.fontStyle] can be normal, bold, or italic. Default is normal * @param {String} [config.fontStyle] can be normal, bold, or italic. Default is normal
* @param {String} [config.fontVariant] can be normal or small-caps. Default is normal * @param {String} [config.fontVariant] can be normal or small-caps. Default is normal
* @param {String} config.text * @param {String} config.text
* @param {String} [config.align] can be left, center, or right * @param {String} [config.align] can be left, center, or right
* @param {Number} [config.padding] * @param {Number} [config.padding]
* @param {Number} [config.lineHeight] default is 1 * @param {Number} [config.lineHeight] default is 1
* @param {String} [config.wrap] can be word, char, or none. Default is word * @param {String} [config.wrap] can be word, char, or none. Default is word
* @@shapeParams * @param {Boolean} [config.ellipsis] can be true or false. Default is false. if Konva.Text config is set to wrap="none" and ellipsis=true, then it will add "..." to the end
* @@nodeParams * @@shapeParams
* @example * @@nodeParams
* var text = new Konva.Text({ * @example
* x: 10, * var text = new Konva.Text({
* y: 15, * x: 10,
* text: 'Simple Text', * y: 15,
* fontSize: 30, * text: 'Simple Text',
* fontFamily: 'Calibri', * fontSize: 30,
* fill: 'green' * fontFamily: 'Calibri',
* }); * fill: 'green'
*/ * });
*/
Konva.Text = function(config) { Konva.Text = function(config) {
this.___init(config); this.___init(config);
}; };
@ -233,11 +236,11 @@
return this; return this;
}, },
/** /**
* get width of text area, which includes padding * get width of text area, which includes padding
* @method * @method
* @memberof Konva.Text.prototype * @memberof Konva.Text.prototype
* @returns {Number} * @returns {Number}
*/ */
getWidth: function() { getWidth: function() {
var isAuto = this.attrs.width === AUTO || this.attrs.width === undefined; var isAuto = this.attrs.width === AUTO || this.attrs.width === undefined;
return isAuto return isAuto
@ -245,34 +248,34 @@
: this.attrs.width; : this.attrs.width;
}, },
/** /**
* get the height of the text area, which takes into account multi-line text, line heights, and padding * get the height of the text area, which takes into account multi-line text, line heights, and padding
* @method * @method
* @memberof Konva.Text.prototype * @memberof Konva.Text.prototype
* @returns {Number} * @returns {Number}
*/ */
getHeight: function() { getHeight: function() {
var isAuto = var isAuto =
this.attrs.height === AUTO || this.attrs.height === undefined; this.attrs.height === AUTO || this.attrs.height === undefined;
return isAuto return isAuto
? this.getTextHeight() * this.textArr.length * this.getLineHeight() + ? this.getTextHeight() * this.textArr.length * this.getLineHeight() +
this.getPadding() * 2 this.getPadding() * 2
: this.attrs.height; : this.attrs.height;
}, },
/** /**
* get text width * get text width
* @method * @method
* @memberof Konva.Text.prototype * @memberof Konva.Text.prototype
* @returns {Number} * @returns {Number}
*/ */
getTextWidth: function() { getTextWidth: function() {
return this.textWidth; return this.textWidth;
}, },
/** /**
* get text height * get text height
* @method * @method
* @memberof Konva.Text.prototype * @memberof Konva.Text.prototype
* @returns {Number} * @returns {Number}
*/ */
getTextHeight: function() { getTextHeight: function() {
return this.textHeight; return this.textHeight;
}, },
@ -345,13 +348,17 @@
currentHeightPx = 0, currentHeightPx = 0,
wrap = this.getWrap(), wrap = this.getWrap(),
shouldWrap = wrap !== NONE, shouldWrap = wrap !== NONE,
wrapAtWord = wrap !== CHAR && shouldWrap; wrapAtWord = wrap !== CHAR && shouldWrap,
shouldAddEllipsis = this.getEllipsis() && !shouldWrap;
this.textArr = []; this.textArr = [];
getDummyContext().save(); getDummyContext().save();
getDummyContext().font = this._getContextFont(); getDummyContext().font = this._getContextFont();
for (var i = 0, max = lines.length; i < max; ++i) { for (var i = 0, max = lines.length; i < max; ++i) {
var line = lines[i]; var line = lines[i];
var additionalWidth = shouldAddEllipsis
? this._getTextWidth(ELLIPSIS)
: 0;
var lineWidth = this._getTextWidth(line); var lineWidth = this._getTextWidth(line);
if (fixedWidth && lineWidth > maxWidth) { if (fixedWidth && lineWidth > maxWidth) {
@ -371,10 +378,10 @@
while (low < high) { while (low < high) {
var mid = (low + high) >>> 1, var mid = (low + high) >>> 1,
substr = line.slice(0, mid + 1), substr = line.slice(0, mid + 1),
substrWidth = this._getTextWidth(substr); substrWidth = this._getTextWidth(substr) + additionalWidth;
if (substrWidth <= maxWidth) { if (substrWidth <= maxWidth) {
low = mid + 1; low = mid + 1;
match = substr; match = substr + (shouldAddEllipsis ? ELLIPSIS : '');
matchWidth = substrWidth; matchWidth = substrWidth;
} else { } else {
high = mid; high = mid;
@ -455,192 +462,210 @@
Konva.Factory.addGetterSetter(Konva.Text, 'fontFamily', 'Arial'); Konva.Factory.addGetterSetter(Konva.Text, 'fontFamily', 'Arial');
/** /**
* get/set font family * get/set font family
* @name fontFamily * @name fontFamily
* @method * @method
* @memberof Konva.Text.prototype * @memberof Konva.Text.prototype
* @param {String} fontFamily * @param {String} fontFamily
* @returns {String} * @returns {String}
* @example * @example
* // get font family * // get font family
* var fontFamily = text.fontFamily(); * var fontFamily = text.fontFamily();
* *
* // set font family * // set font family
* text.fontFamily('Arial'); * text.fontFamily('Arial');
*/ */
Konva.Factory.addGetterSetter(Konva.Text, 'fontSize', 12); Konva.Factory.addGetterSetter(Konva.Text, 'fontSize', 12);
/** /**
* get/set font size in pixels * get/set font size in pixels
* @name fontSize * @name fontSize
* @method * @method
* @memberof Konva.Text.prototype * @memberof Konva.Text.prototype
* @param {Number} fontSize * @param {Number} fontSize
* @returns {Number} * @returns {Number}
* @example * @example
* // get font size * // get font size
* var fontSize = text.fontSize(); * var fontSize = text.fontSize();
* *
* // set font size to 22px * // set font size to 22px
* text.fontSize(22); * text.fontSize(22);
*/ */
Konva.Factory.addGetterSetter(Konva.Text, 'fontStyle', NORMAL); Konva.Factory.addGetterSetter(Konva.Text, 'fontStyle', NORMAL);
/** /**
* set font style. Can be 'normal', 'italic', or 'bold'. 'normal' is the default. * set font style. Can be 'normal', 'italic', or 'bold'. 'normal' is the default.
* @name fontStyle * @name fontStyle
* @method * @method
* @memberof Konva.Text.prototype * @memberof Konva.Text.prototype
* @param {String} fontStyle * @param {String} fontStyle
* @returns {String} * @returns {String}
* @example * @example
* // get font style * // get font style
* var fontStyle = text.fontStyle(); * var fontStyle = text.fontStyle();
* *
* // set font style * // set font style
* text.fontStyle('bold'); * text.fontStyle('bold');
*/ */
Konva.Factory.addGetterSetter(Konva.Text, 'fontVariant', NORMAL); Konva.Factory.addGetterSetter(Konva.Text, 'fontVariant', NORMAL);
/** /**
* set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default. * set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default.
* @name fontVariant * @name fontVariant
* @method * @method
* @memberof Konva.Text.prototype * @memberof Konva.Text.prototype
* @param {String} fontVariant * @param {String} fontVariant
* @returns {String} * @returns {String}
* @example * @example
* // get font variant * // get font variant
* var fontVariant = text.fontVariant(); * var fontVariant = text.fontVariant();
* *
* // set font variant * // set font variant
* text.fontVariant('small-caps'); * text.fontVariant('small-caps');
*/ */
Konva.Factory.addGetterSetter(Konva.Text, 'padding', 0); Konva.Factory.addGetterSetter(Konva.Text, 'padding', 0);
/** /**
* set padding * set padding
* @name padding * @name padding
* @method * @method
* @memberof Konva.Text.prototype * @memberof Konva.Text.prototype
* @param {Number} padding * @param {Number} padding
* @returns {Number} * @returns {Number}
* @example * @example
* // get padding * // get padding
* var padding = text.padding(); * var padding = text.padding();
* *
* // set padding to 10 pixels * // set padding to 10 pixels
* text.padding(10); * text.padding(10);
*/ */
Konva.Factory.addGetterSetter(Konva.Text, 'align', LEFT); Konva.Factory.addGetterSetter(Konva.Text, 'align', LEFT);
/** /**
* get/set horizontal align of text. Can be 'left', 'center', 'right' or 'justify' * get/set horizontal align of text. Can be 'left', 'center', 'right' or 'justify'
* @name align * @name align
* @method * @method
* @memberof Konva.Text.prototype * @memberof Konva.Text.prototype
* @param {String} align * @param {String} align
* @returns {String} * @returns {String}
* @example * @example
* // get text align * // get text align
* var align = text.align(); * var align = text.align();
* *
* // center text * // center text
* text.align('center'); * text.align('center');
* *
* // align text to right * // align text to right
* text.align('right'); * text.align('right');
*/ */
Konva.Factory.addGetterSetter(Konva.Text, 'lineHeight', 1); Konva.Factory.addGetterSetter(Konva.Text, 'lineHeight', 1);
/** /**
* get/set line height. The default is 1. * get/set line height. The default is 1.
* @name lineHeight * @name lineHeight
* @method * @method
* @memberof Konva.Text.prototype * @memberof Konva.Text.prototype
* @param {Number} lineHeight * @param {Number} lineHeight
* @returns {Number} * @returns {Number}
* @example * @example
* // get line height * // get line height
* var lineHeight = text.lineHeight(); * var lineHeight = text.lineHeight();
* *
* // set the line height * // set the line height
* text.lineHeight(2); * text.lineHeight(2);
*/ */
Konva.Factory.addGetterSetter(Konva.Text, 'wrap', WORD); Konva.Factory.addGetterSetter(Konva.Text, 'wrap', WORD);
/** /**
* get/set wrap. Can be word, char, or none. Default is word. * get/set wrap. Can be word, char, or none. Default is word.
* @name wrap * @name wrap
* @method * @method
* @memberof Konva.Text.prototype * @memberof Konva.Text.prototype
* @param {String} wrap * @param {String} wrap
* @returns {String} * @returns {String}
* @example * @example
* // get wrap * // get wrap
* var wrap = text.wrap(); * var wrap = text.wrap();
* *
* // set wrap * // set wrap
* text.wrap('word'); * text.wrap('word');
*/ */
Konva.Factory.addGetterSetter(Konva.Text, 'ellipsis', false);
/**
* get/set ellipsis. Can be true or false. Default is false.
* if Konva.Text config is set to wrap="none" and ellipsis=true, then it will add "..." to the end
* @name ellipsis
* @method
* @memberof Konva.Text.prototype
* @param {Boolean} ellipsis
* @returns {Boolean}
* @example
* // get ellipsis
* var ellipsis = text.ellipsis();
*
* // set ellipsis
* text.ellipsis(true);
*/
Konva.Factory.addGetterSetter(Konva.Text, 'letterSpacing', 0); Konva.Factory.addGetterSetter(Konva.Text, 'letterSpacing', 0);
/** /**
* set letter spacing property. Default value is 0. * set letter spacing property. Default value is 0.
* @name letterSpacing * @name letterSpacing
* @method * @method
* @memberof Konva.TextPath.prototype * @memberof Konva.TextPath.prototype
* @param {Number} letterSpacing * @param {Number} letterSpacing
*/ */
Konva.Factory.addGetter(Konva.Text, 'text', EMPTY_STRING); Konva.Factory.addGetter(Konva.Text, 'text', EMPTY_STRING);
Konva.Factory.addOverloadedGetterSetter(Konva.Text, 'text'); Konva.Factory.addOverloadedGetterSetter(Konva.Text, 'text');
/** /**
* get/set text * get/set text
* @name getText * @name getText
* @method * @method
* @memberof Konva.Text.prototype * @memberof Konva.Text.prototype
* @param {String} text * @param {String} text
* @returns {String} * @returns {String}
* @example * @example
* // get text * // get text
* var text = text.text(); * var text = text.text();
* *
* // set text * // set text
* text.text('Hello world!'); * text.text('Hello world!');
*/ */
Konva.Factory.addGetterSetter(Konva.Text, 'textDecoration', EMPTY_STRING); Konva.Factory.addGetterSetter(Konva.Text, 'textDecoration', EMPTY_STRING);
/** /**
* get/set text decoration of a text. Possible values are 'underline', 'line-through' or combination of these values separated by space * get/set text decoration of a text. Possible values are 'underline', 'line-through' or combination of these values separated by space
* @name textDecoration * @name textDecoration
* @method * @method
* @memberof Konva.Text.prototype * @memberof Konva.Text.prototype
* @param {String} textDecoration * @param {String} textDecoration
* @returns {String} * @returns {String}
* @example * @example
* // get text decoration * // get text decoration
* var textDecoration = text.textDecoration(); * var textDecoration = text.textDecoration();
* *
* // underline text * // underline text
* text.textDecoration('underline'); * text.textDecoration('underline');
* *
* // strike text * // strike text
* text.textDecoration('line-through'); * text.textDecoration('line-through');
* *
* // underline and strike text * // underline and strike text
* text.textDecoration('underline line-through'); * text.textDecoration('underline line-through');
*/ */
Konva.Collection.mapMethods(Konva.Text); Konva.Collection.mapMethods(Konva.Text);
})(); })();

36
test/unit/shapes/Text-test.js
View File

@ -364,6 +364,42 @@ suite('Text', function() {
assert.equal(text.getLineHeight(), 20); assert.equal(text.getLineHeight(), 20);
}); });
// ======================================================
test('text single line with ellipsis', function() {
var stage = addStage();
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: 10,
y: 10,
width: 380,
height: 300,
fill: 'red'
});
var text = new Konva.Text({
x: 10,
y: 10,
text: "HEADING\n\nAll the world's a stage, merely players. They have their exits and their entrances; And one man in his time plays many parts.",
fontSize: 14,
fontFamily: 'Calibri',
fontStyle: 'normal',
fill: '#555',
width: 100,
padding: 0,
lineHeight: 20,
align: 'center',
wrap: 'none',
ellipsis: true
});
layer.add(rect).add(text);
stage.add(layer);
assert.equal(text.textArr.length, 3);
assert.equal(text.textArr[2].text.slice(-1), '…');
});
// ====================================================== // ======================================================
test('text multi line with justify align', function() { test('text multi line with justify align', function() {
var stage = addStage(); var stage = addStage();