1

パラメトリック方程式を使用して画像を円の周りに配置しています (円の円周上の点を計算するにはどうすればよいですか? )

簡単な計算を使用して、これをより少ない方法で行っています。

// x,y position on circumference:
// x = a + r * cos(t)
// y = b + r * sin(t)

.position {
left: @a + ( @r *  cos(@t) );
top: @b + ( @r *  sin(@t) );
}

私が抱えている問題は、これが画像の中心ではなく左上隅に画像を配置するため、高さと幅の視覚的なオフセットを考慮していないことです。各画像の角度が異なるため、高さ/2、幅/2で調整しようとしても機能しません。

このように画像を配置して、x、y を中心にする簡単な方法はありますか?

4

2 に答える 2

0 
.position {
    left: @a + ( @r *  cos(@t) );
    top: @b + ( @r *  sin(@t) );

    margin-left: -@r;
    margin-top: -@r;
}

ただし、計算の代わりに、これを行うこともできます。

top:50%;
left:50%; 
position:absolute; 

margin-left:-@r;
margin-top:-@r;

フィドルのデモ

于 2013-10-28T13:48:03.127 に答える
-1

半幅/高さの減算は機能します

あなたは、角度の基準で円の円周上に画像を配置しようとして、半幅/高さの計算を試みたと述べました(私はあなたの質問を理解しています)。それはうまくいくはずであり、うまくいくようです。これをチェックしてください...

フィドルの例

円と画像の色は視覚的な参照用ですが、画像の配置は次の方法で行います。

以下

//define circle position
@r: 100px;
@x: 175px;
@y: 150px;
.setImage(@w, @h, @a) {
    //@a is angle from HORIZONTAL but moves clockwise 
    //(based on radians unless units are given)
    width: @w;
    height: @h;
    left: (@x + ( @r *  cos(@a) ) - (@w / 2));
    top: (@y + ( @r *  sin(@a) ) - (@h / 2));
}
.test1 {
  .setImage(40px, 40px, -35deg);
}
.test2 {
  .setImage(60px, 30px, -80deg);
}
.test3 {
  .setImage(90px, 20px, -150deg);
}
.test4 {
  .setImage(40px, 70px, -240deg);
}
.test5 {
  .setImage(20px, 90px, -295deg);
}

CSS出力

.test1 {
  width: 40px;
  height: 40px;
  left: 236.9152044288992px;
  top: 72.64235636489539px;
}
.test2 {
  width: 60px;
  height: 30px;
  left: 162.36481776669305px;
  top: 36.5192246987792px;
}
.test3 {
  width: 90px;
  height: 20px;
  left: 43.39745962155612px;
  top: 90px;
}
.test4 {
  width: 40px;
  height: 70px;
  left: 104.99999999999996px;
  top: 201.60254037844385px;
}
.test5 {
  width: 20px;
  height: 90px;
  left: 207.26182617406997px;
  top: 195.630778703665px;
}

回転した画像にも対応

画像を設定するとtransform-origin: center center、画像がある角度で回転していても、画像を中心に保つように機能します。

回転した画像の例 Fiddle を参照してください

于 2013-10-29T15:41:36.700 に答える