0

キャンバス コードとしてエクスポートできるオンライン ツールまたはソフトウェアはありますか?

たとえば、いくつかのボックスまたは円をドラッグし、いくつかの色を追加して「エクスポート」をクリックすると、描画がキャンバスとしてエクスポートされますか?

4

4 に答える 4

3

これを行うことができるツールは私が知っているものはありません。しかし、いつでも自分で作ることができます。

必要に応じて -

レコーダー

すべてのアクションを複製したい場合は、レコーダーを使用できます -

利用したいさまざまな方法のラッパーを作成し、形状などをキャンバスにドラッグするときにその手順を記録します。たとえば、既存のオブジェクトを新しい場所に移動するなどの特別なアクションについては、このためのカスタム アクションを作成する必要があります。しかし、原則として、次のようなことができます。

var stack = [];

function myMoveTo(x, y) {
    ctx.moveTo(x, y);
    stack.push({op: 'moveto', x: x, y: y});
}

function myLineTo(x, y) {
    ctx.lineTo(x, y);
    stack.push({op: 'lineto', x: x, y: y});
}

... etc.

これで、stack実行したすべての操作が配列に含まれ、それらを単純に反復処理して、そこから JavaScript コードを生成できます (または SVG、キャンバスを再描画するか、別の言語のスクリプトに変換するなど)。

var code = '  var ctx = canvas.getContext("2d");\n';

for(var i = 0, o; o = stack[i]; i++) {

    /// check what operation this object did
    switch(o.op) {

        case 'moveto':
            code += ' ctx.moveTo(' + o.x + ', ' + o.y + ');\n';
            break;

        case 'lineto':
            code += ' ctx.lineTo(' + o.x + ', ' + o.y + ');\n';
            break;

        ...
    }
}

変数codeには、キャンバスで行った描画を複製するために別のプロジェクトに貼り付けることができる JavaScript コードが含まれています。

コンバータ

すべてのアクションを複製したくない場合は、代わりに、キャンバスの現在の状態の「スナップショット」を取得するコンバーターアプローチを使用できます（これは、あなたが本当に求めていると思われるものです）-

キャンバス上にあるオブジェクト自体を描画して保存するだけです。これらのオブジェクトを作成し、その位置、サイズ、色などを定義する必要があります。

次に、エクスポートを押すと、上記と同様のアプローチを使用してこれらのオブジェクトを変換しますが、アクションの各ステップを複製する代わりに、現在の状態でグラフィカル オブジェクト自体を変換するだけです。

/// object also stored in a stack but represents the graphics not the action
var myObject = {type:'line', x1:10, y1:20, x2:70, y2:100, color:'#f70'};
stack.push(myObject);

そして、あなたが繰り返すとき：

...
case 'line';
    code += 'ctx.beginPath();\n';
    code += 'ctx.moveTo(' + o.x1 + ', ' + o.y1 + ');\n';
    code += 'ctx.lineTo(' + o.x2 + ', ' + o.y2 + ');\n';
    code += 'ctx.strokeStyle = "' + o.color + '";\n';
    code += 'ctx.stroke();\n';
...

画像に変換

単に「イメージとして」という意味であれば、次のようにします。

var dataUri = canvas.toDataURL();

イメージタグのソースとして使用したり、サーバーにアップロードしたりできます。

var img = new Image;
img.src = dataUri;
...
于 2013-10-15T19:08:08.087 に答える
0

古い質問: しかし、いくつかのツールがあります.... これらは特にオンライン ツールです。ソフトウェアについてはわかりませんが、あると確信しています。

codetools.net 提供の情報 ( http://www.codetools.net/online-tools/html5-canvas-generators )

検索対象: HTML5 bezierCurveTo コマンド ジェネレーター

これは、ベジェ パス描画 GUI を介して toBezierTool への呼び出しを生成するツールです。JavaScript/canvas を既に知っていて、単純な非標準の形状を描画したいが、ピクセル値をいじりたくない人を対象としています。

OR: キャンバス デザイナー

本格的な描画面を提供し、さまざまな形式で適切なコードを自動生成することを目的としたツール。Canvas 2D コンテキストを対象としています。つまり、Canvas 2D API 用の組み込み IDE を提供します。

または: パタンタイザー

Patternizer を使用すると、驚くべきものをわずか数分で簡単に作成できます。複雑なパターンを作成する手間が省け、創造性と遊びに集中できます。パターンは保存して誰とでも共有できるので、コラボレーションやリミックスが可能です。また、世界中のどのデバイスからでもアクセスできます。Patternizer は、任意の要素でこれらのパターンを作成するために patternizer.js で使用できるコードを生成します。パターン化パターンは画像を使用せず、1 つの小さなスクリプトのみを必要とします。多くの場合、パターン化ツールは画像ベースのソリューションよりも小さくなります (画像で可能であれば)。

于 2015-01-06T16:06:53.097 に答える
0

キャンバス コードは、基本的には JavaScript で記述された API です。あなたができる最善のことは、コードを関数にバンドルし、ファイルを canvascode.js として保存することです

function foo(context){
   // your canvas code
}

それを html ファイルに含めます...必要なときはいつでも、キャンバス コンテキスト パラメータを渡してこの関数を呼び出すだけです。

于 2013-10-15T14:47:49.467 に答える