4

フィドルはこちら: http://jsfiddle.net/ZArwT/18/

私は、いくつかのネストされた div を相互にスケーリングする必要があるプロジェクトに取り組んでいます。

親 div が 10 倍に拡大されて回転され、次にその親の子 div が逆回転されて回転が正規化され、次に THAT の子が .1x に拡大されてそのスケールが正規化されます。

すべての画像は高解像度の png です。

Chrome では、ソフトウェアが非常に小さな画像を拡大しようとしたかのように、子画像がひどくピクセル化され、壊れて表示されます。

他のすべてのブラウザー (あえぎ、IE でさえ) では、画像は非常に鮮明でシャープに表示されます (実際の解像度よりも低いサイズで表示されるため、「本来あるべき」)。

上記のフィドルを Firefox、IE、または Safari でチェックすると、明るいパーカーを着た男がシャープでクリアに見えることがわかります。

Chrome のフィドルを見ると、パーカーを着た男がボロボロでピクセル化されているのがわかります。

残念ながら、画面全体をカバーするために比較的小さなサイズから拡大するように設計されているため、最初から最適な最大サイズで画像を作成することはできません。

「image-rendering: -webkit-optimize-contrast;」や「webkit-transform-style: preserve-3d」をさまざまな化身で使用するなど、さまざまなソリューションを調べて試しました。

どんな助けでも大歓迎です。

ありがとう！

HTML:

<div class="frame"></div>

<div class="frameInner">
  <div class="counterRotate"> <!--normalizes coordinates for content so that x and y are really x and y instead of diagonals -->
    <div class="content">
      <img class="guy" src="http://abraxasleads.com/misc/chromeImageSmash/guy.png" />
    </div>
  </div>
</div>

CSS:

.wrapper {
  display: block;
  width: 718px;
  height: 800px;  
}

.frame {
  display: block;
  width: 718px;
  height: 800px;
  background: url('http://abraxasleads.com/misc/chromeImageSmash/frame.png') 0 0 no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.frameInner {
  display: block;
  width: 470px;
  height: 573px;
  overflow: hidden;
  position: absolute;
  top: 114px;
  left: 123px;
  z-index: 1;
}

.counterRotate {
  display: block;
  width: 100%;
  height: 100%;
}

.content {
  display: block;
  width: 1920px;
  height: 1080px;
  background: url('http://abraxasleads.com/misc/chromeImageSmash/content.png');
  position: absolute;
  top: -483px;
  left: -898.5px;
}

.guy {
  display: block;
  position: absolute;
  top: 25%;
  left: 50%;
}

JS:

var frame = $('.frame'),
    frameInner = $('.frameInner'),
    counterRotate = $('.counterRotate'),
    content = $('.content'),
    guy = $('.guy'),
    frameRotation = -45,
    counterRotation = 45;

frame.css({
  "webkitTransform" : 'translate3d(0px, 0px, 0px) rotateZ('+ frameRotation +'deg) scale(10, 10)',
  "msTransform" : 'translate(0px, 0px) scale(10, 10) rotate('+ frameRotation +'deg)',
   "-moz-Transform" : 'translate3d(0px, 0px, 0px) rotateZ('+ frameRotation +'deg) scale(10, 10)'
})

frameInner.css({
  "webkitTransform" : 'translate3d(0px, 0px, 0px) rotateZ('+ frameRotation +'deg) scale(10, 10)',
  "msTransform" : 'translate(0px, 0px) scale(10, 10) rotate('+ frameRotation +'deg) ',
  "-moz-transform" : 'translate3d(0px, 0px, 0px) rotateZ('+ frameRotation +'deg) scale(10, 10)'
})

counterRotate.css({
  "webkitTransform" : 'translate3d(0px, 60px, 0px) rotateZ('+ counterRotation +'deg)',
  "msTransform" : 'translate(0px, 60px) rotate('+ counterRotation +'deg)',
  "-moz-transform" : 'translate3d(0px, 60px, 0px) rotateZ('+ counterRotation +'deg)'
})

guy.css({
   "webkitTransform" : 'translate3d(-120px, -200px, 0px) scale(.1,.1)',
   "msTransform" : 'translate(-120px, -200px) scale(.1,.1)',
   "-moz-transform" : 'translate3d(-120px, -200px, 0px) scale(.1,.1)'
})
4

1 に答える 1

2

画像をスケーリングすると、Webkit は画像をラスタライズし、ピクセル化を引き起こします。これを防ぐには、最初の縮尺を 1 未満 (たとえば 0.1) にしてから、最終的な拡大バージョンの縮尺を 1 にします。このようにして、レンダリング エンジンは画像をフル サイズでレンダリングし、縮小し、拡大縮小すると、あなたが言及したピクセル化は作成されません。

于 2013-01-10T04:41:28.723 に答える