タグに「canvas」を持つ
1〜10件目 / 12件
1 2 次へ

　Undo/RedoできるCanvasを作った / magicien　

まーた言ったそばから脇道に逸れているわけ。
HTMLCanvasElement (CanvasRenderingContext2D) に undo/redo機能が欲しいな、と思ったので作りました。
undo-canvas（デモページ１／２）

CanvasRenderingContext2Dのプロパティに片っ端からフックをかますという荒技を使い、変更したプロパティ、呼び出したメソッドを全て記録しています。
副産物として、上書きしたメソッドを prototype で定義されているものに戻す reset-object を別モジュールとして作りました。

使ってみたい人は、scriptタグでundo-canvasを読み込んでください。

<script src="https://cdn.rawgit.com/magicien/undo-canvas/v0.1.2/undo-canvas.js"></script>

ブラウザ向けnpmモジュールを作っている人は、npmコマンドでインストールできます。

npm install --save undo-canvas

jsファイルを読み込むと、グローバル変数として UndoCanvas が定義されるので、

const canvas = document.getElementById('myCanvas')
const context = canvas.getContext('2d')
UndoCanvas.enableUndo(context)

こんな感じで、UndoCanvas.enableUndoにコンテキストを引数として渡してください。contextに undo/redo 関数が追加され、以降、このcanvasに対する操作が記録されていきます。
undo/redoしたくなったら、

context.undo()
context.redo()

で行ったり来たりできます。
undo/redoが必要なくなったら、disableUndoで無効化できます（記録されていた操作履歴は全て消えます）。

UndoCanvas.disableUndo(context)

その他機能はGithubの記載を更新していくので、そちらを参照してください。

undo/redoを実現する仕組みはOracleのようなDBの考え方をぱく参考にしたのですが、思いの外うまくハマったので、気が向いたら解説記事でも書くかもしれません。

さて、今度こそエディタ制作作業に戻ろう...

　canvasでWebフォントを使う / magicien　

canvasでWebフォントを使う方法。

まず、Webフォントを適当な場所にアップロードして、CSSにWebフォントを定義する。

@font-face {
  font-family: 'Expressway';
  src: url('./font/Expressway.woff') format('woff');
}

次に、JavaScriptでCanvasのコンテキストのfontにCSSで定義したfont-family（例ではExpressway）を指定する。Webフォント未対応の場合のために、代替となるフォントファミリー（例ではsans-serif）も指定しておく。

function drawString(context2D) {
  context2D.font = "24px bold Expressway,sans-serif";
  context2D.textAlign = "left";
  context2D.textBaseline = "middle";
  context2D.fillStyle = "#000000"; // black
  context2D.strokeStyle = "#FFFFFF#; // white
  context2D.fillText( "Hello, WebGL!" , 100, 100 );
}

CSSの"format"には、woff（Web Open Font Format）の他に、truetype、svg等が使えるらしい。

　WebGLでの文字描画 / magicien　

WebGLで文字を表示させようとすると、いろいろと面倒なので、そのときに使った方法。

2Dの文字や図形を描画する場合、WebGLでまともに実現しようとすると、canvasのオブジェクトをもう一つ作って、字を描いて、テクスチャに貼付けて、それをレンダリングする、というような流れになるかと思います。
が、わざわざそんなことしなくても、作ったcanvasをそのままHTMLの画面上に貼付けた方が手間がかからないし、描画も早かったので、下のようなコードで3Dのcanvasの上に2Dのcanvasを同じサイズ、位置で重ねて使いました。

function create2DContext(canvas3D) {
  var canvas2D = document.createElement('canvas');
  canvas3D.insert( { after: canvas2D } );
  Element.setStyle( canvas2D, {
    position: 'absolute',
    'z-index': 10
  });
  Position.clone( canvas3D, canvas2D );
  canvas2D.width = canvas3D.width
  canvas2D.height = canvas3D.height

  var context2D = canvas2D.getContext('2d');
  return context2D;
}

prototype.js、scriptaculousを使っているので、ソースはそのまま使えないかもですが...
1つのcanvasで2Dのコンテキストと3Dのコンテキストを両方取得できれば問題無いのですが、一度どちらかのコンテキストを取得してしまうと、もう一方のコンテキストが取得できなくなってしまうため、2D用canvasと3D用canvasの2つが必要になるわけです。

　コード整理中 / magicien　

現在、WebGLアプリの設計見直しとコード整理中。
まだ作りかけですが、クラス図を載せてみます。

　動作テストの動画（２回目） / magicien　

とりあえず、WebGLアプリについて、出来ているところまでで動画にしてアップ。


今後すべきことをメモしておくと、
1. 何故かMinefieldでまともに動作しなくなったため、それを修正
2. ひざのIKの計算を修正
3. ソースコードの整理
ここまで終わったらソースを公開する予定。

スキンウェイトもうまくいっていない気がするので、余裕があれば修正したいです。
他にもやりたいことはいろいろ...時間が足りない！

　動作テストの動画をアップしてみた / magicien　

某動画共有サイトにWebGLアプリの動作テスト動画をアップしてみました。

今まで動画をアップしたことなんてないので、勝手がわからない...

　div版サムネイル生成ver0.2 / magicien　

canvas版サムネイル生成ver0.1を改良。ソースはかなり汚いですが、ver0.3はハイブリット版にする予定なもので、canvas版のソースはそのまま。

画像URL:
サムネイルサイズ
幅：ピクセル

高さ：ピクセル

拡大率：％

出力画像タイプ：
GIF JPEG PNG

　サムネイル生成ver0.1取説 / magicien　

使い方説明。

１．サムネイルを生成したい画像のURLを入力、変更ボタンを押す。（扱える画像は、GIF、JPEG、PNG。ちなみに、ネット上にアップされているファイルしか扱えない）
２．上部の画像が変更されるので、生成したいサムネイルのサイズをテキストフィールドに入力するなり、スライダーを動かすなりして変更する。（元の画像よりも大きいサイズのサムネイルは作れない。サムネイルの意味ないしね。）
３．拡大率を変更したり、上部の画像をドラッグすることで、希望する画像になるよう頑張る。
４．逸る気持ちを抑えつつ、出力画像タイプを選ぶ。
５．サムネイル作成ボタンを祈りを込めて押す。
６．下部にできたてのサムネイルが表示されるので、ドラッグアンドドロップやら右クリックやらでお持ち帰り。

といった具合。ようやくAjaxらしいことができた。まだまだ改善すべき点は多いわけで、いずれバージョンが上がってきたらLGPLか修正BSDで配布してみようかな、と思ったり。

　サムネイル生成ver0.1 / magicien　

作ってみた。奥さん、すごいですよ、これ。
コード量が多いんで、説明はまた今度。

画像URL:
サムネイルサイズ
幅：ピクセル

高さ：ピクセル

拡大率：％

出力画像タイプ：
GIF JPEG PNG

　続sliderとcanvasの練習 / magicien　

前回はSafariしか動かなかったので、今回は他のブラウザでも動くものに。ついでにBezier曲線を使ってみた。

R
G
B
A
T
RGBAで色を変更、Tで変形。Bezier曲線はよくわからず。