From 352f493d0a4db4272947305a84dcc8eeba37afb8 Mon Sep 17 00:00:00 2001 From: Anton Lavrenov Date: Sat, 17 Nov 2018 08:50:31 -0500 Subject: [PATCH] getKerning TextPath API is deprecated. Use "kerningFunc" instead. --- CHANGELOG.md | 4 +++ konva.d.ts | 28 ++++++++++++------- konva.js | 45 ++++++++++++++++++++++++------- konva.min.js | 6 ++--- src/shapes/TextPath.js | 43 +++++++++++++++++++++++------ test/unit/shapes/TextPath-test.js | 30 +++++++++++++++++++++ 6 files changed, 127 insertions(+), 29 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 61d89699..bf60a103 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/konva.d.ts b/konva.d.ts index d650ac19..5e9a4aae 100644 --- a/konva.d.ts +++ b/konva.d.ts @@ -12,9 +12,7 @@ declare namespace Konva { cancelBubble: boolean; } - type HandlerFunc = ( - e: KonvaEventObject - ) => void; + type HandlerFunc = (e: KonvaEventObject) => 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( evtStr: K, - handler: ( - e: KonvaEventObject - ) => void + handler: (e: KonvaEventObject) => 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(selector?: string | ((node: Node) => boolean)): Collection; + find( + selector?: string | ((node: Node) => boolean) + ): Collection; findOne(selector: string | ((node: Node) => boolean)): T; getAllIntersections(pos: Vector2d): Shape[]; hasChildren(): boolean; diff --git a/konva.js b/konva.js index 32258ca6..5a9a63a7 100644 --- a/konva.js +++ b/konva.js @@ -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); })(); diff --git a/konva.min.js b/konva.min.js index 7a1bd299..4a7116e2 100644 --- a/konva.min.js +++ b/konva.min.js @@ -2,14 +2,14 @@ * 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) * * @license */ -!function(){"use strict";var e=Math.PI/180,r={version:"2.5.1",stages:[],idCounter:0,ids:{},names:{},shapes:{},listenClickTap:!1,inDblClickWindow:!1,isBrowser:"undefined"!=typeof window&&("[object Window]"==={}.toString.call(window)||"[object global]"==={}.toString.call(window)),isUnminified:/comment/.test(function(){}),enableTrace:!1,traceArrMax:100,dblClickWindow:400,pixelRatio:void 0,dragDistance:3,angleDeg:!0,showWarnings:!0,Filters:{},isDragging:function(){var t=r.DD;return!!t&&t.isDragging},isDragReady:function(){var t=r.DD;return!!t&&!!t.node},_addId:function(t,e){e&&(this.ids[e]=t)},_removeId:function(t){void 0!==t&&delete this.ids[t]},_addName:function(t,e){e&&(this.names[e]||(this.names[e]=[]),this.names[e].push(t))},_removeName:function(t,e){if(t){var i=this.names[t];if(i){for(var n=0;n>16&255,g:e>>8&255,b:255&e}},getRandomColor:function(){for(var t=(16777215*Math.random()<<0).toString(16);t.length<6;)t="0"+t;return"#"+t},get:function(t,e){return void 0===t?e:t},getRGB:function(t){var e;return t in a?{r:(e=a[t])[0],g:e[1],b:e[2]}:"#"===t[0]?this._hexToRgb(t.substring(1)):"rgb("===t.substr(0,4)?(e=r.exec(t.replace(/ /g,"")),{r:parseInt(e[1],10),g:parseInt(e[2],10),b:parseInt(e[3],10)}):{r:0,g:0,b:0}},colorToRGBA:function(t){return t=t||"black",Konva.Util._namedColorToRBA(t)||Konva.Util._hex3ColorToRGBA(t)||Konva.Util._hex6ColorToRGBA(t)||Konva.Util._rgbColorToRGBA(t)||Konva.Util._rgbaColorToRGBA(t)},_namedColorToRBA:function(t){var e=a[t.toLowerCase()];return e?{r:e[0],g:e[1],b:e[2],a:1}:null},_rgbColorToRGBA:function(t){if(0===t.indexOf("rgb(")){var e=(t=t.match(/rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:1}}},_rgbaColorToRGBA:function(t){if(0===t.indexOf("rgba(")){var e=(t=t.match(/rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:e[3]}}},_hex6ColorToRGBA:function(t){if("#"===t[0]&&7===t.length)return{r:parseInt(t.slice(1,3),16),g:parseInt(t.slice(3,5),16),b:parseInt(t.slice(5,7),16),a:1}},_hex3ColorToRGBA:function(t){if("#"===t[0]&&4===t.length)return{r:parseInt(t[1]+t[1],16),g:parseInt(t[2]+t[2],16),b:parseInt(t[3]+t[3],16),a:1}},_merge:function(t,e){var i=this._clone(e);for(var n in t)this._isObject(t[n])?i[n]=this._merge(t[n],i[n]):i[n]=t[n];return i},trimRight:function(t){return t.replace(/\s+$/,"")},trimLeft:function(t){return t.replace(/^\s+/,"")},haveIntersection:function(t,e){return!(e.x>t.x+t.width||e.x+e.widtht.y+t.height||e.y+e.heighte.length){var o=e;e=t,t=o}for(n=0;n=Konva.traceArrMax&&e.shift()},reset:function(){var t=this.getCanvas().getPixelRatio();this.setTransform(1*t,0,0,1*t,0,0)},getCanvas:function(){return this.canvas},clear:function(t){var e=this.getCanvas();t?this.clearRect(t.x||0,t.y||0,t.width||0,t.height||0):this.clearRect(0,0,e.getWidth()/e.pixelRatio,e.getHeight()/e.pixelRatio)},_applyLineCap:function(t){var e=t.getLineCap();e&&this.setAttr("lineCap",e)},_applyOpacity:function(t){var e=t.getAbsoluteOpacity();1!==e&&this.setAttr("globalAlpha",e)},_applyLineJoin:function(t){var e=t.getLineJoin();e&&this.setAttr("lineJoin",e)},setAttr:function(t,e){this._context[t]=e},arc:function(){var t=arguments;this._context.arc(t[0],t[1],t[2],t[3],t[4],t[5])},beginPath:function(){this._context.beginPath()},bezierCurveTo:function(){var t=arguments;this._context.bezierCurveTo(t[0],t[1],t[2],t[3],t[4],t[5])},clearRect:function(){var t=arguments;this._context.clearRect(t[0],t[1],t[2],t[3])},clip:function(){this._context.clip()},closePath:function(){this._context.closePath()},createImageData:function(){var t=arguments;return 2===t.length?this._context.createImageData(t[0],t[1]):1===t.length?this._context.createImageData(t[0]):void 0},createLinearGradient:function(){var t=arguments;return this._context.createLinearGradient(t[0],t[1],t[2],t[3])},createPattern:function(){var t=arguments;return this._context.createPattern(t[0],t[1])},createRadialGradient:function(){var t=arguments;return this._context.createRadialGradient(t[0],t[1],t[2],t[3],t[4],t[5])},drawImage:function(){var t=arguments,e=this._context;3===t.length?e.drawImage(t[0],t[1],t[2]):5===t.length?e.drawImage(t[0],t[1],t[2],t[3],t[4]):9===t.length&&e.drawImage(t[0],t[1],t[2],t[3],t[4],t[5],t[6],t[7],t[8])},isPointInPath:function(t,e){return this._context.isPointInPath(t,e)},fill:function(){this._context.fill()},fillRect:function(t,e,i,n){this._context.fillRect(t,e,i,n)},strokeRect:function(t,e,i,n){this._context.strokeRect(t,e,i,n)},fillText:function(){var t=arguments;this._context.fillText(t[0],t[1],t[2])},measureText:function(t){return this._context.measureText(t)},getImageData:function(){var t=arguments;return this._context.getImageData(t[0],t[1],t[2],t[3])},lineTo:function(){var t=arguments;this._context.lineTo(t[0],t[1])},moveTo:function(){var t=arguments;this._context.moveTo(t[0],t[1])},rect:function(){var t=arguments;this._context.rect(t[0],t[1],t[2],t[3])},putImageData:function(){var t=arguments;this._context.putImageData(t[0],t[1],t[2])},quadraticCurveTo:function(){var t=arguments;this._context.quadraticCurveTo(t[0],t[1],t[2],t[3])},restore:function(){this._context.restore()},rotate:function(){var t=arguments;this._context.rotate(t[0])},save:function(){this._context.save()},scale:function(){var t=arguments;this._context.scale(t[0],t[1])},setLineDash:function(){var t=arguments,e=this._context;this._context.setLineDash?e.setLineDash(t[0]):"mozDash"in e?e.mozDash=t[0]:"webkitLineDash"in e&&(e.webkitLineDash=t[0])},getLineDash:function(){return this._context.getLineDash()},setTransform:function(){var t=arguments;this._context.setTransform(t[0],t[1],t[2],t[3],t[4],t[5])},stroke:function(){this._context.stroke()},strokeText:function(){var t=arguments;this._context.strokeText(t[0],t[1],t[2])},transform:function(){var t=arguments;this._context.transform(t[0],t[1],t[2],t[3],t[4],t[5])},translate:function(){var t=arguments;this._context.translate(t[0],t[1])},_enableTrace:function(){var t,n,a=this,e=s.length,r=Konva.Util._simplifyArray,i=this.setAttr,o=function(t){var e,i=a[t];a[t]=function(){return n=r(Array.prototype.slice.call(arguments,0)),e=i.apply(a,arguments),a._trace({method:t,args:n}),e}};for(t=0;t>I,0!==C?(C=255/C,F[s]=(l*U>>I)*C,F[s+1]=(c*U>>I)*C,F[s+2]=(d*U>>I)*C):F[s]=F[s+1]=F[s+2]=0,l-=g,c-=f,d-=v,u-=p,g-=O.r,f-=O.g,v-=O.b,p-=O.a,r=h+((r=i+e+1)>I,0>I)*C,F[r+1]=(c*U>>I)*C,F[r+2]=(d*U>>I)*C):F[r]=F[r+1]=F[r+2]=0,l-=g,c-=f,d-=v,u-=p,g-=O.r,f-=O.g,v-=O.b,p-=O.a,r=i+((r=n+G)>16&255,g:e>>8&255,b:255&e}},getRandomColor:function(){for(var t=(16777215*Math.random()<<0).toString(16);t.length<6;)t="0"+t;return"#"+t},get:function(t,e){return void 0===t?e:t},getRGB:function(t){var e;return t in a?{r:(e=a[t])[0],g:e[1],b:e[2]}:"#"===t[0]?this._hexToRgb(t.substring(1)):"rgb("===t.substr(0,4)?(e=r.exec(t.replace(/ /g,"")),{r:parseInt(e[1],10),g:parseInt(e[2],10),b:parseInt(e[3],10)}):{r:0,g:0,b:0}},colorToRGBA:function(t){return t=t||"black",Konva.Util._namedColorToRBA(t)||Konva.Util._hex3ColorToRGBA(t)||Konva.Util._hex6ColorToRGBA(t)||Konva.Util._rgbColorToRGBA(t)||Konva.Util._rgbaColorToRGBA(t)},_namedColorToRBA:function(t){var e=a[t.toLowerCase()];return e?{r:e[0],g:e[1],b:e[2],a:1}:null},_rgbColorToRGBA:function(t){if(0===t.indexOf("rgb(")){var e=(t=t.match(/rgb\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:1}}},_rgbaColorToRGBA:function(t){if(0===t.indexOf("rgba(")){var e=(t=t.match(/rgba\(([^)]+)\)/)[1]).split(/ *, */).map(Number);return{r:e[0],g:e[1],b:e[2],a:e[3]}}},_hex6ColorToRGBA:function(t){if("#"===t[0]&&7===t.length)return{r:parseInt(t.slice(1,3),16),g:parseInt(t.slice(3,5),16),b:parseInt(t.slice(5,7),16),a:1}},_hex3ColorToRGBA:function(t){if("#"===t[0]&&4===t.length)return{r:parseInt(t[1]+t[1],16),g:parseInt(t[2]+t[2],16),b:parseInt(t[3]+t[3],16),a:1}},_merge:function(t,e){var i=this._clone(e);for(var n in t)this._isObject(t[n])?i[n]=this._merge(t[n],i[n]):i[n]=t[n];return i},trimRight:function(t){return t.replace(/\s+$/,"")},trimLeft:function(t){return t.replace(/^\s+/,"")},haveIntersection:function(t,e){return!(e.x>t.x+t.width||e.x+e.widtht.y+t.height||e.y+e.heighte.length){var o=e;e=t,t=o}for(n=0;n=Konva.traceArrMax&&e.shift()},reset:function(){var t=this.getCanvas().getPixelRatio();this.setTransform(1*t,0,0,1*t,0,0)},getCanvas:function(){return this.canvas},clear:function(t){var e=this.getCanvas();t?this.clearRect(t.x||0,t.y||0,t.width||0,t.height||0):this.clearRect(0,0,e.getWidth()/e.pixelRatio,e.getHeight()/e.pixelRatio)},_applyLineCap:function(t){var e=t.getLineCap();e&&this.setAttr("lineCap",e)},_applyOpacity:function(t){var e=t.getAbsoluteOpacity();1!==e&&this.setAttr("globalAlpha",e)},_applyLineJoin:function(t){var e=t.getLineJoin();e&&this.setAttr("lineJoin",e)},setAttr:function(t,e){this._context[t]=e},arc:function(){var t=arguments;this._context.arc(t[0],t[1],t[2],t[3],t[4],t[5])},beginPath:function(){this._context.beginPath()},bezierCurveTo:function(){var t=arguments;this._context.bezierCurveTo(t[0],t[1],t[2],t[3],t[4],t[5])},clearRect:function(){var t=arguments;this._context.clearRect(t[0],t[1],t[2],t[3])},clip:function(){this._context.clip()},closePath:function(){this._context.closePath()},createImageData:function(){var t=arguments;return 2===t.length?this._context.createImageData(t[0],t[1]):1===t.length?this._context.createImageData(t[0]):void 0},createLinearGradient:function(){var t=arguments;return this._context.createLinearGradient(t[0],t[1],t[2],t[3])},createPattern:function(){var t=arguments;return this._context.createPattern(t[0],t[1])},createRadialGradient:function(){var t=arguments;return this._context.createRadialGradient(t[0],t[1],t[2],t[3],t[4],t[5])},drawImage:function(){var t=arguments,e=this._context;3===t.length?e.drawImage(t[0],t[1],t[2]):5===t.length?e.drawImage(t[0],t[1],t[2],t[3],t[4]):9===t.length&&e.drawImage(t[0],t[1],t[2],t[3],t[4],t[5],t[6],t[7],t[8])},isPointInPath:function(t,e){return this._context.isPointInPath(t,e)},fill:function(){this._context.fill()},fillRect:function(t,e,i,n){this._context.fillRect(t,e,i,n)},strokeRect:function(t,e,i,n){this._context.strokeRect(t,e,i,n)},fillText:function(){var t=arguments;this._context.fillText(t[0],t[1],t[2])},measureText:function(t){return this._context.measureText(t)},getImageData:function(){var t=arguments;return this._context.getImageData(t[0],t[1],t[2],t[3])},lineTo:function(){var t=arguments;this._context.lineTo(t[0],t[1])},moveTo:function(){var t=arguments;this._context.moveTo(t[0],t[1])},rect:function(){var t=arguments;this._context.rect(t[0],t[1],t[2],t[3])},putImageData:function(){var t=arguments;this._context.putImageData(t[0],t[1],t[2])},quadraticCurveTo:function(){var t=arguments;this._context.quadraticCurveTo(t[0],t[1],t[2],t[3])},restore:function(){this._context.restore()},rotate:function(){var t=arguments;this._context.rotate(t[0])},save:function(){this._context.save()},scale:function(){var t=arguments;this._context.scale(t[0],t[1])},setLineDash:function(){var t=arguments,e=this._context;this._context.setLineDash?e.setLineDash(t[0]):"mozDash"in e?e.mozDash=t[0]:"webkitLineDash"in e&&(e.webkitLineDash=t[0])},getLineDash:function(){return this._context.getLineDash()},setTransform:function(){var t=arguments;this._context.setTransform(t[0],t[1],t[2],t[3],t[4],t[5])},stroke:function(){this._context.stroke()},strokeText:function(){var t=arguments;this._context.strokeText(t[0],t[1],t[2])},transform:function(){var t=arguments;this._context.transform(t[0],t[1],t[2],t[3],t[4],t[5])},translate:function(){var t=arguments;this._context.translate(t[0],t[1])},_enableTrace:function(){var t,n,a=this,e=s.length,r=Konva.Util._simplifyArray,i=this.setAttr,o=function(t){var e,i=a[t];a[t]=function(){return n=r(Array.prototype.slice.call(arguments,0)),e=i.apply(a,arguments),a._trace({method:t,args:n}),e}};for(t=0;t>I,0!==C?(C=255/C,F[s]=(l*U>>I)*C,F[s+1]=(c*U>>I)*C,F[s+2]=(d*U>>I)*C):F[s]=F[s+1]=F[s+2]=0,l-=g,c-=f,d-=v,u-=p,g-=O.r,f-=O.g,v-=O.b,p-=O.a,r=h+((r=i+e+1)>I,0>I)*C,F[r+1]=(c*U>>I)*C,F[r+2]=(d*U>>I)*C):F[r]=F[r+1]=F[r+2]=0,l-=g,c-=f,d-=v,u-=p,g-=O.r,f-=O.g,v-=O.b,p-=O.a,r=i+((r=n+G)this.duration?this.yoyo?(this._time=this.duration,this.reverse()):this.finish():t<0?this.yoyo?(this._time=0,this.play()):this.reset():(this._time=t,this.update())},getTime:function(){return this._time},setPosition:function(t){this.prevPos=this._pos,this.propFunc(t),this._pos=t},getPosition:function(t){return void 0===t&&(t=this._time),this.func(t,this.begin,this._change,this.duration)},play:function(){this.state=2,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onPlay")},reverse:function(){this.state=3,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onReverse")},seek:function(t){this.pause(),this._time=t,this.update(),this.fire("onSeek")},reset:function(){this.pause(),this._time=0,this.update(),this.fire("onReset")},finish:function(){this.pause(),this._time=this.duration,this.update(),this.fire("onFinish")},update:function(){this.setPosition(this.getPosition(this._time))},onEnterFrame:function(){var t=this.getTimer()-this._startTime;2===this.state?this.setTime(t):3===this.state&&this.setTime(this.duration-t)},pause:function(){this.state=1,this.fire("onPause")},getTimer:function(){return(new Date).getTime()}},Konva.Tween=function(t){var e,i,n=this,a=t.node,r=a._id,o=t.easing||Konva.Easings.Linear,s=!!t.yoyo;e=void 0===t.duration?.3:0===t.duration?.001:t.duration,this.node=a,this._id=c++;var h=a.getLayer()||(a instanceof Konva.Stage?a.getLayers():null);for(i in h||Konva.Util.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."),this.anim=new Konva.Animation(function(){n.tween.onEnterFrame()},h),this.tween=new d(i,function(t){n._tweenFunc(t)},o,0,1,1e3*e,s),this._addListeners(),Konva.Tween.attrs[r]||(Konva.Tween.attrs[r]={}),Konva.Tween.attrs[r][this._id]||(Konva.Tween.attrs[r][this._id]={}),Konva.Tween.tweens[r]||(Konva.Tween.tweens[r]={}),t)void 0===l[i]&&this._addAttr(i,t[i]);this.reset(),this.onFinish=t.onFinish,this.onReset=t.onReset},Konva.Tween.attrs={},Konva.Tween.tweens={},Konva.Tween.prototype={_addAttr:function(t,e){var i,n,a,r,o,s,h,l,c=this.node,d=c._id;if((a=Konva.Tween.tweens[d][t])&&delete Konva.Tween.attrs[d][a][t],i=c.getAttr(t),Konva.Util._isArray(e))if(n=[],o=Math.max(e.length,i.length),"points"===t&&e.length!==i.length&&(e.length>i.length?(h=i,i=Konva.Util._prepareArrayForTween(i,e,c.closed())):(s=e,e=Konva.Util._prepareArrayForTween(e,i,c.closed()))),0===t.indexOf("fill"))for(r=0;r>>1,F=_.slice(0,w+1),T=this._getTextWidth(F)+y;T<=l?(S=w+1,x=F+(v?"…":""),C=T):b=w}if(!x)break;if(f){var P,A=_[x.length];0<(P=(" "===A||"-"===A)&&C<=l?x.length:Math.max(x.lastIndexOf(" "),x.lastIndexOf("-"))+1)&&(S=P,x=x.slice(0,S),C=this._getTextWidth(x))}if(x=Konva.Util.trimRight(x),this._addTextLine(x),i=Math.max(i,C),d+=n,!g||s&&cthis.dataArray[i].pathLength;)t-=this.dataArray[i].pathLength,++i;if(i===n)return{x:(e=this.dataArray[i-1].points.slice(-2))[0],y:e[1]};if(t<.01)return{x:(e=this.dataArray[i].points.slice(0,2))[0],y:e[1]};var a=this.dataArray[i],r=a.points;switch(a.command){case"L":return Konva.Path.getPointOnLine(t,a.start.x,a.start.y,r[0],r[1]);case"C":return Konva.Path.getPointOnCubicBezier(t/a.pathLength,a.start.x,a.start.y,r[0],r[1],r[2],r[3],r[4],r[5]);case"Q":return Konva.Path.getPointOnQuadraticBezier(t/a.pathLength,a.start.x,a.start.y,r[0],r[1],r[2],r[3]);case"A":var o=r[0],s=r[1],h=r[2],l=r[3],c=r[4],d=r[5],u=r[6];return c+=d*t/a.pathLength,Konva.Path.getPointOnEllipticalArc(o,s,h,l,c,u)}return null}},Konva.Util.extend(Konva.Path,Konva.Shape),Konva.Path.getLineLength=function(t,e,i,n){return Math.sqrt((i-t)*(i-t)+(n-e)*(n-e))},Konva.Path.getPointOnLine=function(t,e,i,n,a,r,o){void 0===r&&(r=e),void 0===o&&(o=i);var s=(a-i)/(n-e+1e-8),h=Math.sqrt(t*t/(1+s*s));ne?v=Konva.Path.getPointOnLine(e,f.x,f.y,p.points[0],p.points[1],f.x,f.y):p=void 0;break;case"A":var o=p.points[4],s=p.points[5],h=p.points[4]+s;0===_?_=o+1e-8:ip.pathLength?1e-8:e/p.pathLength:ithis.duration?this.yoyo?(this._time=this.duration,this.reverse()):this.finish():t<0?this.yoyo?(this._time=0,this.play()):this.reset():(this._time=t,this.update())},getTime:function(){return this._time},setPosition:function(t){this.prevPos=this._pos,this.propFunc(t),this._pos=t},getPosition:function(t){return void 0===t&&(t=this._time),this.func(t,this.begin,this._change,this.duration)},play:function(){this.state=2,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onPlay")},reverse:function(){this.state=3,this._time=this.duration-this._time,this._startTime=this.getTimer()-this._time,this.onEnterFrame(),this.fire("onReverse")},seek:function(t){this.pause(),this._time=t,this.update(),this.fire("onSeek")},reset:function(){this.pause(),this._time=0,this.update(),this.fire("onReset")},finish:function(){this.pause(),this._time=this.duration,this.update(),this.fire("onFinish")},update:function(){this.setPosition(this.getPosition(this._time))},onEnterFrame:function(){var t=this.getTimer()-this._startTime;2===this.state?this.setTime(t):3===this.state&&this.setTime(this.duration-t)},pause:function(){this.state=1,this.fire("onPause")},getTimer:function(){return(new Date).getTime()}},Konva.Tween=function(t){var e,i,n=this,a=t.node,r=a._id,o=t.easing||Konva.Easings.Linear,s=!!t.yoyo;e=void 0===t.duration?.3:0===t.duration?.001:t.duration,this.node=a,this._id=c++;var h=a.getLayer()||(a instanceof Konva.Stage?a.getLayers():null);for(i in h||Konva.Util.error("Tween constructor have `node` that is not in a layer. Please add node into layer first."),this.anim=new Konva.Animation(function(){n.tween.onEnterFrame()},h),this.tween=new d(i,function(t){n._tweenFunc(t)},o,0,1,1e3*e,s),this._addListeners(),Konva.Tween.attrs[r]||(Konva.Tween.attrs[r]={}),Konva.Tween.attrs[r][this._id]||(Konva.Tween.attrs[r][this._id]={}),Konva.Tween.tweens[r]||(Konva.Tween.tweens[r]={}),t)void 0===l[i]&&this._addAttr(i,t[i]);this.reset(),this.onFinish=t.onFinish,this.onReset=t.onReset},Konva.Tween.attrs={},Konva.Tween.tweens={},Konva.Tween.prototype={_addAttr:function(t,e){var i,n,a,r,o,s,h,l,c=this.node,d=c._id;if((a=Konva.Tween.tweens[d][t])&&delete Konva.Tween.attrs[d][a][t],i=c.getAttr(t),Konva.Util._isArray(e))if(n=[],o=Math.max(e.length,i.length),"points"===t&&e.length!==i.length&&(e.length>i.length?(h=i,i=Konva.Util._prepareArrayForTween(i,e,c.closed())):(s=e,e=Konva.Util._prepareArrayForTween(e,i,c.closed()))),0===t.indexOf("fill"))for(r=0;r>>1,F=_.slice(0,w+1),T=this._getTextWidth(F)+y;T<=l?(S=w+1,x=F+(v?"…":""),C=T):b=w}if(!x)break;if(f){var P,A=_[x.length];0<(P=(" "===A||"-"===A)&&C<=l?x.length:Math.max(x.lastIndexOf(" "),x.lastIndexOf("-"))+1)&&(S=P,x=x.slice(0,S),C=this._getTextWidth(x))}if(x=Konva.Util.trimRight(x),this._addTextLine(x),i=Math.max(i,C),d+=n,!g||s&&cthis.dataArray[i].pathLength;)t-=this.dataArray[i].pathLength,++i;if(i===n)return{x:(e=this.dataArray[i-1].points.slice(-2))[0],y:e[1]};if(t<.01)return{x:(e=this.dataArray[i].points.slice(0,2))[0],y:e[1]};var a=this.dataArray[i],r=a.points;switch(a.command){case"L":return Konva.Path.getPointOnLine(t,a.start.x,a.start.y,r[0],r[1]);case"C":return Konva.Path.getPointOnCubicBezier(t/a.pathLength,a.start.x,a.start.y,r[0],r[1],r[2],r[3],r[4],r[5]);case"Q":return Konva.Path.getPointOnQuadraticBezier(t/a.pathLength,a.start.x,a.start.y,r[0],r[1],r[2],r[3]);case"A":var o=r[0],s=r[1],h=r[2],l=r[3],c=r[4],d=r[5],u=r[6];return c+=d*t/a.pathLength,Konva.Path.getPointOnEllipticalArc(o,s,h,l,c,u)}return null}},Konva.Util.extend(Konva.Path,Konva.Shape),Konva.Path.getLineLength=function(t,e,i,n){return Math.sqrt((i-t)*(i-t)+(n-e)*(n-e))},Konva.Path.getPointOnLine=function(t,e,i,n,a,r,o){void 0===r&&(r=e),void 0===o&&(o=i);var s=(a-i)/(n-e+1e-8),h=Math.sqrt(t*t/(1+s*s));ne?v=Konva.Path.getPointOnLine(e,f.x,f.y,p.points[0],p.points[1],f.x,f.y):p=void 0;break;case"A":var o=p.points[4],s=p.points[5],h=p.points[4]+s;0===_?_=o+1e-8:ip.pathLength?1e-8:e/p.pathLength:i 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); })(); diff --git a/test/unit/shapes/TextPath-test.js b/test/unit/shapes/TextPath-test.js index fc11bb69..bc79e7c6 100644 --- a/test/unit/shapes/TextPath-test.js +++ b/test/unit/shapes/TextPath-test.js @@ -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); + }); });