6

キャンバス要素のサイズが（スタイルの変更によって）変更されると、キャンバスの描画された画像も拡大縮小したいと思います。キャンバス自体がクリアされるため、高さ/幅を変更することはできません。

  1. 一時的なキャンバス要素を作成する
  2. 現在のキャンバスのイメージをその一時的なキャンバスに描画します
  3. 現在のキャンバスのサイズを変更する
  4. 一時キャンバスの画像を現在のキャンバスに描画しますが、新しいサイズにスケーリングされます

これにより、多少のぼやけが生じます - 何度もサイズ変更すると非常に目立ちます (例: ドラッグしてサイズ変更する場合)。ぼやけずにこれを行うにはどうすればよいですか？

編集:画像のスムージング ( context.webkitImageSmoothingEnabled = false;) をオフにしても問題は解決しません。何度もサイズ変更を行った後、画像が元のように見えなくなるまで、どんどんギザギザに再描画されます。

サイズ変更イベントで呼び出されます:

    var tmpCanvas = null;       

    //Make a temporary canvas
    tmpCanvas = document.createElement( "canvas" );

    //Set its size to be equal
    tmpCanvas.height = originalCanvas.height;
    tmpCanvas.width = originalCanvas.width;

    //Draw our current canvas onto it
    tmpCanvas.getContext( "2d" ).drawImage( originalCanvas, 0, 0 );

    //Set new dimensions
    originalCanvas.width = originalCanvas.offsetWidth;
    originalCanvas.height = originalCanvas.offsetHeight;

    var originalContext = originalCanvas.getContext( "2d" );

    //Set background and colors
    originalContext.fillStyle = "#ffffff";
    originalContext.strokeStyle = "#000000";

    //Set paintbrush
    originalContext.lineWidth = 4;
    originalContext.lineCap = "round";

    //Fill background as white
    originalContext.fillRect( 0, 0, originalCanvas.width, originalCanvas.height );

    //We have a saved signature
    if ( SignatureCanvas.hasSignature === true )
    {
        //Draw it back but scaled (results in blurred image)
        originalContext.drawImage( tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, originalCanvas.width, originalCanvas.height );

        /** 
         * This results in a blurred image as well
         //Draw it back but scaled
         originalContext.scale( originalCanvas.width / tmpCanvas.width, originalCanvas.height / tmpCanvas.height );
         originalContext.drawImage( tmpCanvas, 0, 0, tmpCanvas.width, tmpCanvas.height, 0, 0, tmpCanvas.width, tmpCanvas.height );
         */
    }

ストロークを取得し、それらすべてのポイントを「スケーリング」して再描画する方法はありますか?

4

2 に答える 2

3

元のキャンバスからレンダリングされたイメージを取得する代わりに、実際にイメージを再描画します。つまり、元のキャンバスに対して実行したのと同じロジックを実行しますが、関連するポイントは新しいサイズにスケーリングされます。

可能であれば、代わりに SVG を使用することを検討してください。その性質上、適切にスケーリングします。

編集: 私が考えたもう 1 つのオプションは、単純に巨大なキャンバスを使用して開始することです。特にスムージングをオンにすると、サイズを大きくするよりもサイズを小さくする方が見栄えがよくなる傾向があります。

于 2013-10-09T23:13:43.027 に答える
-2

編集II：元の回答は無関係でしたが、私が行ったコメントは関連性があり、現在それを宣伝して編集して回答にしています...とにかく、私が与えた回答はそれほど素晴らしいものではありませんでした**。

もちろん、ラスター グラフィックスを拡大する場合、つまり、ピクセルのピクセル寸法が小さい画像から、ピクセル寸法が大きい画像を作成すると、ぼやけた画像が得られます。拡大すると、低解像度の画像が高解像度になりますが、高解像度の詳細はありません。

ラスター画像について複数の追加の仮定を行わない限り、そのぼやけを回避する方法はまったくありません。たとえば、表示される唯一のグレーが画像の端にある場合や、コーナーは、結合された曲線の接線間の角度が異なる明らかな変曲点でのみ発生する可能性があります。 100 度以下である必要があります。基本的に、より高い解像度の画像に詳細を「埋める」ことができるように、追加情報を提供する必要があります。ラスターから SVG をリバース エンジニアリングするのとそれほど大きな違いはありません。

そのため、エミュレートしたいのはベクター グラフィックスのスケーリングです。唯一の解決策は、コマンドを保存するか、SVG を描画するか、Stuart Branham が提案したように大きなキャンバスに描画することです。

** 私はもともと、スケーリングされていなくてもdrawImage呼び出すとピクセルが歪むので、実際のピクセル データで作業する方がよいと提案していました。 それが本当なら、私は証拠を見つけることができませんが、それは無関係です.

于 2013-10-10T04:03:04.073 に答える