DRAWING APPBUILT WITH SVG+TYPESCRIPT+ANGULARJS~ and, improve SVG rendering performance ~

SVG+TYPESCRIPT+ANGULARJSで作る作図アプリ

そしてSVG描画速度向上のためにしたこと

Agenda今日話すこと

AngulaJSが無いと死ねる、という話をします。

TypeScript が無いと死ねる、という話をします。

SVGの描画速度向上のために行ったことを話します。

さらに時間があれば、過去聞かれた F★ckingな質問について私なりの回答を披露します。

Drawing AppDemo早速、作図アプリをデモ

Drawing AppDemo早速、作図アプリをデモ

AngularJS Demo:Implement Undo/Redo FeatureAngularJS のデモ:"元に戻す"/"やり直す” 機能の実装

AngularJS Demo:Implement Undo/Redo FeatureAngularJS のデモ:"元に戻す"/"やり直す” 機能の実装

SVG rendering performance issueSVG描画速度の問題

How to draw?描画の実装

モデル変更の度にゼロから新たに描画しなおす実装

このアプリでは、変更があった箇所だけDOM修正、は現実的に無理と思う

SVGの DOM APIを使って、DOMを組み立てる

Performance Issue描画の処理速度

実用に耐えない程ではないが、描画要素が増えるにつれてもっさり

特に倍率変更のスライダをドラッグするときによくわかる

ということで対策

ということで対策

Ohotech特盛#142016.10.8 (Sat) 13:30～ 北見市民会館 7号会議室

http://j.mp/ohotech14

~ 当日会場にて、よろしくお願いします! ~

More PowerPoint templates are available at www.PresentationLoad.com