AnimateCC(CreateJS)で文字をキャプチャする

文字をキャプチャして図形とかに変換したいな
って思っても、CreateJS だけではできないようで
どうやら、HTML の Canvas の getImageData() メソッドで、ImageDataオブジェクトを取得すればいいことが分かった
でも、CreateJSとどう連動したらいいの?

文字をキャプチャする

let w:number = Math.floor(this._myDisp.text_txt.getMeasuredWidth() + 4);
let h:number = Math.floor(this._myDisp.text_txt.getMeasuredHeight() + 4);
this._myDisp.text_txt.cache(0, 0, w, h); // 一旦キャッシュ
let canvasElement:HTMLCanvasElement = this._myDisp.text_txt.cacheCanvas; // これでいろいろできる
let context = canvasElement.getContext("2d"); // Contextを取り出す
let imageData:ImageData = context.getImageData(0, 0, w, h); // ImageDataを取り出す
this._myDisp.text_txt.uncache(); // 取り出したからキャッシュクリアしとく

_myDisp は、AnimateCC上に配置してあるシンボル自身です
https://qiita.com/aichime/items/577af749bfa342d6087f
を参照して下さい
text_txt は、シンボル内に配置してあるテキストのシンボル名です

途中の HTMLCanvasElement ってのを媒介すると、HTML の Canvas の機能をいろいろ使えるらしい（掛け渡し?）
cacheCanvasは、DisplayObject Class のプロパティで、同じく DisplayObject Class の cache()メソッドを使うとデータが入ってきます
（cache()しないと cacheCanvas は、nullです）

最後に取り出した imageData の data プロパティに画像データが入ってきます
imageData.data は配列になってて、左上から1ドット毎にRGBAの順に並んでます
[R,G,B,A,R,G,B,A...]になってるらしい

画像データを1ドットずつスキャンしていく

imageData.data 配列のアルファ値のとこを、ある閾値以上で拾ってけば、
文字の図形変換ができそう

let w:number = Math.floor(this._myDisp.text_txt.getMeasuredWidth() + 4);
let h:number = Math.floor(this._myDisp.text_txt.getMeasuredHeight() + 4);
// ... 略

let sh:createjs.Shape = new createjs.Shape(); // Shape生成
this._myDisp.addChild(sh); // Shapeをシンボル内に配置
let g:createjs.Graphics = sh.graphics; // Graphicsを取り出しておく

const RADIUS:number = 1; // 丸の半径
const SC:number = 5; // 図形の大きさ
const LEFT:number = 10;
const TOP:number = 10;
let x:number, y:number;
for(y = 0; y < h; y ++){ // 下にスキャン
	for(x = 0; x < w; x ++){ // 右にスキャン
		let idx:number = (x + y * w) * 4; // 配列内のインデックスを計算
		idx += 3; // alphaチャンネル
		if(imageData.data[idx] > 150){ // アルファ値が150越えのものを丸で描画
			g.beginFill("#ffffff");
			g.drawCircle(x * SC + LEFT, y * SC + TOP, RADIUS);
			g.endFill();
        }
	}
}

これで文字を図形に置き換えることができました

this._myDisp.text_txt にフォントを割り与えればいろいろと楽しめます

まとめ

HTMLCanvasElement を媒介すれば、他の図形ライブラリとかにも渡せると思うので
いろいろできそう

今回はスキャンデータを直接描画してるけど、パーティクルクラスとかにして、アニメーションさせれば、
また表現が広がると思います