├── .gitignore ├── site ├── architecture.png └── menu.js ├── examples ├── tracking_test.png ├── CharacterText │ ├── column.html │ ├── percharfont.html │ ├── complete.html │ ├── wordwrap_newline_error.html │ ├── ligatures.html │ ├── child_events.html │ ├── text_change_font.html │ ├── wordwrap_natural_lineheight.html │ ├── loadtest.html │ ├── text.html │ ├── cache.html │ ├── case.html │ ├── wordwrap.html │ ├── perchar.html │ ├── stroke.html │ ├── tracking.html │ ├── input.html │ ├── single_word_oneline.html │ ├── alignment.html │ ├── multiline_align.html │ ├── multiline_align_breaks.html │ ├── single_word_center_align_tracking.html │ └── wordwrap_natural_newline.html ├── Text │ ├── text.html │ ├── wordwrap_newline_error.html │ ├── complete.html │ ├── text_change_font.html │ ├── wordwrap_natural_lineheight.html │ ├── child_events.html │ ├── ligatures.html │ ├── loadtest.html │ ├── cache.html │ ├── wordwrap.html │ ├── case.html │ ├── perchar.html │ ├── stroke.html │ ├── tracking.html │ ├── percharfont.html │ ├── input.html │ ├── single_word_oneline.html │ ├── alignment.html │ ├── multiline_align.html │ ├── multiline_align_breaks.html │ ├── single_word_center_align_tracking.html │ ├── wordwrap_natural_newline.html │ ├── multiline_line_height_smaller_breaks.html │ └── multiline_line_height_smaller.html ├── PathText │ ├── character_limit.html │ ├── text.html │ ├── child_events.html │ ├── cache.html │ ├── flipped.html │ ├── initial.html │ ├── vertical_alignment.html │ ├── circle_last_char.html │ └── accessibility.html └── Graphics │ ├── pathGraphics3.html │ ├── pathGraphics.html │ └── pathGraphics2.html ├── docs └── assets │ └── images │ ├── icons.png │ ├── widgets.png │ ├── icons@2x.png │ └── widgets@2x.png ├── tools └── font_export │ ├── vertical.pyc │ ├── characters.pyc │ ├── convert.pe │ └── README ├── README.md ├── src └── txt │ ├── Info.ts │ ├── Case.ts │ ├── Word.ts │ ├── Line.ts │ ├── Align.ts │ ├── build.d.ts │ ├── Font.ts │ ├── Interfaces.ts │ ├── Glyph.ts │ ├── Accessibility.ts │ └── Character.ts ├── .elasticbeanstalk └── config.yml ├── definitions ├── tweenjs │ └── tweenjs-tests.ts └── easeljs │ └── easeljs-tests.ts ├── package.json ├── LICENSE └── gulpfile.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | npm-debug.log 3 | node_modules 4 | .pyc -------------------------------------------------------------------------------- /site/architecture.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diverted247/txtjs/HEAD/site/architecture.png -------------------------------------------------------------------------------- /examples/tracking_test.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diverted247/txtjs/HEAD/examples/tracking_test.png -------------------------------------------------------------------------------- /docs/assets/images/icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diverted247/txtjs/HEAD/docs/assets/images/icons.png -------------------------------------------------------------------------------- /docs/assets/images/widgets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diverted247/txtjs/HEAD/docs/assets/images/widgets.png -------------------------------------------------------------------------------- /tools/font_export/vertical.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diverted247/txtjs/HEAD/tools/font_export/vertical.pyc -------------------------------------------------------------------------------- /docs/assets/images/icons@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diverted247/txtjs/HEAD/docs/assets/images/icons@2x.png -------------------------------------------------------------------------------- /tools/font_export/characters.pyc: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diverted247/txtjs/HEAD/tools/font_export/characters.pyc -------------------------------------------------------------------------------- /docs/assets/images/widgets@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diverted247/txtjs/HEAD/docs/assets/images/widgets@2x.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | txtjs 2 | === 3 | 4 | A <canvas> font and typesetting engine for @CreateJS. 5 | 6 | Site at . 7 | -------------------------------------------------------------------------------- /tools/font_export/convert.pe: -------------------------------------------------------------------------------- 1 | #!/usr/local/bin/fontforge 2 | i=1 3 | while ( i<$argc ) 4 | Open( $argv[i] ) 5 | Generate( $argv[i]:r + ".svg" ) 6 | i = i+1 7 | endloop -------------------------------------------------------------------------------- /src/txt/Info.ts: -------------------------------------------------------------------------------- 1 | module txt { 2 | export class Info{ 3 | static VERSION:string = "0.8.5"; 4 | static LICENSE:string = "BSD-2-Clause"; 5 | static CONTACT:string = "ted@light.ly"; 6 | } 7 | } -------------------------------------------------------------------------------- /src/txt/Case.ts: -------------------------------------------------------------------------------- 1 | module txt { 2 | 3 | export class Case{ 4 | static NORMAL:number = 0; 5 | static UPPER:number = 1; 6 | static LOWER:number = 2; 7 | static SMALL_CAPS:number = 3; 8 | } 9 | 10 | } -------------------------------------------------------------------------------- /.elasticbeanstalk/config.yml: -------------------------------------------------------------------------------- 1 | branch-defaults: 2 | default: 3 | environment: txtjs-env 4 | master: 5 | environment: txtjs-env 6 | global: 7 | application_name: lightly 8 | default_ec2_keyname: null 9 | default_platform: php 10 | default_region: us-west-2 11 | profile: vu 12 | -------------------------------------------------------------------------------- /definitions/tweenjs/tweenjs-tests.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | var target = new createjs.DisplayObject(); 5 | 6 | // source : http://www.createjs.com/Docs/TweenJS/modules/TweenJS.html 7 | // Chainable modules : 8 | target.alpha = 1; 9 | createjs.Tween.get(target).wait(500, false).to({ alpha: 0, visible: false }, 1000).call(onComplete); 10 | function onComplete() { 11 | //Tween complete 12 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "txtjs", 3 | "version": "0.9.5", 4 | "description": "A font and typesetting engine for @CreateJS", 5 | "author": "Ted Patrick (http://tedpatrick.com)", 6 | "license": "BSD-2-Clause", 7 | "devDependencies": { 8 | "gulp": "^3.8.10", 9 | "gulp-connect": "^2.2.0", 10 | "gulp-rename": "^1.2.0", 11 | "gulp-shell": "^0.2.10", 12 | "gulp-tsc": "^0.9.2", 13 | "gulp-typedoc": "^1.0.6", 14 | "gulp-uglify": "^1.1.0", 15 | "typescript": "^1.4.1" 16 | }, 17 | "repository": "diverted247/txtjs" 18 | } 19 | -------------------------------------------------------------------------------- /src/txt/Word.ts: -------------------------------------------------------------------------------- 1 | module txt { 2 | 3 | export class Word extends createjs.Container { 4 | 5 | hasNewLine:boolean = false; 6 | hasHyphen:boolean = false; 7 | hasSpace:boolean = false; 8 | measuredWidth:number; 9 | measuredHeight:number; 10 | spaceOffset:number = 0; 11 | 12 | constructor(){ 13 | super(); 14 | } 15 | 16 | //txt.CharacterText support 17 | lastCharacter():txt.Character{ 18 | return this.children[ this.children.length - 1 ]; 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /src/txt/Line.ts: -------------------------------------------------------------------------------- 1 | module txt { 2 | 3 | export class Line extends createjs.Container { 4 | 5 | measuredWidth:number; 6 | measuredHeight:number; 7 | 8 | constructor(){ 9 | super(); 10 | 11 | } 12 | 13 | //txt.Text support 14 | lastWord():txt.Word{ 15 | return this.children[ this.children.length - 1 ]; 16 | } 17 | 18 | //txt.CharacterText support 19 | lastCharacter():txt.Character{ 20 | return this.children[ this.children.length - 1 ]; 21 | } 22 | 23 | } 24 | } -------------------------------------------------------------------------------- /tools/font_export/README: -------------------------------------------------------------------------------- 1 | DO NOT STEAL FONTS. 2 | DO NOT EXPORT FONTS WITHOUT A PROPER LICENSE. 3 | 4 | 5 | 1. Install Python, fontforge, and install BeautifulSoup4 6 | 7 | $ pip install beautifulsoup4 8 | 9 | 2. Create the following Directories: font, source_fonts, svg, svgff, web_fonts 10 | 11 | 3. Place TTF or OTF fonts in "source_fonts" directory 12 | 13 | 4. Run: 14 | 15 | $ fontforge -script convert.pe source_fonts/*.ttf 16 | $ fontforge -script convert.pe source_fonts/*.otf 17 | 18 | 5. COPY .SVG Files from source_fonts to "svgff" directory 19 | 20 | 6. Run: 21 | python main.py 22 | 23 | 7. exported fonts are in the 'fonts' directory 24 | -------------------------------------------------------------------------------- /src/txt/Align.ts: -------------------------------------------------------------------------------- 1 | module txt { 2 | export class Align{ 3 | static TOP_LEFT:number = 0; 4 | static TOP_CENTER:number = 1; 5 | static TOP_RIGHT:number = 2; 6 | static MIDDLE_LEFT:number = 3; 7 | static MIDDLE_CENTER:number = 4; 8 | static MIDDLE_RIGHT:number = 5; 9 | static BOTTOM_LEFT:number = 6; 10 | static BOTTOM_CENTER:number = 7; 11 | static BOTTOM_RIGHT:number = 8; 12 | static TL:number = 0; 13 | static TC:number = 1; 14 | static TR:number = 2; 15 | static ML:number = 3; 16 | static MC:number = 4; 17 | static MR:number = 5; 18 | static BL:number = 6; 19 | static BC:number = 7; 20 | static BR:number = 8; 21 | } 22 | 23 | } -------------------------------------------------------------------------------- /src/txt/build.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | /// 4 | 5 | 6 | /// 7 | 8 | /// 9 | /// 10 | /// 11 | /// 12 | /// 13 | /// 14 | /// 15 | /// 16 | /// 17 | /// 18 | /// 19 | /// 20 | /// 21 | /// 22 | /// 23 | -------------------------------------------------------------------------------- /src/txt/Font.ts: -------------------------------------------------------------------------------- 1 | module txt { 2 | 3 | export class Font{ 4 | glyphs:any = {}; 5 | kerning:any = {}; 6 | missing:number; 7 | offset:number; 8 | default:number; 9 | descent:number; 10 | ascent:number; 11 | top:number = 0; 12 | middle:number = 0; 13 | bottom:number = 0; 14 | units:number = 1000; 15 | id:string; 16 | ligatures:any = {}; 17 | panose:string; 18 | alphabetic:string; 19 | loaded:boolean = false; 20 | targets:number[] = []; 21 | loader:XMLHttpRequest; 22 | 23 | cloneGlyph( target:number , from:number ){ 24 | if( this.glyphs[ target ] == undefined && this.glyphs[ from ] != undefined ){ 25 | this.glyphs[ target ] = this.glyphs[ from ]; 26 | this.kerning[ target ] = this.kerning[ from ]; 27 | } 28 | } 29 | } 30 | 31 | } -------------------------------------------------------------------------------- /site/menu.js: -------------------------------------------------------------------------------- 1 | (function (window, document) { 2 | 3 | var layout = document.getElementById('layout'), 4 | menu = document.getElementById('menu'), 5 | menuLink = document.getElementById('menuLink'); 6 | 7 | function toggleClass(element, className) { 8 | var classes = element.className.split(/\s+/), 9 | length = classes.length, 10 | i = 0; 11 | 12 | for(; i < length; i++) { 13 | if (classes[i] === className) { 14 | classes.splice(i, 1); 15 | break; 16 | } 17 | } 18 | // The className is not found 19 | if (length === classes.length) { 20 | classes.push(className); 21 | } 22 | 23 | element.className = classes.join(' '); 24 | } 25 | 26 | menuLink.onclick = function (e) { 27 | var active = 'active'; 28 | 29 | e.preventDefault(); 30 | toggleClass(layout, active); 31 | toggleClass(menu, active); 32 | toggleClass(menuLink, active); 33 | }; 34 | 35 | }(this, this.document)); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015, Lightly LLC 2 | All rights reserved. 3 | 4 | Redistribution and use in source and binary forms, with or without 5 | modification, are permitted provided that the following conditions are met: 6 | 7 | * Redistributions of source code must retain the above copyright notice, this 8 | list of conditions and the following disclaimer. 9 | 10 | * Redistributions in binary form must reproduce the above copyright notice, 11 | this list of conditions and the following disclaimer in the documentation 12 | and/or other materials provided with the distribution. 13 | 14 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" 15 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE 16 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 17 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE 18 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL 19 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR 20 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER 21 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, 22 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 23 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 24 | 25 | -------------------------------------------------------------------------------- /src/txt/Interfaces.ts: -------------------------------------------------------------------------------- 1 | module txt { 2 | 3 | export interface Style { 4 | size:number; 5 | font:string; 6 | tracking:number; 7 | characterCase:number; 8 | fillColor:string; 9 | strokeColor:string; 10 | strokeWidth:number; 11 | } 12 | 13 | export interface ConstructObj { 14 | text:string; 15 | style?:Style[]; 16 | align?:number; 17 | size?:number; 18 | height?:number; 19 | width?:number; 20 | lineHeight?:number; 21 | font?:string; 22 | tracking?:number; 23 | characterCase?:number; 24 | fillColor?:string; 25 | strokeColor?:string; 26 | strokeWidth?:number; 27 | debug?:boolean; 28 | character?:ShapeEvents; 29 | word?:ShapeEvents; 30 | line?:ShapeEvents; 31 | block?:ShapeEvents; 32 | } 33 | 34 | export interface ShapeEvents { 35 | added?:EventCallback; 36 | click?:EventCallback; 37 | dblclick?:EventCallback; 38 | mousedown?:EventCallback; 39 | mouseout?:EventCallback; 40 | mouseover?:EventCallback; 41 | pressmove?:EventCallback; 42 | pressup?:EventCallback; 43 | removed?:EventCallback; 44 | rollout?:EventCallback; 45 | rollover?:EventCallback; 46 | tick?:EventCallback; 47 | } 48 | 49 | export interface WordEvents { 50 | } 51 | 52 | export interface LineEvents { 53 | } 54 | 55 | export interface EventCallback { 56 | ( value:any ):void; 57 | } 58 | 59 | export interface Point { 60 | x:number; 61 | y:number; 62 | } 63 | 64 | } -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require( 'gulp' ); 2 | var ts = require( 'gulp-tsc' ); 3 | var connect = require( 'gulp-connect' ); 4 | var shell = require( 'gulp-shell' ); 5 | var uglify = require('gulp-uglify' ); 6 | var rename = require( 'gulp-rename' ); 7 | var typedoc = require("gulp-typedoc"); 8 | 9 | // 1541 - Claude Garamond was commissioned to create fonts for King Francis I 10 | // of France and established himself as the first type designer. 11 | 12 | gulp.task( 'compile' , function(){ 13 | return gulp.src( [ './src/txt/build.d.ts' ] ) 14 | .pipe( ts( { 15 | target: 'ES5', 16 | out: 'txt.js', 17 | outDir: './dist', 18 | emitError: true, 19 | declaration: true, 20 | removeComments: true 21 | } ) ) 22 | .pipe( gulp.dest( './dist' ) ); 23 | }); 24 | 25 | gulp.task( 'build' , [ 'compile' ] , function() { 26 | gulp.src( ['./dist/txt.js'] ) 27 | .pipe( uglify() ) 28 | .pipe( rename({ suffix: '.min' } ) ) 29 | .pipe( gulp.dest( './dist/' ) ) 30 | }); 31 | 32 | gulp.task( 'server' , [ 'build' ] , function () { 33 | connect.server({ 34 | port: 1541, 35 | livereload: false 36 | }) 37 | }); 38 | 39 | gulp.task( 'browser' , [ 'server' ] , shell.task( [ 40 | /^win/.test( require( 'os' ).platform() ) ? 'start http://localhost:1541/' : 'open http://localhost:1541/' 41 | ] ) ); 42 | 43 | gulp.task("docs", function() { 44 | return gulp 45 | .src(["src/**/*.ts"]) 46 | .pipe(typedoc({ 47 | module: "commonjs", 48 | target: "es5", 49 | out: "docs/", 50 | name: "txtjs" 51 | })) 52 | ; 53 | }); 54 | 55 | gulp.task( 'default' , [ 'browser' ] ); -------------------------------------------------------------------------------- /examples/CharacterText/column.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Column Example 5 | 6 | 7 | 8 | 9 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /examples/Text/text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text Example 5 | 6 | 7 | 8 | 9 | 62 | 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /src/txt/Glyph.ts: -------------------------------------------------------------------------------- 1 | module txt { 2 | 3 | export class Glyph{ 4 | path:string = ""; 5 | offset:number; 6 | kerning:any = {}; 7 | private _graphic:createjs.Graphics = null; 8 | _fill:createjs.Graphics.Fill; 9 | _stroke:createjs.Graphics.Stroke; 10 | _strokeStyle:createjs.Graphics.StrokeStyle; 11 | 12 | graphic(){ 13 | if( this._graphic == null ){ 14 | this._graphic = new createjs.Graphics(); 15 | 16 | //append fill/stroke/stokeStyle 17 | //Character instances populate properties before draw 18 | this._stroke = new createjs.Graphics.Stroke( null , true ); 19 | 20 | this._strokeStyle = new createjs.Graphics.StrokeStyle( 0 ); 21 | 22 | this._fill = new createjs.Graphics.Fill( null ); 23 | 24 | //convert SVG to drawing paths 25 | this._graphic.decodeSVGPath( this.path ); 26 | 27 | this._graphic.append( this._fill ); 28 | this._graphic.append( this._strokeStyle ); 29 | this._graphic.append( this._stroke ); 30 | 31 | } 32 | return this._graphic; 33 | } 34 | 35 | draw( ctx:CanvasRenderingContext2D ):boolean { 36 | this._graphic.draw( ctx ); 37 | return true; 38 | } 39 | 40 | getKerning( characterCode:number , size:number ){ 41 | var out = -( this.kerning[ characterCode ] * size ); 42 | if( isNaN( out ) ){ 43 | return 0; 44 | } 45 | if( isNaN( characterCode ) ){ 46 | return 0; 47 | } 48 | if( isNaN( size ) ){ 49 | return 0; 50 | } 51 | if( this.kerning[ characterCode ] != undefined ){ 52 | return out; 53 | } 54 | return 0; 55 | } 56 | 57 | } 58 | } -------------------------------------------------------------------------------- /examples/CharacterText/percharfont.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Per Character Styling Example 5 | 6 | 7 | 8 | 9 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /examples/CharacterText/complete.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text Example 5 | 6 | 7 | 8 | 9 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /examples/Text/wordwrap_newline_error.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text Example 5 | 6 | 7 | 8 | 9 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /examples/Text/complete.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text Example 5 | 6 | 7 | 8 | 9 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /examples/CharacterText/wordwrap_newline_error.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text Example 5 | 6 | 7 | 8 | 9 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/txt/Accessibility.ts: -------------------------------------------------------------------------------- 1 | module txt { 2 | 3 | export class Accessibility{ 4 | 5 | static data:any = []; 6 | 7 | static timeout:any = null; 8 | 9 | static set( element:any ){ 10 | //if an element is not on canvas, do not place into accessibility api 11 | if( element.stage == null ){ 12 | return; 13 | } 14 | //clear timeout if exists 15 | if( txt.Accessibility.timeout != null ){ 16 | clearTimeout( txt.Accessibility.timeout ); 17 | } 18 | // add to accessibility elements 19 | if( element.accessibilityId == null ){ 20 | txt.Accessibility.data.push( element ); 21 | element.accessibilityId = txt.Accessibility.data.length - 1; 22 | } 23 | txt.Accessibility.timeout = setTimeout( txt.Accessibility.update , 300 ); 24 | 25 | } 26 | 27 | static update(){ 28 | txt.Accessibility.timeout = null; 29 | var data = txt.Accessibility.data.slice( 0 ) 30 | data.sort( function(a,b){ return a.accessibilityPriority - b.accessibilityPriority } ); 31 | var len = data.length; 32 | var out = ""; 33 | var currentCanvas = data[0].stage.canvas; 34 | for( var i = 0; i < len; i++ ){ 35 | if( data[i].stage == null ){ 36 | continue; 37 | } 38 | if( currentCanvas != data[i].stage.canvas ){ 39 | currentCanvas.innerHTML = out; 40 | out = ""; 41 | currentCanvas = data[i].stage.canvas; 42 | } 43 | if( data[i].accessibilityText == null ){ 44 | out += '

' + data[i].text + '

'; 45 | }else{ 46 | out += data[i].accessibilityText; 47 | } 48 | } 49 | currentCanvas.innerHTML = out; 50 | } 51 | 52 | static clear(){ 53 | txt.Accessibility.data = []; 54 | } 55 | 56 | } 57 | 58 | } -------------------------------------------------------------------------------- /examples/CharacterText/ligatures.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Ligatures Example 5 | 6 | 7 | 8 | 9 | 64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /examples/CharacterText/child_events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text Example 5 | 6 | 7 | 8 | 9 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /examples/Text/text_change_font.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text Example 5 | 6 | 7 | 8 | 9 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /examples/Text/wordwrap_natural_lineheight.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Alignment Wordwrap Natural and LineHeight 5 | 6 | 7 | 8 | 9 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /examples/CharacterText/text_change_font.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text Example 5 | 6 | 7 | 8 | 9 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /examples/Text/child_events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text Example 5 | 6 | 7 | 8 | 9 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /examples/CharacterText/wordwrap_natural_lineheight.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: CharacterText + Alignment Wordwrap Natural and LineHeight 5 | 6 | 7 | 8 | 9 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /examples/Text/ligatures.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Ligatures Example 5 | 6 | 7 | 8 | 9 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /definitions/easeljs/easeljs-tests.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | var stage: any; 4 | var myContext2D: any; 5 | 6 | function test_simple() { 7 | var canvas = document.getElementById('canvas'); 8 | var stage = new createjs.Stage(canvas); 9 | var shape = new createjs.Shape(); 10 | shape.graphics.beginFill('rgba(255,0,0,1)').drawRoundRect(0, 0, 120, 120, 10); 11 | stage.addChild(shape); 12 | stage.update(); 13 | } 14 | 15 | function test_animation() { 16 | var ss = new createjs.SpriteSheet({ 17 | "frames": { 18 | "width": 200, 19 | "numFrames": 64, 20 | "regX": 2, 21 | "regY": 2, 22 | "height": 361 23 | }, 24 | "animations": { "jump": [26, 63], "run": [0, 25] }, 25 | "images": ["./assets/runningGrant.png"] 26 | }); 27 | 28 | ss.getAnimation("run").speed = 2; 29 | ss.getAnimation("run").next = "jump"; 30 | ss.getAnimation("jump").next = "run"; 31 | 32 | var sprite = new createjs.Sprite(ss); 33 | sprite.scaleY = sprite.scaleX = .4; 34 | 35 | sprite.gotoAndPlay("run"); 36 | 37 | createjs.Ticker.setFPS(60); 38 | createjs.Ticker.addEventListener('tick', stage); 39 | stage.addChild(sprite); 40 | } 41 | 42 | function test_graphics() { 43 | var g = new createjs.Graphics(); 44 | g.setStrokeStyle(1); 45 | g.beginStroke(createjs.Graphics.getRGB(0, 0, 0)); 46 | g.beginFill(createjs.Graphics.getRGB(255, 0, 0)); 47 | g.drawCircle(0, 0, 3); 48 | var s = new createjs.Shape(g); 49 | s.x = 100; 50 | s.y = 100; 51 | stage.addChild(s); 52 | stage.update(); 53 | 54 | var myGraphics: createjs.Graphics; 55 | myGraphics.beginStroke("#F00").beginFill("#00F").drawRect(20, 20, 100, 50).draw(myContext2D); 56 | } 57 | 58 | function colorMatrixTest() { 59 | var shape = new createjs.Shape().set({ x: 100, y: 100 }); 60 | shape.graphics.beginFill("#ff0000").drawCircle(0, 0, 50); 61 | 62 | var matrix = new createjs.ColorMatrix().adjustHue(180).adjustSaturation(100); 63 | shape.filters = [ 64 | new createjs.ColorMatrixFilter(matrix) 65 | ]; 66 | 67 | shape.cache(-50, -50, 100, 100); 68 | } -------------------------------------------------------------------------------- /examples/Text/loadtest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Loadtest Example 5 | 6 | 7 | 8 | 9 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /examples/Text/cache.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text Example 5 | 6 | 7 | 8 | 9 | 71 | 72 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /examples/CharacterText/loadtest.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Loadtest Example 5 | 6 | 7 | 8 | 9 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /examples/PathText/character_limit.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: PathText Example 5 | 6 | 7 | 8 | 9 | 10 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /examples/CharacterText/text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text Example 5 | 6 | 7 | 8 | 9 | 79 | 80 | 81 | 82 | 83 | -------------------------------------------------------------------------------- /examples/PathText/text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: PathText Example 5 | 6 | 7 | 8 | 9 | 10 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /examples/PathText/child_events.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: PathText Example 5 | 6 | 7 | 8 | 9 | 10 | 68 | 69 | 70 | 71 | 72 | -------------------------------------------------------------------------------- /examples/PathText/cache.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: PathText Example 5 | 6 | 7 | 8 | 9 | 10 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /examples/CharacterText/cache.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text Example 5 | 6 | 7 | 8 | 9 | 88 | 89 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /examples/Text/wordwrap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + WordWrap Example 5 | 6 | 7 | 8 | 9 | 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /examples/Text/case.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Case Example 5 | 6 | 7 | 8 | 9 | 95 | 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /examples/Graphics/pathGraphics3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: graphics.svgPath() 5 | 6 | 7 | 8 | 9 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /examples/CharacterText/case.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Case Example 5 | 6 | 7 | 8 | 9 | 95 | 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /examples/Text/perchar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Per Character Styling Example 5 | 6 | 7 | 8 | 9 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /examples/PathText/flipped.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: PathText Example 5 | 6 | 7 | 8 | 9 | 10 | 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /examples/CharacterText/wordwrap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + WordWrap Example 5 | 6 | 7 | 8 | 9 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /examples/PathText/initial.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: PathText Example 5 | 6 | 7 | 8 | 9 | 10 | 94 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /examples/CharacterText/perchar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Per Character Styling Example 5 | 6 | 7 | 8 | 9 | 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /examples/Text/stroke.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Stroke Example 5 | 6 | 7 | 8 | 9 | 89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /examples/PathText/vertical_alignment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: PathText Example 5 | 6 | 7 | 8 | 9 | 10 | 95 | 96 | 97 | 98 | 99 | -------------------------------------------------------------------------------- /examples/CharacterText/stroke.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Stroke Example 5 | 6 | 7 | 8 | 9 | 89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /examples/PathText/circle_last_char.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: PathText Example 5 | 6 | 7 | 8 | 9 | 10 | 87 | 88 | 89 | 90 | 91 | -------------------------------------------------------------------------------- /examples/Text/tracking.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Tracking Example 5 | 6 | 7 | 8 | 9 | 107 | 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /examples/Text/percharfont.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Per Character Styling Example 5 | 6 | 7 | 8 | 9 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /examples/CharacterText/tracking.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Tracking Example 5 | 6 | 7 | 8 | 9 | 107 | 108 | 109 | 110 | 111 | -------------------------------------------------------------------------------- /examples/PathText/accessibility.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: PathText Example 5 | 6 | 7 | 8 | 9 | 10 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /examples/Graphics/pathGraphics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: graphics.svgPath() 5 | 6 | 7 | 8 | 9 | 93 | 94 | 95 | 96 | 97 | -------------------------------------------------------------------------------- /examples/Graphics/pathGraphics2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: graphics.svgPath() 5 | 6 | 7 | 8 | 9 | 96 | 97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /examples/Text/input.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Input Example 5 | 6 | 7 | 8 | 9 | 16 | 141 | 142 | 143 | 144 |
145 | 146 | -------------------------------------------------------------------------------- /examples/CharacterText/input.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Input Example 5 | 6 | 7 | 8 | 9 | 16 | 141 | 142 | 143 | 144 |
145 | 146 | -------------------------------------------------------------------------------- /src/txt/Character.ts: -------------------------------------------------------------------------------- 1 | module txt { 2 | 3 | export class Character extends createjs.Shape { 4 | 5 | character:string = ''; 6 | characterCode:number = null; 7 | font:string = null; 8 | tracking:number = null; 9 | characterCase:number = null; 10 | characterCaseOffset:number = 0; 11 | index:number = null; 12 | size:number = null; 13 | fillColor:string = null; 14 | strokeColor:string = null; 15 | strokeWidth:number = null; 16 | measuredWidth:number = null; 17 | measuredHeight:number = null; 18 | hPosition:number = null; 19 | missing:boolean = false; 20 | 21 | _glyph:txt.Glyph; 22 | _font:txt.Font; 23 | 24 | 25 | constructor( character:string , style:{} , index:number=null , glyph:txt.Glyph=null ){ 26 | super(); 27 | this.set( style ); 28 | this.index = index; 29 | 30 | // flip case depending on characterCase property 31 | if( this.characterCase == txt.Case.NORMAL ){ 32 | this.character = character; 33 | }else if( this.characterCase == txt.Case.UPPER ){ 34 | this.character = character.toUpperCase(); 35 | }else if( this.characterCase == txt.Case.LOWER ){ 36 | this.character = character.toLowerCase(); 37 | }else if( this.characterCase == txt.Case.SMALL_CAPS ){ 38 | this.character = character.toUpperCase(); 39 | var upperSmall = !( character === this.character ); 40 | }else{ 41 | //fallback case for unknown. 42 | this.character = character; 43 | } 44 | this.characterCode = this.character.charCodeAt( 0 ); 45 | 46 | 47 | 48 | this._font = txt.FontLoader.getFont( this.font ); 49 | 50 | if( this._font.glyphs[ this.characterCode ] ){ 51 | this._glyph = this._font.glyphs[ this.characterCode ]; 52 | 53 | //flip lower 54 | }else if( this._font.glyphs[ String.fromCharCode( this.characterCode ).toLowerCase().charCodeAt( 0 ) ] ){ 55 | this._glyph = this._font.glyphs[ String.fromCharCode( this.characterCode ).toLowerCase().charCodeAt( 0 ) ]; 56 | 57 | //flip upper 58 | }else if( this._font.glyphs[ String.fromCharCode( this.characterCode ).toUpperCase().charCodeAt( 0 ) ] ){ 59 | this._glyph = this._font.glyphs[ String.fromCharCode( this.characterCode ).toUpperCase().charCodeAt( 0 ) ]; 60 | } 61 | 62 | //missing glyph 63 | if( this._glyph === undefined ){ 64 | console.log( "MISSING GLYPH:" + this.character ); 65 | this._glyph = this._font.glyphs[ 42 ]; 66 | this.missing = true; 67 | } 68 | this.graphics = this._glyph.graphic(); 69 | 70 | if( this.characterCase === txt.Case.SMALL_CAPS ){ 71 | if( upperSmall ){ 72 | this.scaleX = this.size / this._font.units * 0.8; 73 | this.characterCaseOffset = -0.2 * ( this._glyph.offset * this.size ); 74 | }else{ 75 | this.scaleX = this.size / this._font.units; 76 | } 77 | }else{ 78 | this.scaleX = this.size / this._font.units; 79 | } 80 | 81 | this.scaleY = -this.scaleX; 82 | 83 | this.measuredHeight = ( this._font.ascent - this._font.descent ) * this.scaleX; 84 | this.measuredWidth = this.scaleX * this._glyph.offset * this._font.units; 85 | 86 | var ha = new createjs.Shape(); 87 | ha.graphics.beginFill( '#000' ).drawRect( 0 , this._font.descent , this._glyph.offset * this._font.units , this._font.ascent - this._font.descent ); 88 | this.hitArea = ha; 89 | 90 | } 91 | 92 | setGlyph( glyph:txt.Glyph ){ 93 | this._glyph = glyph; 94 | this.graphics = this._glyph.graphic(); 95 | } 96 | 97 | trackingOffset():number { 98 | return this.size * ( 2.5 / this._font.units + 1 / 900 + this.tracking / 990 ); 99 | } 100 | 101 | draw( ctx:CanvasRenderingContext2D ):boolean { 102 | this._glyph._fill.style = this.fillColor; 103 | this._glyph._fill.matrix = null; 104 | this._glyph._stroke.style = this.strokeColor; 105 | this._glyph._strokeStyle.width = this.strokeWidth; 106 | return this._glyph.draw( ctx ); 107 | } 108 | 109 | getWidth(){ 110 | return this.size * this._glyph.offset; 111 | } 112 | 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /examples/Text/single_word_oneline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Single Word Example 5 | 6 | 7 | 8 | 9 | 175 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /examples/CharacterText/single_word_oneline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: CharacterText + Single Word Example 5 | 6 | 7 | 8 | 9 | 175 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /examples/Text/alignment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Alignment Example 5 | 6 | 7 | 8 | 9 | 163 | 164 | 165 | 166 | 167 | -------------------------------------------------------------------------------- /examples/CharacterText/alignment.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Alignment Example 5 | 6 | 7 | 8 | 9 | 163 | 164 | 165 | 166 | 167 | -------------------------------------------------------------------------------- /examples/Text/multiline_align.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + MultiLine Alignment Example 5 | 6 | 7 | 8 | 9 | 175 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /examples/Text/multiline_align_breaks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + MultiLine Breaks Alignment Example 5 | 6 | 7 | 8 | 9 | 175 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /examples/CharacterText/multiline_align.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + MultiLine Alignment Example 5 | 6 | 7 | 8 | 9 | 175 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /examples/CharacterText/multiline_align_breaks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + MultiLine Breaks Alignment Example 5 | 6 | 7 | 8 | 9 | 175 | 176 | 177 | 178 | 179 | -------------------------------------------------------------------------------- /examples/Text/single_word_center_align_tracking.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + Single Word Center Align Example 5 | 6 | 7 | 8 | 9 | 184 | 185 | 186 | 187 | 188 | -------------------------------------------------------------------------------- /examples/Text/wordwrap_natural_newline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + MultiLine Alignment Example 5 | 6 | 7 | 8 | 9 | 184 | 185 | 186 | 187 | 188 | -------------------------------------------------------------------------------- /examples/CharacterText/single_word_center_align_tracking.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: CharacterText + Single Word Center Align Example 5 | 6 | 7 | 8 | 9 | 184 | 185 | 186 | 187 | 188 | -------------------------------------------------------------------------------- /examples/CharacterText/wordwrap_natural_newline.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: CharacterText + Wordwrap Nature and Newline Example 5 | 6 | 7 | 8 | 9 | 184 | 185 | 186 | 187 | 188 | -------------------------------------------------------------------------------- /examples/Text/multiline_line_height_smaller_breaks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + MultiLine Alignment Example 5 | 6 | 7 | 8 | 9 | 184 | 185 | 186 | 187 | 188 | -------------------------------------------------------------------------------- /examples/Text/multiline_line_height_smaller.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | txt: Text + MultiLine Alignment Example 5 | 6 | 7 | 8 | 9 | 184 | 185 | 186 | 187 | 188 | --------------------------------------------------------------------------------