0

高解像度の画像があり、kinetic.image の幅と高さの属性を使用して縮小すると、stage.setScale() を使用して拡大すると、元の画像に比べて画像がぼやけていることがわかります。

ステージ上の画像を拡大して元の鮮明さを維持しながら、デフォルトの 1:1 ステージ スケールで元の解像度よりも小さく表示するには、どのようなオプションがありますか?

4

1 に答える 1

2

実際には同じ問題がありますが、キャンバスにcssスタイルを追加して、ブラウザーがスケーリングされた画像をレンダリングする方法のデフォルトの動作をオーバーライドしようとします。これはkineticJSに固有のものではありません

canvas {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

<canvas> をスケーリングするときに補間を無効にします。これは、上記のリンクhttp://jsfiddle.net/VAXrL/21/ から借用したフィドルです。

この質問も参照してくださいHTML5キャンバスで画像をサイズ変更する

于 2013-06-28T00:31:14.687 に答える