JavaScriptキャンバスライブラリの現状は?[閉まっている]


90

私はHTMLキャンバスライブラリの研究をしていて、この質問に出くわしました。HTMLキャンバスJavaScriptライブラリおよびフレームワークの現在の最新技術は何ですか?それは2010年に尋ねられました。トップの答えは、Fabric.jsでした。もう少し調査を行った後、http: //www.html5canvastutorials.com/に出会いました。速度を上げるために複数のキャンバスを持つことを誇るKineticJsのチュートリアルが特徴です。後でさらに調査を行った結果、速度と機能に関してはCanvasライブラリがいたるところにあるようです。今日のJavaScript Canvasライブラリとフレームワークの現状はどうなっていますか?一番上に出てきましたか?

編集:ライブラリは常に変化しており、新しいライブラリに関するニュースや情報を求めて最近多くの人々がここに来ているので、質問をよりタイムレスに変更しました。


2
絶対に。オプションは次のようになると思います:2d-context-> KineticJS、fabric.js、paper.js、easel.js。3d-context(webgl)-> Three.js
Eric Rowell

1
キャンバスライブラリの比較へのkangaxのリンクを確認できます。ここにdocs.google.com/spreadsheet/…を再投稿
ericbowden

4
ここの質問のほとんどすべてが一般的に閉じられているため、この質問がまだ閉じられていないことに驚いています。回答したいのですが、トピックから外れていると思われるので、怖すぎます(「恐怖」と読みます)。「類似点/トレードオフは何ですか」と質問を言い換えると、2セント追加できます(「答え」を読んでください)
2012年

4
@pukと同じ感じです。さらに、本質的に単なる「オープンエンド」であるものと「建設的ではない」とマークされているものとの間のセマンティックリフトは面白いと思います。それはおおまかに言えば、単一の既約な答えが不可能である質問は、プログラミングの知識の世界で最も人気があり包括的なリポジトリでは考慮に値しないと言うことです。私は彼らが良い「Q + A」に適合しないことを理解していますが、なぜ彼らを「非常に主観的」としてマークしないでください。
マークフォックス

1
私にとっても、主観的であるという理由だけで役立つ質問が絶えず締めくくられることに本当にイライラしているSOを検討しているだけです。だから何!?それは流血の便利なものです。
Iain Duncan 14年

回答:


80

免責事項:私はFabric.jsの作成者です。

Easel.js、Fabric.js、Paper.jsは現時点で最も使用されていると言えます。各リポジトリのGithubウォッチャーの数、Googleグループでのディスカッションの量、Twitterでキャンバスライブラリとして使用されていると聞いた頻度で判断しています。

これらはまた、多かれ少なかれまともなドキュメント、例/デモ、ディスカッショングループ、およびユニットテストを備えたものです(他のほとんどのキャンバスライブラリでのテストの状態はかなり悲しいです)。

また、このさまざまなキャンバスライブラリの比較表も管理しています。ライブラリが更新された時期、そのサイズ、IE <9またはnode.jsのサポートなどを確認できます。


比較では多くの情報が得られますが、他の一部のユーザーが誤ってそれらを編集するため、制限する必要がある公開編集可能です。kineticjsがnodjsをサポートしないので、助けが必要ですか?また、Windowsペイントプログラムのような1つの例を挙げてください(オブジェクトと一緒にオブジェクトの円を描く)
ティルマライムルガン

公開編集
不可

1
とても幸運なことに私はこの投稿を見つけました!Kineticでの作業に使用されていましたが、まだ成熟していません。次にイーゼルを試しましたが、重すぎます。ついにファブリックに移りました、そしてそれは素晴らしいです!
MeLight 2013

@kangax誤解して申し訳ありません。Windowsペイントプログラムのような例を1つ教えていただけますか(オブジェクトと一緒にオブジェクトの円を描く)
Thirumalai murugan

@Thirumalaimuruganここに行きます:jsfiddle.net/fabricjs/nXmTC/1
kangax

66

編集:KineticJSはもはや積極的に維持されていません。

免責事項:私はKineticJSを作成しました

KineticJSは実際にはかなりうまくやっています。ソースコードはGithubで見つけることができます。Githubでは、現時点で2180人がスターを付けています。

数千の同時形状を処理できます。

10,000ドラッグアンドドロップストレステスト:http : //www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

ツールチップ付きの10,000個の形状:http : //www.html5canvastutorials.com/labs/html5-canvas-10000-shape-stress-test-with-kineticjs/

モバイルイベントを含む非常に優れたイベントサポートがあり、100単位のユニットテストのかなり堅固なスイートがあるため、コードベースはかなり堅実に感じられます。

kangax:fabric.jsを使ったPSは素晴らしい仕事です!(もちろん)KineticJS以外に、私のお気に入りの他の2つのライブラリーは、ファブリックと紙です。


7
デモを見てみただけで、パフォーマンスはかなり素晴らしいものになりました。また、単体テストを入手できてうれしいです。複数のレイヤーを作成できるようですね。それはすばらしい。ファブリックでも同じように最適化しますが、選択用と描画用の2つのレイヤーしかなく、内部的にも(ユーザーはこれ以上作成できません)。ライブラリ比較チャートを作成するときに、どういうわけかキネティックを逃しました。それを修正する必要があります:)
kangax

6
更新:KineticJSがgithubに追加さ
Eric Rowell

7
KineticJSとEaselJSの違いは何ですか?いつ何を使うべきですか?
geeky_monster

1
KineticJSはKinetic.Path()形状を経由だけでなくSVGベクトルをサポートしていることを指摘したいと思いますhtml5canvastutorials.com/kineticjs/...
エリック・ローウェル

2
@EricRowell Mate KineticJS、その速度、GSAPとの結婚が大好きですが、FabricJSのようにKineticJSオブジェクトを自由に変換する方法はありますか?:ここで私が言うことをしようとしていますどのようにリンク参照であるfabricjs.com/customization私はその本当に遅いようFabricJsを使用したくない、と様々なユニットテストから明らかにその低いパフォーマンスが。KineticJSでオブジェクトを自由に変換できる方法を見つけることを本当に楽しみにしています。おかげで、プラニー
praneybehl

62

最近の読者のために、2013年1月の時点で、私は次のことを評価しました。

  • キネティック
  • ファブリック
  • 論文
  • イーゼル

「評価」することで、ドキュメントを読むだけではありませんでした。プロトタイプのアプリを作成しました。

コミュニティが最大のようで、それが私の解決策になると思ったので、私はファブリックから始めました。しかし、私は次の理由でファブリックをあきらめました:

  • ドキュメント化されていない奇妙なAPIの不整合が、私の時間の多くを不必要に燃やしました。
  • 一貫性のないポインターイベントのサポート。具体的には、Fabricは「パス」を選択可能で観察可能な真の形状オブジェクトとは見なしません。インタラクティブパスがアプリの主要な要件であるため、これは私のニーズを満たしませんでした。
  • オブジェクトを配置するためにCanvasに翻訳を追加します。私にとって、Fabricは、開発者が何をしているのかを明確にすることなく、この点で賢すぎるようにしています。
  • インタラクティブ機能の動作、サイズ変更、回転の仕組みに関する過度に強い意見。多くの点で、この機能をフレームワークに組み込むのは素晴らしいことですが、私の場合、実装方法に同意できなかったため、本質的に自分で再実装する必要がありました。
  • 疎なドキュメント-メソッドのドキュメントが次の形式である場合の多く: "setX(Y)-set's the X to Y" :-)

私はペーパーを見て、あまり遠くに行かなかった。それは私には過度に鈍いと思われ、あまりにもスツールIMOの間に収まります-Canvasの単純なオブジェクトモデルになるには可視化ライブラリが多すぎますが、D3と競合するための可視化ライブラリは十分ではありません。さらに、ドキュメントは特にアクセスしやすかった。

Flash / ActionScriptのバックグラウンドがあれば、イーゼルはおそらく意味があると思いますが、そうではありません。さらに、それは私の要件に対して過度にゲームに集中しているように見えました。棺の釘は再び文書でした-十分ではなく、非標準形式で提示されました。

したがって、私はKineticを使用することになりました。

  • 本当に豊かで明確なチュートリアルと例
  • API関数は、それらが何と呼ばれるかを実行し、主に推測可能です-より速い生産性、より浅い学習曲線
  • それが何をするか、何をしないかについてはかなり明確です-それは他のいくつかのように豊かではありませんが、それは利点です。それはより少ないことを行いますが、それらはより良いです
  • パスは、他のシェイプと同様に、ファーストクラスのシチズンシェイプであり、私の要件に不可欠でした。

Kineticは決して完璧なものではなく、実際に何が行われているのかを理解するために、ソースコードを深く掘り下げる必要があったことが何度かありました。さらに、SVGの解析とファブリックの出力がありません。


1
この回答をありがとう、私は多くの時間を節約しました。私はキネティックと一緒に行くつもりです、そしてあなたがあなたがすでに言ったことを発見することを望みます。
Bashevis 2013

iPad3およびSamsung Galaxy Tab2で、上記のライブラリ用に提供されているドラッグアンドドロップデモの非科学的なユーザーテストを行いました。KineticJSは、ここでも明確な勝者として出てきており、タッチ位置の応答性と正確さが向上しています。
Quested Aronssonによる

1
私は両方を評価していますが、現時点では、fabricjsはより完全で十分に文書化されているようです。
albanx 2013

9
ジェレミー、FabricでのAPIの不整合についてもっと知りたいです。なるべく直感的にするように心がけているので、変なことがあれば気にかけていきたいと思います。チケットを提出したり、ここで言及したりできますか?1月以降、ドキュメントは改善されていますが、私が望むほど良くはありません。インタラクティブ性について強い意見 —言えることはたくさんあると思いますが、できることはたくさんあります。正確に何が違うと思いましたか?最後に、ポインターイベント —意味がわかりません。パスは確かに実際の形です:fabricjs.com/quadratic-curve
kangax

23

pixijsを強くお勧めします。その高性能キャンバスライブラリ。

Pixi.jsは、シームレスなキャンバスフォールバックを備えた2D webGLレンダラーであり、デスクトップとモバイルの両方のすべての最新ブラウザーで機能します。

http://www.goodboydigital.com/pixi-js-is-out/


3
2014年7月の時点で、これは最高のキャンバスライブラリのようです。4k人がGithubでスターを付け、大企業や代理店で使用されています。Googleのようなpixijs.com/projects
Vennsoh
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.