mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
Merge branch 'master' of github.com:konvajs/konva
This commit is contained in:
Anton Lavrenov
commit
2c17492ef2
@ -11,6 +11,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
|
||||
* Add ability to remove event by callback `node.off('event', callback)`.
|
||||
* new `Konva.Filters.Contrast`.
|
||||
* 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
|
||||
|
||||
|
||||
543
konva.js
543
konva.js
@ -2,7 +2,7 @@
|
||||
* Konva JavaScript Framework v1.7.6
|
||||
* http://konvajs.github.io/
|
||||
* Licensed under the MIT
|
||||
* Date: Thu Feb 22 2018
|
||||
* Date: Mon Feb 26 2018
|
||||
*
|
||||
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
|
||||
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
|
||||
@ -4857,31 +4857,31 @@
|
||||
Konva.Collection.mapMethods(Konva.Node);
|
||||
})(Konva);
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
/**
|
||||
* Grayscale Filter
|
||||
* @function
|
||||
* @memberof Konva.Filters
|
||||
* @param {Object} imageData
|
||||
* @example
|
||||
* node.cache();
|
||||
* node.filters([Konva.Filters.Grayscale]);
|
||||
*/
|
||||
Konva.Filters.Grayscale = function(imageData) {
|
||||
var data = imageData.data, len = data.length, i, brightness;
|
||||
|
||||
for (i = 0; i < len; i += 4) {
|
||||
brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
|
||||
// red
|
||||
data[i] = brightness;
|
||||
// green
|
||||
data[i + 1] = brightness;
|
||||
// blue
|
||||
data[i + 2] = brightness;
|
||||
}
|
||||
};
|
||||
})();
|
||||
(function() {
|
||||
'use strict';
|
||||
/**
|
||||
* Grayscale Filter
|
||||
* @function
|
||||
* @memberof Konva.Filters
|
||||
* @param {Object} imageData
|
||||
* @example
|
||||
* node.cache();
|
||||
* node.filters([Konva.Filters.Grayscale]);
|
||||
*/
|
||||
Konva.Filters.Grayscale = function(imageData) {
|
||||
var data = imageData.data, len = data.length, i, brightness;
|
||||
|
||||
for (i = 0; i < len; i += 4) {
|
||||
brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
|
||||
// red
|
||||
data[i] = brightness;
|
||||
// green
|
||||
data[i + 1] = brightness;
|
||||
// blue
|
||||
data[i + 2] = brightness;
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
(function(Konva) {
|
||||
'use strict';
|
||||
@ -4929,30 +4929,30 @@
|
||||
*/
|
||||
})(Konva);
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
/**
|
||||
* Invert Filter
|
||||
* @function
|
||||
* @memberof Konva.Filters
|
||||
* @param {Object} imageData
|
||||
* @example
|
||||
* node.cache();
|
||||
* node.filters([Konva.Filters.Invert]);
|
||||
*/
|
||||
Konva.Filters.Invert = function(imageData) {
|
||||
var data = imageData.data, len = data.length, i;
|
||||
|
||||
for (i = 0; i < len; i += 4) {
|
||||
// red
|
||||
data[i] = 255 - data[i];
|
||||
// green
|
||||
data[i + 1] = 255 - data[i + 1];
|
||||
// blue
|
||||
data[i + 2] = 255 - data[i + 2];
|
||||
}
|
||||
};
|
||||
})();
|
||||
(function() {
|
||||
'use strict';
|
||||
/**
|
||||
* Invert Filter
|
||||
* @function
|
||||
* @memberof Konva.Filters
|
||||
* @param {Object} imageData
|
||||
* @example
|
||||
* node.cache();
|
||||
* node.filters([Konva.Filters.Invert]);
|
||||
*/
|
||||
Konva.Filters.Invert = function(imageData) {
|
||||
var data = imageData.data, len = data.length, i;
|
||||
|
||||
for (i = 0; i < len; i += 4) {
|
||||
// red
|
||||
data[i] = 255 - data[i];
|
||||
// green
|
||||
data[i + 1] = 255 - data[i + 1];
|
||||
// blue
|
||||
data[i + 2] = 255 - data[i + 2];
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
||||
/*
|
||||
the Gauss filter
|
||||
@ -6857,215 +6857,216 @@
|
||||
*/
|
||||
})();
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
/**
|
||||
* Noise Filter. Randomly adds or substracts to the color channels
|
||||
* @function
|
||||
* @name Noise
|
||||
* @memberof Konva.Filters
|
||||
* @param {Object} imageData
|
||||
* @author ippo615
|
||||
* @example
|
||||
* node.cache();
|
||||
* node.filters([Konva.Filters.Noise]);
|
||||
* node.noise(0.8);
|
||||
*/
|
||||
Konva.Filters.Noise = function(imageData) {
|
||||
var amount = this.noise() * 255,
|
||||
data = imageData.data,
|
||||
nPixels = data.length,
|
||||
half = amount / 2,
|
||||
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}
|
||||
*/
|
||||
})();
|
||||
(function() {
|
||||
'use strict';
|
||||
/**
|
||||
* Noise Filter. Randomly adds or substracts to the color channels
|
||||
* @function
|
||||
* @name Noise
|
||||
* @memberof Konva.Filters
|
||||
* @param {Object} imageData
|
||||
* @author ippo615
|
||||
* @example
|
||||
* node.cache();
|
||||
* node.filters([Konva.Filters.Noise]);
|
||||
* node.noise(0.8);
|
||||
*/
|
||||
Konva.Filters.Noise = function(imageData) {
|
||||
var amount = this.noise() * 255,
|
||||
data = imageData.data,
|
||||
nPixels = data.length,
|
||||
half = amount / 2,
|
||||
i;
|
||||
|
||||
/*eslint-disable max-depth */
|
||||
(function() {
|
||||
'use strict';
|
||||
/**
|
||||
* 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}
|
||||
*/
|
||||
})();
|
||||
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();
|
||||
}
|
||||
};
|
||||
|
||||
(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}
|
||||
*/
|
||||
})();
|
||||
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 */
|
||||
(function() {
|
||||
'use strict';
|
||||
/**
|
||||
* 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;
|
||||
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() {
|
||||
'use strict';
|
||||
@ -14241,6 +14242,7 @@
|
||||
WORD = 'word',
|
||||
CHAR = 'char',
|
||||
NONE = 'none',
|
||||
ELLIPSIS = '…',
|
||||
ATTR_CHANGE_LIST = [
|
||||
'fontFamily',
|
||||
'fontSize',
|
||||
@ -14253,6 +14255,7 @@
|
||||
'width',
|
||||
'height',
|
||||
'wrap',
|
||||
'ellipsis',
|
||||
'letterSpacing'
|
||||
],
|
||||
// cached variables
|
||||
@ -14281,6 +14284,7 @@
|
||||
* @param {Number} [config.padding]
|
||||
* @param {Number} [config.lineHeight] default is 1
|
||||
* @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 {Image} [config.fillPatternImage] fill pattern image
|
||||
* @param {Number} [config.fillPatternX]
|
||||
@ -14633,13 +14637,15 @@
|
||||
currentHeightPx = 0,
|
||||
wrap = this.getWrap(),
|
||||
shouldWrap = wrap !== NONE,
|
||||
wrapAtWord = wrap !== CHAR && shouldWrap;
|
||||
wrapAtWord = wrap !== CHAR && shouldWrap,
|
||||
shouldAddEllipsis = this.getEllipsis() && !shouldWrap;
|
||||
|
||||
this.textArr = [];
|
||||
getDummyContext().save();
|
||||
getDummyContext().font = this._getContextFont();
|
||||
for (var i = 0, max = lines.length; i < max; ++i) {
|
||||
var line = lines[i];
|
||||
var additionalWidth = shouldAddEllipsis ? this._getTextWidth(ELLIPSIS) : 0;
|
||||
|
||||
var lineWidth = this._getTextWidth(line);
|
||||
if (fixedWidth && lineWidth > maxWidth) {
|
||||
@ -14659,10 +14665,10 @@
|
||||
while (low < high) {
|
||||
var mid = (low + high) >>> 1,
|
||||
substr = line.slice(0, mid + 1),
|
||||
substrWidth = this._getTextWidth(substr);
|
||||
substrWidth = this._getTextWidth(substr) + additionalWidth;
|
||||
if (substrWidth <= maxWidth) {
|
||||
low = mid + 1;
|
||||
match = substr;
|
||||
match = substr + (shouldAddEllipsis ? ELLIPSIS : '');
|
||||
matchWidth = substrWidth;
|
||||
} else {
|
||||
high = mid;
|
||||
@ -14879,6 +14885,23 @@
|
||||
* 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);
|
||||
|
||||
/**
|
||||
|
||||
8
konva.min.js
vendored
8
konva.min.js
vendored
File diff suppressed because one or more lines are too long
@ -22,6 +22,7 @@
|
||||
WORD = 'word',
|
||||
CHAR = 'char',
|
||||
NONE = 'none',
|
||||
ELLIPSIS = '…',
|
||||
ATTR_CHANGE_LIST = [
|
||||
'fontFamily',
|
||||
'fontSize',
|
||||
@ -34,6 +35,7 @@
|
||||
'width',
|
||||
'height',
|
||||
'wrap',
|
||||
'ellipsis',
|
||||
'letterSpacing'
|
||||
],
|
||||
// cached variables
|
||||
@ -48,32 +50,33 @@
|
||||
}
|
||||
|
||||
/**
|
||||
* Text constructor
|
||||
* @constructor
|
||||
* @memberof Konva
|
||||
* @augments Konva.Shape
|
||||
* @param {Object} config
|
||||
* @param {String} [config.fontFamily] default is Arial
|
||||
* @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.fontVariant] can be normal or small-caps. Default is normal
|
||||
* @param {String} config.text
|
||||
* @param {String} [config.align] can be left, center, or right
|
||||
* @param {Number} [config.padding]
|
||||
* @param {Number} [config.lineHeight] default is 1
|
||||
* @param {String} [config.wrap] can be word, char, or none. Default is word
|
||||
* @@shapeParams
|
||||
* @@nodeParams
|
||||
* @example
|
||||
* var text = new Konva.Text({
|
||||
* x: 10,
|
||||
* y: 15,
|
||||
* text: 'Simple Text',
|
||||
* fontSize: 30,
|
||||
* fontFamily: 'Calibri',
|
||||
* fill: 'green'
|
||||
* });
|
||||
*/
|
||||
* Text constructor
|
||||
* @constructor
|
||||
* @memberof Konva
|
||||
* @augments Konva.Shape
|
||||
* @param {Object} config
|
||||
* @param {String} [config.fontFamily] default is Arial
|
||||
* @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.fontVariant] can be normal or small-caps. Default is normal
|
||||
* @param {String} config.text
|
||||
* @param {String} [config.align] can be left, center, or right
|
||||
* @param {Number} [config.padding]
|
||||
* @param {Number} [config.lineHeight] default is 1
|
||||
* @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. if Konva.Text config is set to wrap="none" and ellipsis=true, then it will add "..." to the end
|
||||
* @@shapeParams
|
||||
* @@nodeParams
|
||||
* @example
|
||||
* var text = new Konva.Text({
|
||||
* x: 10,
|
||||
* y: 15,
|
||||
* text: 'Simple Text',
|
||||
* fontSize: 30,
|
||||
* fontFamily: 'Calibri',
|
||||
* fill: 'green'
|
||||
* });
|
||||
*/
|
||||
Konva.Text = function(config) {
|
||||
this.___init(config);
|
||||
};
|
||||
@ -233,11 +236,11 @@
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* get width of text area, which includes padding
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @returns {Number}
|
||||
*/
|
||||
* get width of text area, which includes padding
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @returns {Number}
|
||||
*/
|
||||
getWidth: function() {
|
||||
var isAuto = this.attrs.width === AUTO || this.attrs.width === undefined;
|
||||
return isAuto
|
||||
@ -245,34 +248,34 @@
|
||||
: this.attrs.width;
|
||||
},
|
||||
/**
|
||||
* get the height of the text area, which takes into account multi-line text, line heights, and padding
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @returns {Number}
|
||||
*/
|
||||
* get the height of the text area, which takes into account multi-line text, line heights, and padding
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @returns {Number}
|
||||
*/
|
||||
getHeight: function() {
|
||||
var isAuto =
|
||||
this.attrs.height === AUTO || this.attrs.height === undefined;
|
||||
return isAuto
|
||||
? this.getTextHeight() * this.textArr.length * this.getLineHeight() +
|
||||
this.getPadding() * 2
|
||||
this.getPadding() * 2
|
||||
: this.attrs.height;
|
||||
},
|
||||
/**
|
||||
* get text width
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @returns {Number}
|
||||
*/
|
||||
* get text width
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @returns {Number}
|
||||
*/
|
||||
getTextWidth: function() {
|
||||
return this.textWidth;
|
||||
},
|
||||
/**
|
||||
* get text height
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @returns {Number}
|
||||
*/
|
||||
* get text height
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @returns {Number}
|
||||
*/
|
||||
getTextHeight: function() {
|
||||
return this.textHeight;
|
||||
},
|
||||
@ -345,13 +348,17 @@
|
||||
currentHeightPx = 0,
|
||||
wrap = this.getWrap(),
|
||||
shouldWrap = wrap !== NONE,
|
||||
wrapAtWord = wrap !== CHAR && shouldWrap;
|
||||
wrapAtWord = wrap !== CHAR && shouldWrap,
|
||||
shouldAddEllipsis = this.getEllipsis() && !shouldWrap;
|
||||
|
||||
this.textArr = [];
|
||||
getDummyContext().save();
|
||||
getDummyContext().font = this._getContextFont();
|
||||
for (var i = 0, max = lines.length; i < max; ++i) {
|
||||
var line = lines[i];
|
||||
var additionalWidth = shouldAddEllipsis
|
||||
? this._getTextWidth(ELLIPSIS)
|
||||
: 0;
|
||||
|
||||
var lineWidth = this._getTextWidth(line);
|
||||
if (fixedWidth && lineWidth > maxWidth) {
|
||||
@ -371,10 +378,10 @@
|
||||
while (low < high) {
|
||||
var mid = (low + high) >>> 1,
|
||||
substr = line.slice(0, mid + 1),
|
||||
substrWidth = this._getTextWidth(substr);
|
||||
substrWidth = this._getTextWidth(substr) + additionalWidth;
|
||||
if (substrWidth <= maxWidth) {
|
||||
low = mid + 1;
|
||||
match = substr;
|
||||
match = substr + (shouldAddEllipsis ? ELLIPSIS : '');
|
||||
matchWidth = substrWidth;
|
||||
} else {
|
||||
high = mid;
|
||||
@ -455,192 +462,210 @@
|
||||
Konva.Factory.addGetterSetter(Konva.Text, 'fontFamily', 'Arial');
|
||||
|
||||
/**
|
||||
* get/set font family
|
||||
* @name fontFamily
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {String} fontFamily
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get font family
|
||||
* var fontFamily = text.fontFamily();
|
||||
*
|
||||
* // set font family
|
||||
* text.fontFamily('Arial');
|
||||
*/
|
||||
* get/set font family
|
||||
* @name fontFamily
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {String} fontFamily
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get font family
|
||||
* var fontFamily = text.fontFamily();
|
||||
*
|
||||
* // set font family
|
||||
* text.fontFamily('Arial');
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Text, 'fontSize', 12);
|
||||
|
||||
/**
|
||||
* get/set font size in pixels
|
||||
* @name fontSize
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {Number} fontSize
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get font size
|
||||
* var fontSize = text.fontSize();
|
||||
*
|
||||
* // set font size to 22px
|
||||
* text.fontSize(22);
|
||||
*/
|
||||
* get/set font size in pixels
|
||||
* @name fontSize
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {Number} fontSize
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get font size
|
||||
* var fontSize = text.fontSize();
|
||||
*
|
||||
* // set font size to 22px
|
||||
* text.fontSize(22);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Text, 'fontStyle', NORMAL);
|
||||
|
||||
/**
|
||||
* set font style. Can be 'normal', 'italic', or 'bold'. 'normal' is the default.
|
||||
* @name fontStyle
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {String} fontStyle
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get font style
|
||||
* var fontStyle = text.fontStyle();
|
||||
*
|
||||
* // set font style
|
||||
* text.fontStyle('bold');
|
||||
*/
|
||||
* set font style. Can be 'normal', 'italic', or 'bold'. 'normal' is the default.
|
||||
* @name fontStyle
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {String} fontStyle
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get font style
|
||||
* var fontStyle = text.fontStyle();
|
||||
*
|
||||
* // set font style
|
||||
* text.fontStyle('bold');
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Text, 'fontVariant', NORMAL);
|
||||
|
||||
/**
|
||||
* set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default.
|
||||
* @name fontVariant
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {String} fontVariant
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get font variant
|
||||
* var fontVariant = text.fontVariant();
|
||||
*
|
||||
* // set font variant
|
||||
* text.fontVariant('small-caps');
|
||||
*/
|
||||
* set font variant. Can be 'normal' or 'small-caps'. 'normal' is the default.
|
||||
* @name fontVariant
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {String} fontVariant
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get font variant
|
||||
* var fontVariant = text.fontVariant();
|
||||
*
|
||||
* // set font variant
|
||||
* text.fontVariant('small-caps');
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Text, 'padding', 0);
|
||||
|
||||
/**
|
||||
* set padding
|
||||
* @name padding
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {Number} padding
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get padding
|
||||
* var padding = text.padding();
|
||||
*
|
||||
* // set padding to 10 pixels
|
||||
* text.padding(10);
|
||||
*/
|
||||
* set padding
|
||||
* @name padding
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {Number} padding
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get padding
|
||||
* var padding = text.padding();
|
||||
*
|
||||
* // set padding to 10 pixels
|
||||
* text.padding(10);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Text, 'align', LEFT);
|
||||
|
||||
/**
|
||||
* get/set horizontal align of text. Can be 'left', 'center', 'right' or 'justify'
|
||||
* @name align
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {String} align
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get text align
|
||||
* var align = text.align();
|
||||
*
|
||||
* // center text
|
||||
* text.align('center');
|
||||
*
|
||||
* // align text to right
|
||||
* text.align('right');
|
||||
*/
|
||||
* get/set horizontal align of text. Can be 'left', 'center', 'right' or 'justify'
|
||||
* @name align
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {String} align
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get text align
|
||||
* var align = text.align();
|
||||
*
|
||||
* // center text
|
||||
* text.align('center');
|
||||
*
|
||||
* // align text to right
|
||||
* text.align('right');
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Text, 'lineHeight', 1);
|
||||
|
||||
/**
|
||||
* get/set line height. The default is 1.
|
||||
* @name lineHeight
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {Number} lineHeight
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get line height
|
||||
* var lineHeight = text.lineHeight();
|
||||
*
|
||||
* // set the line height
|
||||
* text.lineHeight(2);
|
||||
*/
|
||||
* get/set line height. The default is 1.
|
||||
* @name lineHeight
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {Number} lineHeight
|
||||
* @returns {Number}
|
||||
* @example
|
||||
* // get line height
|
||||
* var lineHeight = text.lineHeight();
|
||||
*
|
||||
* // set the line height
|
||||
* text.lineHeight(2);
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetterSetter(Konva.Text, 'wrap', WORD);
|
||||
|
||||
/**
|
||||
* get/set wrap. Can be word, char, or none. Default is word.
|
||||
* @name wrap
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {String} wrap
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get wrap
|
||||
* var wrap = text.wrap();
|
||||
*
|
||||
* // set wrap
|
||||
* text.wrap('word');
|
||||
*/
|
||||
* get/set wrap. Can be word, char, or none. Default is word.
|
||||
* @name wrap
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {String} wrap
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get wrap
|
||||
* var wrap = text.wrap();
|
||||
*
|
||||
* // set wrap
|
||||
* 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);
|
||||
|
||||
/**
|
||||
* set letter spacing property. Default value is 0.
|
||||
* @name letterSpacing
|
||||
* @method
|
||||
* @memberof Konva.TextPath.prototype
|
||||
* @param {Number} letterSpacing
|
||||
*/
|
||||
* set letter spacing property. Default value is 0.
|
||||
* @name letterSpacing
|
||||
* @method
|
||||
* @memberof Konva.TextPath.prototype
|
||||
* @param {Number} letterSpacing
|
||||
*/
|
||||
|
||||
Konva.Factory.addGetter(Konva.Text, 'text', EMPTY_STRING);
|
||||
Konva.Factory.addOverloadedGetterSetter(Konva.Text, 'text');
|
||||
|
||||
/**
|
||||
* get/set text
|
||||
* @name getText
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {String} text
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get text
|
||||
* var text = text.text();
|
||||
*
|
||||
* // set text
|
||||
* text.text('Hello world!');
|
||||
*/
|
||||
* get/set text
|
||||
* @name getText
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {String} text
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get text
|
||||
* var text = text.text();
|
||||
*
|
||||
* // set text
|
||||
* text.text('Hello world!');
|
||||
*/
|
||||
|
||||
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
|
||||
* @name textDecoration
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {String} textDecoration
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get text decoration
|
||||
* var textDecoration = text.textDecoration();
|
||||
*
|
||||
* // underline text
|
||||
* text.textDecoration('underline');
|
||||
*
|
||||
* // strike text
|
||||
* text.textDecoration('line-through');
|
||||
*
|
||||
* // underline and strike text
|
||||
* text.textDecoration('underline line-through');
|
||||
*/
|
||||
* get/set text decoration of a text. Possible values are 'underline', 'line-through' or combination of these values separated by space
|
||||
* @name textDecoration
|
||||
* @method
|
||||
* @memberof Konva.Text.prototype
|
||||
* @param {String} textDecoration
|
||||
* @returns {String}
|
||||
* @example
|
||||
* // get text decoration
|
||||
* var textDecoration = text.textDecoration();
|
||||
*
|
||||
* // underline text
|
||||
* text.textDecoration('underline');
|
||||
*
|
||||
* // strike text
|
||||
* text.textDecoration('line-through');
|
||||
*
|
||||
* // underline and strike text
|
||||
* text.textDecoration('underline line-through');
|
||||
*/
|
||||
|
||||
Konva.Collection.mapMethods(Konva.Text);
|
||||
})();
|
||||
|
||||
@ -364,6 +364,42 @@ suite('Text', function() {
|
||||
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() {
|
||||
var stage = addStage();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user