FN1210005 - EaselJSのMatrix2Dクラスを使ったインスタンスの変形 - HTML5 : テクニカルノート
Matrix2Dクラスは、2次元平面の座標を数学の行列により変換します。Matrix2Dクラスの変換行列を使うと、インスタンスに移動や伸縮、回転、傾斜などの変形を組合わせて加えることができます。「EaselJSを使ったインスタンスの傾斜・伸縮・移動」と同じような変形を、今度はMatrix2Dクラスという別の道具で試してみましょう。 01 読込んだ画像の3つの角にハンドルを置く 前出「EaselJSを使ったインスタンスの傾斜・伸縮・移動」のコード001では、画像の右上角に置いたハンドルでインスタンスを傾斜および伸縮させました。本稿ではハンドルを3つに増やして、Matrix2Dクラスによりインスタンスの座標変換を行います(図001)[*1]。 図001■3つのハンドルをドラッグすると画像が変形する まず、PNGファイル(image.png)はHTMLドキュメントと同じ場所のフォルダに(imag
FN1501003 | EaselJS 0.8.0: Matrix2Dクラスの基本的なメソッドと行列演算 | HTML5 : テクニカルノート
EaselJSライブラリのMatrxi2Dクラスによる座標変換は、おもに変換行列の乗算で表されます[*1]。そこで、Matrix2Dクラスの基本的なメソッドについて、その行列演算をご紹介します。
FumioNonaka.com
21年04月トップ5テクニカルノート 01. FN1609006「TypeScript入門 05: get/setアクセサをを使う」 02. Creators MeetUp「ネイピア数 〜美しきムダな数〜」 03. FN1702006「Vue.js入門 03: データから動的にリストをつくる」 04. FN1609004「TypeScript入門 03: クラスを継承して使う」 05. FN1707007「Sass: SCSSの基本的な書き方」 21年04月注目テクニカルノート 09. FN2004001「Create React App + React DnD 02: ドラッグ&ドロップで動かす」 10. FN1009002「力のモーメント」 2021.06.15 FN2106001「TypeScriptハンドブック 06: nullとundefinedなど」 「TypeScriptハン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
