2

ユーザーが HTML5 と canvas 要素を使用してシーンを作成できるサイトを作成しています。

私はこれに使用するつもりでしたがKinecticJS、見栄えがします。しかし、私には本当に苦労している問題が1つあります。

印刷用にシーンのはるかに高品質のバージョンをユーザーに提供できるようにしたいので、印刷すると非常にぼやけてしまうため、800x600 ピクセルのキャンバス データだけを提供することはできません。

単に「スケールアップ」してcanvasその出力を保存することを提案するフォーラムを見たことがありますが、これのパフォーマンスコストが心配です。それが私の唯一の希望かもしれませんが。

KinecticJS はグラフ階層を使用してシーンをレンダリングするため、KinecticJS を使用してシーンを作成し、同じシーンを (スケーリングではなく) 再レンダリングし、今回だけ位置を拡大するなどの方法が考えられます。シーン内のオブジェクト。

誰もが前にこのようなことをしたことがありますか? これまでのところ、私はまだ研究段階にあります。

1 つの注意点として、明らかに SVG については知っていますが、より大きなブラウザー サポートが必要であり、IE は IE9 より前に VML を使用しており、SVG/VML シーンを PNG に変換してブラウザー サポートを維持できるかどうかは真剣に疑問です。

4

2 に答える 2

5

単一の「キャプチャ フレーム」のキャンバスを拡大できます。

描画関数またはレンダリング関数があります。それに引数を与え、その引数が真であれば、より大きなコンテキストに引き寄せます。

var canvas, context; //you already have these
var newCanvas, newContext; //I'm making these
var scaleFactor = 2; //How much we scale?
var ctx; //Identify's which context to draw to....

function render(screenShot){
    ctx = context;
    if(screenShot){
        if(!newCanvas){
            newCanvas = document.createCanvas();
            newContext = newCanvas.getContext('2d');
        }
        newCanvas.width = canvas.width * scaleFactor;
        newCanvas.height = canvas.height * scaleFactor;

        ctx = newContext;
        newContext.scale(scaleFactor, scaleFactor); //Now all your previous drawing will autoscale
    }

    /*   all your old draw code goes here, 
    change all your context calls to ctx */

    if(screenShot){
        YourNewHighResSuperCoolSnapShotData = newCanvas.toDataURL("image/png");
    }
}

toDataURL がどのように機能するか、およびそれによって何が得られるかを調べたいと思うかもしれません。

高品質のものが必要な場合にのみ render(true) を呼び出す必要があるため、これは負担になりません。

于 2013-04-22T02:08:26.207 に答える
1

これには別の答えがあります：

function makeBig(firstStage) {
    newStage.setScale(2);
    newStage.add(firstStage.getChildren()[0].clone());
}

これは私にとってはうまくいき、方法がわかれば簡単でした:)

于 2013-05-23T05:23:25.330 に答える