web-dev-qa-db-ja.com

キャンバスを使用するペイントのようなアプリケーション用のJavascriptライブラリはありますか？

キャンバス要素を使用してペイントのようなWebアプリケーションをすばやく作成するための組み込み機能を備えたJavascriptライブラリはありますか？

EDIT：これまでのところ、キャンバス要素の簡単なアニメーションを可能にするJavascriptライブラリを見つけました Raphael JS - -シンプルなPaintアプリを作成するためのJavascriptチュートリアルがありますが、Paintのようなアプリケーション用の堅牢なライブラリはありません。

編集2：キャンバス要素を使用した見栄えの良いペイントアプリで Javascriptチュートリアル を見つけました。私はまだ他の人が見つけたものを見たいです。

javascriptcanvasdrawing
25
Ivan

processingJS がありますが、これはJavaベース処理のポートであるため、「javaish」処理言語でコードを記述します。しかし、結局のところ、ペイントを作成できます。アプリのように。別のフレームワークは fabricJS で、これもキャンバスでの作業に最適です。

3
Andreas Köberle

ラファエル

RaphaëlはCanvasを使用していません。それをサポートするブラウザーではSVGを使用し、InternetExplorerではVMLを使用します。

SVG

描画専用に設計されたSVGソリューションが必要な場合は、以下をご覧ください。

このデモ を参照してください。

キャンバス

Canvasを使用したいが、 保持モード レンダリングが必要な場合は、以下を参照してください。

更新（2014年2月）

16
rsp

文字通りCanvasはこの正確な目的に適合します： http://literallycanvas.com

「文字通り、Canvasは拡張可能なオープンソース（BSDライセンス）のHTML5描画ウィジェットです... Webページに描画ボードを埋め込むために使用できます。」

7
Steve Landey

Painterroを試すことができます。スクリーンショットの貼り付けと処理、トリミング、プリミティブとテキストの描画、回転、サイズ変更（解像度の変更）、スケーリング、矢印の描画、必要な圧縮レベルでのエクスポートに使用でき、ホットキーをサポートします

ライブデモ

enter image description here

Painterroにはbrowser-scriptバージョンとnpmパッケージ があります=

Vue/ReactなどのSPAと簡単に統合でき、electron/cordovaでうまく機能します

2
Ivan Borshchov

Npmパッケージがあります spainter 。以下のコードスニペットを実行してフルスクリーンに移動します

var p = new Painter(containerPainter);</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/index.css"/>
<div id="containerPainter"></div>

またはwebpack（またはその他のローダー）経由：

npm i spainter lines-logger

あなたのjs：

import Painter from 'spainter';
import 'spainter/index.sass'; // you can impor index.css if you don't have sass, ensure that you copy the fonts from the directory as well to production. Set `$FontelloPath: "../node_modules/spainter/font"`
import {LoggerFactory} from 'lines-logger';
const containerPainter = document.createElement('div');
document.body.appendChild(containerPainter);
const p = new Painter(containerPainter, {logger: new LoggerFactory().getLoggerColor('spainter', 'blue')});

ライブデモ

0
deathangel908

あなたが得る最も近いのは、そのチュートリアルが経験したことを拡張することだと思います。

要件が広いため、「汎用」のペイントのような機能を作成するのは困難です。

0
Bojangles