2

Kineticjs はキャンバス サイズと全体のグラフィックスを Retina ディスプレイに自動的に適用するため、ぼやけたピクセル化がなく、すべてがシャープできれいに見えます。しかし、カスタム クリッピング機能を使用しようとすると、問題が発生します。

ここにいくつかのコードがあります

this.layerOne = new Kinetic.Layer();
this.layerTwo = new Kinetic.Layer({
 clipFunc : function(c){
 var ctx = c.getContext();
  ctx.rect(0,0,width,height);
 }
});

layerOne にシェイプを追加すると、2 倍のピクセル アスペクトを考慮して完全にレンダリングされますが、layerTwo に追加された同じシェイプはピクセル アスペクトを無視してレンダリングされるため、2 倍に拡大されません。その結果、clipFunc を使用したレイヤーのシェイプは 2 倍小さくなります。

この問題を解決するにはどうすればよいですか?

PSこれは、私がJS Fiddleで作成した簡単な例です

  • ライト グリーンは背景、ダーク グリーンは 100 ピクセルの正方形で、どちらもクロップされていないレイヤー上にあります。
  • ライト イエローは 100 ピクセルの正方形、ピンクはステージと同じ幅の長方形で、トリミングされたレイヤー上にあります。

通常の画面では、イエローの幅がライト グリーンの幅と等しく、適切にトリミングされていることがわかります。ピンクはクリッピング領域外のため見えません。

Retina ディスプレイでは、イエローがダーク グリーンよりも小さく、ピンクが特に目立ちます。ダーク グリーンとピンクは、クロッピング レクタンジが Retina の寸法を正規化したが、すべてのグラフィックスが縮小されたことを示しています。

スタンダード 非網膜

ピクセル アスペクト = 2 網膜

更新：Galaxy NexusのChromeでも同じ
更新： OS XのSafariではすべてが完璧に見えます！OS X 上の他の主要なブラウザー (FF、O、Chrome) が影響を受けます。

4

2 に答える 2

1

このバグを修正するために、このコメントkinetic-v4.5.5.jsに記載されているようにソースを変更しました

于 2013-08-01T13:39:06.467 に答える