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

getKerning TextPath API is deprecated. Use "kerningFunc" instead.

Browse Source
This commit is contained in:
Anton Lavrenov 2018-11-17 08:50:31 -05:00
parent 3cfb576812
commit 352f493d0a
6 changed files with 127 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CHANGELOG.md
View File

@ -5,6 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
## [new version][unreleased]
### Changed
* getKerning TextPath API is deprecated. Use "kerningFunc" instead.
## [2.5.1][2018-11-08]
### Changed

28
konva.d.ts vendored
View File

@ -12,9 +12,7 @@ declare namespace Konva {
cancelBubble: boolean;
}
type HandlerFunc<E = Event> = (
e: KonvaEventObject<E>
) => void;
type HandlerFunc<E = Event> = (e: KonvaEventObject<E>) => void;
enum KonvaNodeEvent {
mouseover = 'mouseover',
@ -93,8 +91,20 @@ declare namespace Konva {
static getRGB(color: string): string;
}
type EasingFn = (elapsed: number, startValue: number, diff: number, duration: number) => number;
type ElasticEasingFn = (elapsed: number, startValue: number, diff: number, duration: number, a?: number, p?: number) => number;
type EasingFn = (
elapsed: number,
startValue: number,
diff: number,
duration: number
) => number;
type ElasticEasingFn = (
elapsed: number,
startValue: number,
diff: number,
duration: number,
a?: number,
p?: number
) => number;
export class Easings {
static BackEaseIn: EasingFn;
@ -368,9 +378,7 @@ declare namespace Konva {
offsetY(offsetY: number): this;
on<K extends keyof KonvaNodeEventMap>(
evtStr: K,
handler: (
e: KonvaEventObject<KonvaNodeEventMap[K]>
) => void
handler: (e: KonvaEventObject<KonvaNodeEventMap[K]>) => void
): this;
on(evtStr: KonvaEventString, handler: HandlerFunc): this;
opacity(): number;
@ -461,7 +469,9 @@ declare namespace Konva {
clipFunc(): (ctx: CanvasRenderingContext2D) => void;
clipFunc(clipFunc: (ctx: CanvasRenderingContext2D) => void): void;
destroyChildren(): void;
find<T extends Node = Node>(selector?: string | ((node: Node) => boolean)): Collection<T>;
find<T extends Node = Node>(
selector?: string | ((node: Node) => boolean)
): Collection<T>;
findOne<T extends Node>(selector: string | ((node: Node) => boolean)): T;
getAllIntersections(pos: Vector2d): Shape[];
hasChildren(): boolean;

45
konva.js
View File

@ -2,7 +2,7 @@
* Konva JavaScript Framework v2.5.1
* http://konvajs.github.io/
* Licensed under the MIT
* Date: Thu Nov 08 2018
* Date: Sat Nov 17 2018
*
* Original work Copyright (C) 2011 - 2013 by Eric Rowell (KineticJS)
* Modified work Copyright (C) 2014 - present by Anton Lavrenov (Konva)
@ -17656,6 +17656,7 @@
* @param {String} config.text
* @param {String} config.data SVG data string
* @param {Function} config.getKerning a getter for kerning values for the specified characters
* @param {Function} config.kerningFunc a getter for kerning values for the specified characters
* @param {String} [config.fill] fill color
* @param {Image} [config.fillPatternImage] fill pattern image
* @param {Number} [config.fillPatternX]
@ -17749,7 +17750,7 @@
* fontFamily: 'Arial',
* text: 'All the world\'s a stage, and all the men and women merely players.',
* data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50',
* getKerning: function(leftChar, rightChar) {
* kerningFunc: function(leftChar, rightChar) {
* return kerningPairs.hasOwnProperty(leftChar) ? pairs[leftChar][rightChar] || 0 : 0
* }
* });
@ -17770,7 +17771,6 @@
var that = this;
this.dummyCanvas = Konva.Util.createCanvasElement();
this.dataArray = [];
this.getKerning = config && config.getKerning;
// call super constructor
Konva.Shape.call(this, config);
@ -17792,9 +17792,17 @@
// update text data for certain attr changes
this.on(
'textChange.konva alignChange.konva letterSpacingChange.konva',
'textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva',
that._setTextData
);
if (config && config.getKerning) {
Konva.Util.warn(
'getKerning TextPath API is deprecated. Please use "kerningFunc" instead.'
);
this.setKerningFunc(config.getKerning);
}
that._setTextData();
this.sceneFunc(this._sceneFunc);
this.hitFunc(this._hitFunc);
@ -17913,6 +17921,7 @@
var size = this._getTextSize(this.attrs.text);
var letterSpacing = this.getLetterSpacing();
var align = this.align();
var kerningFunc = this.getKerningFunc();
this.textWidth = size.width;
this.textHeight = size.height;
@ -18044,9 +18053,9 @@
currentT = start + 0.00000001;
} else if (glyphWidth > currLen) {
// Just in case start is 0
currentT += Math.PI / 180.0 * dTheta / Math.abs(dTheta);
currentT += ((Math.PI / 180.0) * dTheta) / Math.abs(dTheta);
} else {
currentT -= Math.PI / 360.0 * dTheta / Math.abs(dTheta);
currentT -= ((Math.PI / 360.0) * dTheta) / Math.abs(dTheta);
}
// Credit for bug fix: @therth https://github.com/ericdrowell/KonvaJS/issues/249
@ -18155,11 +18164,10 @@
var width = Konva.Path.getLineLength(p0.x, p0.y, p1.x, p1.y);
var kern = 0;
if (this.getKerning) {
if (kerningFunc) {
try {
// getKerning is a user provided getter. Make sure it never breaks our logic
kern =
this.getKerning(charArr[i - 1], charArr[i]) * this.fontSize();
kern = kerningFunc(charArr[i - 1], charArr[i]) * this.fontSize();
} catch (e) {
kern = 0;
}
@ -18392,6 +18400,25 @@
* text.textDecoration('underline');
*/
Konva.Factory.addGetterSetter(Konva.TextPath, 'kerningFunc', null);
/**
* get/set kerning function.
* @name kerningFunc
* @method
* @memberof Konva.Text.prototype
* @param {String} kerningFunc
* @returns {String}
* @example
* // get text decoration
* var kerningFunc = text.kerningFunc();
*
* // center text
* text.kerningFunc(function(leftChar, rightChar) {
* return 1;
* });
*/
Konva.Collection.mapMethods(Konva.TextPath);
})();

6
konva.min.js vendored
View File

File diff suppressed because one or more lines are too long

43
src/shapes/TextPath.js
View File

@ -18,6 +18,7 @@
* @param {String} config.text
* @param {String} config.data SVG data string
* @param {Function} config.getKerning a getter for kerning values for the specified characters
* @param {Function} config.kerningFunc a getter for kerning values for the specified characters
* @@shapeParams
* @@nodeParams
* @example
@ -42,7 +43,7 @@
* fontFamily: 'Arial',
* text: 'All the world\'s a stage, and all the men and women merely players.',
* data: 'M10,10 C0,0 10,150 100,100 S300,150 400,50',
* getKerning: function(leftChar, rightChar) {
* kerningFunc: function(leftChar, rightChar) {
* return kerningPairs.hasOwnProperty(leftChar) ? pairs[leftChar][rightChar] || 0 : 0
* }
* });
@ -63,7 +64,6 @@
var that = this;
this.dummyCanvas = Konva.Util.createCanvasElement();
this.dataArray = [];
this.getKerning = config && config.getKerning;
// call super constructor
Konva.Shape.call(this, config);
@ -85,9 +85,17 @@
// update text data for certain attr changes
this.on(
'textChange.konva alignChange.konva letterSpacingChange.konva',
'textChange.konva alignChange.konva letterSpacingChange.konva kerningFuncChange.konva',
that._setTextData
);
if (config && config.getKerning) {
Konva.Util.warn(
'getKerning TextPath API is deprecated. Please use "kerningFunc" instead.'
);
this.setKerningFunc(config.getKerning);
}
that._setTextData();
this.sceneFunc(this._sceneFunc);
this.hitFunc(this._hitFunc);
@ -206,6 +214,7 @@
var size = this._getTextSize(this.attrs.text);
var letterSpacing = this.getLetterSpacing();
var align = this.align();
var kerningFunc = this.getKerningFunc();
this.textWidth = size.width;
this.textHeight = size.height;
@ -337,9 +346,9 @@
currentT = start + 0.00000001;
} else if (glyphWidth > currLen) {
// Just in case start is 0
currentT += Math.PI / 180.0 * dTheta / Math.abs(dTheta);
currentT += ((Math.PI / 180.0) * dTheta) / Math.abs(dTheta);
} else {
currentT -= Math.PI / 360.0 * dTheta / Math.abs(dTheta);
currentT -= ((Math.PI / 360.0) * dTheta) / Math.abs(dTheta);
}
// Credit for bug fix: @therth https://github.com/ericdrowell/KonvaJS/issues/249
@ -448,11 +457,10 @@
var width = Konva.Path.getLineLength(p0.x, p0.y, p1.x, p1.y);
var kern = 0;
if (this.getKerning) {
if (kerningFunc) {
try {
// getKerning is a user provided getter. Make sure it never breaks our logic
kern =
this.getKerning(charArr[i - 1], charArr[i]) * this.fontSize();
kern = kerningFunc(charArr[i - 1], charArr[i]) * this.fontSize();
} catch (e) {
kern = 0;
}
@ -685,5 +693,24 @@
* text.textDecoration('underline');
*/
Konva.Factory.addGetterSetter(Konva.TextPath, 'kerningFunc', null);
/**
* get/set kerning function.
* @name kerningFunc
* @method
* @memberof Konva.Text.prototype
* @param {String} kerningFunc
* @returns {String}
* @example
* // get text decoration
* var kerningFunc = text.kerningFunc();
*
* // center text
* text.kerningFunc(function(leftChar, rightChar) {
* return 1;
* });
*/
Konva.Collection.mapMethods(Konva.TextPath);
})();

30
test/unit/shapes/TextPath-test.js
View File

@ -485,4 +485,34 @@ suite('TextPath', function() {
'should gracefully fallback to unkerned text'
);
});
test('can set kerning after initialization', function() {
var stage = addStage();
// simulate lack of kerning support
stage.getContainer().style.fontKerning = 'none';
var layer = new Konva.Layer();
stage.add(layer);
const kernedText = new Konva.TextPath({
x: 0,
y: 30,
fill: 'black',
text: 'AV',
fontSize: 60,
data: 'M0,0 L200,0'
});
layer.add(kernedText);
layer.draw();
var called = false;
kernedText.kerningFunc(() => {
called = true;
return 1;
});
layer.draw();
assert.equal(called, true);
});
});