18

変換を使用して画像を回転させCSS、周囲の 内で正しく配置されるようにしようとしていますdiv。つまり、画像の左上隅を の左上隅に揃える必要がありdivます。

ここでわかるように(-> をクリック[rotate])、これは機能しません。これを修正する方法はありますか？

(これをオンラインの画像ビューアーで使用するので、回転した画像のオフセットをハードコーディングできないことに注意してください。同様の質問がたくさんありますが、この正確な質問は見つかりませんでした。)

4

6 に答える 6

4

いくつかの jQuery を使用してoffset、親の を​​取得し、それを新しいローテーションから減算し、offsetマージンを使用してコンテナに戻すことができます。すべての回転で動作します。これがフィドルです。

JS:

function rotate(elm, deg) {
    var offsetContLeft, offsetContTop, offsetLeft, offsetTop, newLeft, newTop;
    $(elm).css('transform', 'rotate('+ deg +'deg)');
    // Get the container offset
    offsetContLeft = $(elm).parent().offset().left;
    offsetContTop= $(elm).parent().offset().top;
    // get the new rotated offset
    offsetLeft = $(elm).offset().left;
    offsetTop = $(elm).offset().top;
    // Subtract the two offsets.
    newLeft = offsetContLeft - offsetLeft;
    newTop = offsetContTop - offsetTop;
    // Apply the new offsets to the margin of the element.
    $(elm).css('margin-left', newLeft).css('margin-top', newTop);
}

$("#myrotate").click(function (e) { 
      // pass in the element to rotate and the desired rotation.
      rotate('#myimage', 90);
});
于 2013-08-30T13:09:39.417 に答える
3

これまでの回答から、JavaScript を使用して画像を「再配置」するよりも簡単な方法はないと思います。したがって、私が最終的に使用したアプローチを共有しましょう。

var step = 0;

$("#myrotate").click(
  function (e) { 
    step += 1;
    var img = $("#myimage");
    img.css('transform', 'rotate('+ step*90 +'deg)'); // could be extended to work also in older browsers
    var d = img.width() - img.height();
    img.css('margin-left', -d/2*(step%2));
    img.css('margin-top',   d/2*(step%2));
  }
);

myrotateは、id私<a>がスイッチとして悪用するのmyimageです (推測) のidはimg回転します。

ここで試してみてください。

于 2013-08-30T15:09:00.813 に答える
0

今日私が取り組んだ同様の問題があり、トップコメントは始めるのに大いに役立ちました。

でも、

私のシナリオでは、エクスポート時に生成された pdf に追加される写真をアップロードしています。ユーザーがフロントエンドでそれらを回転させ、回転の値 (つまり、0、90、180、270) を画像自体に保存できるようにします。

ファイルの生成に使用される.ctpファイルには、次の行に沿ったものが含まれていました

echo '<img class="image" src="'.h($imageSrcPath).'" alt="" />';

回転するために、次のようにクラスを作成しました。

img.rotate_0 {
  -webkit-transform: rotate(0deg);
  -webkit-transform-origin: center center;
}

img.rotate_270 {
  -webkit-transform: translateX(-100%) rotate(-90deg);
  -webkit-transform-origin: top right;
}

img.rotate_180 {
  -webkit-transform: rotate(180deg);
  -webkit-transform-origin: center center;
}

img.rotate_90 {
  -webkit-transform: translateX(-100%) rotate(270deg);
  -webkit-transform-origin: top right;
}

.ctpファイルを次のように変更しました

echo '<img class="rotate_'.h($rotation).'" src="' . h($imageSrcPath) . '" alt="" style="margin-top:15px;")/>';

回転の角度が異なるため、わずかに異なる必要がありますtransform-origin

于 2021-09-30T07:52:37.400 に答える
0

@Lost Left Stack の例を取り上げて、すべてのローテーションで機能するように変更し、繰り返します。反復回転のマージンをリセットします。右マージンと下マージンも設定します。

function rotateImage(elm, deg) {
    $(elm).css('margin-left', 0).css('margin-top', 0);
    $(elm).css('transform', 'rotate(' + deg + 'deg)');
    // Get the container offset
    var offsetContLeft = $(elm).parent().offset().left;
    var offsetContTop = $(elm).parent().offset().top;
    // get the new rotated offset
    var offsetLeft = $(elm).offset().left;
    var offsetTop = $(elm).offset().top;
    // Subtract the two offsets.
    var newOffsetX = Math.floor(offsetContLeft - offsetLeft) + 1;
    var newOffsetY = Math.floor(offsetContTop - offsetTop) + 1;
    $("#a").text(newOffsetX + "-" + newOffsetY)
    // Apply the new offsets to the margin of the element.
      $(elm).css('margin-left', newOffsetX).css('margin-top', newOffsetY)
          .css('margin-right', newOffsetX).css('margin-bottom', newOffsetY);
}
var rot = 0;
$("#myrotate").click(function (e) { 
rot += 15;
      rotateImage('#myimage', rot);
});

例: http://jsfiddle.net/v4qa0x5g/2/

于 2019-04-06T01:35:30.823 に答える