2012-01-05 12 views
1

素晴らしいIllustratorプラグインAi->canvasは、任意の複雑なIllustrator画像を<canvas>に描画されたJavascriptコードにエクスポートします。例えば、これは緑色の正方形150X150JavaScript <canvas>スケーリングされた画像を描画

function draw(ctx) { 

    // layer4/Path 
    ctx.save(); 
    ctx.beginPath(); 
    ctx.moveTo(150.0, 150.0); 
    ctx.lineTo(0.0, 150.0); 
    ctx.lineTo(0.0, 0.0); 
    ctx.lineTo(150.0, 0.0); 
    ctx.lineTo(150.0, 150.0); 
    ctx.closePath(); 
    ctx.fillStyle = "rgb(0, 255, 0)"; 
    ctx.fill(); 
    ctx.restore(); 
} 

正方形を描くことは、より良い矩形で行われるので、これは愚かな例であるが、いずれにせよ、複雑な画像のために、これは非常に貴重であるためのコードです。問題はスケーリングです。

縮尺係数を受け入れるには、Ai->キャンバスによるジェネリック描画関数出力をどのように変換できますか?この正方形の例は非常にまっすぐですが、私はキャンバス上に描かれたJavascriptの関数(円弧、円、ベジエ曲線など)に適用されるより一般的なものが必要です。おかげ

+0

私はあなただけで、対応するスケールファクタで数を掛けることができることを疑います。しかし、私はこのプラグインに慣れておらず、生成するより複雑なコードを見ていませんでした。いくつか投稿できますか? –

+0

@SergioTulentsev:円弧やベジエなどの場合、単純な乗算ではなく、三角関数に入るようになります。 –

+0

SVGを_objects_にエクスポートするfabric.jsのようなものを使用してください。一連のコマンドだけではありません。ファブリックは、オブジェクト指向のキャンバス描画を表現することで、オブジェクトを拡大縮小、回転、移動、削除、追加、複製することができ、さらにそれらのすべてをいつでもSVGにエクスポートすることができます。 – kangax

答えて

3

一つの選択肢は、例えば、キャンバスのscale機能を使用することです。:この限定された例から

ctx.scale(xFactor, yFactor); 

More here

関連する問題