ユーザーが操作できるようになるCanvasライブラリ「Fabric.js」 |
HTML5のCanvasに追加された図形などをユーザーが操作可能にする 「Fabric.js」というライブラリを紹介します。 この記事はある程度Canvasの知識がある方を対象に構成しています。 Fabric.jsの特徴 Canvas操作の簡略化やアニメーション機能など基本的な機能以外に、 下記の他ライブラリには見られない機能があります。 Canvasは通常、図形などを描画してしまうとCanvas上の絵として 扱われてしまい、図形としては扱えません。 Fabric.jsを使用すると、Canvasに描画した図形や画像、テキスト (以後オブジェクト)はFabric.jsによって個別に管理され、 ユーザーがハンドルで操作できるようになります。 ※ハンドルとはオブジェクトの周りに表示される、操作点の事です。 オブジェクトの操作について 操作性はMicrosoft Officeの図形操作に近いです。
JavaScriptでシンプルに始めるクリエイティブコーディングその1 - Qiita
クリエイティブコーディングとは アートやデザインなど可視化表現のためのコーディング技法のことです。 巷に存在するコーディング環境としてはWebGLやProcessing, openFrameworksまたはArduino等が挙げられます。 これらは、現在メディアアートを始め、広告やエンターテイメントといった様々な形で人々の目に触れるようになってきています。 この記事で何をやるか かなり原始的なところから始めようと思います。ですので、複数回に渡って、技法を紹介していこうと考えています。 表現を実現するためにHTML5で追加された、2Dのグラフィックスを描く<canvas>要素を利用します。 「円を描いて、それを移動させる」 初回はシンプルで、円の移動のみやります。 円の描画 canvasをつかって円を描画するのは、以下のコードで実現できます。（最初はコピペでも動くように、html全体を記載し
canvg.js·SVGをパースしてCanvas上に描画 MOONGIFT
HTML5になってから新しく出てきたグラフィックス要素にSVGとCanvasがあります。Canvasはバイナリとして生成され、SVGはベクターデータでありその使い分けはできるでしょう。しかし逆にSVGデータをCanvas内に描画したい時もあるはずです。 そこで使ってみたいのがcanvg.jsです。SVGデータをパースし、Canvas内に描画してくれるライブラリです。 canvg.jsの使い方 サンプルです。右側が素のSVG、左側がcanvg.jsによる出力です。 テキスト出力の再現度も高いです。 こんな細かい帳票も再現できます。 カラーリングにも対応。 canvg.jsはさらにオブジェクトを描画したり、アニメーションにも対応しています。SVGをSVGのままだけでなく、Canvasと組み合わせることでゲームに使ったり、編集不可のデータを生成したりするのに使えそうです。 canvg.jsはJa
Fabric.js·Canvasで2Dオブジェクトを自在に描画/操作 MOONGIFT
HTML5の新機能であるCanvasですが、HTMLとは随分使い勝手が違うためになかなか手出ししづらいのではないでしょうか。2D/3Dのどちらも扱えますが、3Dになるとさらに敷居が高くなりますので、まずは2Dから入るのが良さそうです。 Canvas内で2Dオブジェクトを描くのに使えるライブラリがFabric.jsです。Fabric.jsを使ってCanvasを積極的に使ってみましょう。 Fabric.jsの使い方 デモです。様々な描画が行われています。 SVGを描くこともできます。キャッシュ機能を使うと多くのオブジェクトもスムーズに動かせます。 影をつけるデモです。アニメーションもします。 データをJSONで出力できます。 こちらはSVGでの出力結果。 Fabric.jsでは文字や画像の描画、マウスイベント、アニメーション、オブジェクトのグルーピング、マウスによる変形など様々な操作ができるよ
KineticJS から EaselJS にした - rch850 の上澄み
Canvas 使ってごちゃごちゃと描くためにこの間まで KineticJS 使ってたんだけど、ちょっとつまづいた。スマホ向けの canvas だったんだけど、大きな canvas、というか、KineticJS 的には Stage を作ると、canvas をスワイプしてもスクロールしてくれない。素の canvas で試してみたら普通にスクロールする。これは困った。たぶん Stage の draggable 絡みの挙動なんだろうなぁ。 で、こりゃだめだということで EaselJS にチャレンジ。そしたらこっちはちゃんとスクロールしてくれた。それだけじゃなく、KineticJS では無理（面倒？）だった角丸長方形も描画できた。よかった。 概念にそんなに大きな違いはないけれど、違いとして気をつけたい点をいくつか。 KineticJS では Stage -> Layer -> Group -> 各種
[JS]なにこれ楽しい！インタラクション満載の路線図を実装するスクリプト -transitive.js
路線図の入り組んでいるところって、分かりにくいですよね。 そんな問題を解決するCanvasで実装するインタラクション満載の路線図のスクリプトを紹介します。 ↓くっついてて分かりにくい箇所も、こんな感じに移動できます。 デモページ 上のアニメーションgifみたいに移動させることだけでなく、ホイール操作での拡大縮小やドラッグ操作などもできます。 路線図は各要素（駅やルートなど）のテキストファイルを元に、Canvasで描画されています。 各要素のデータ（オレンジのルート）はこんな感じです。 "route": "ORANGE", "from": "12488", "to": "7588", "fromName": "COURTHOUSE METRO STATION", "toName": "METRO CENTER METRO STATION", "routeShortName": "Orange
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
Canvasをめちゃくちゃ使いやすくするライブラリ「UnitaryJS」作った - Qiita
CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5