CSSのピボットを中心に円を描く

私はサイズ変更可能なサークルを作成していて、正常に動作しないときは正常に動作しないため、CSSの中央にピボットを持つサークルを作ることができるかどうか尋ねたかった。私はjQueryを使ってサイズを滑らかにしていますが、円のピボットは中間ではなく、その上にあります。ですから、私がresize関数を呼び出すと、円は通常の代わりに下に向かってサイズが変更されます。CSSのピボットを中心に円を描く

出典

2011-09-17 David Debnar

はい、それが可能です。しかし、あなたのコードを見ることなく、あなたが何をしているのかわからないので、助けが不可能に近いです。または方法。 –

私は基本的なCSSサークルを使用しています - 幅、高さ+ウェブキット/ moz-border-radius ... –

あなたのコードをあなたの質問に集めてください。 – Kyle

円の位置を保持するには、円の位置（実際にdiv）を絶対に設定し、左と上を自分で設定する必要があります。あなたはあなたが左と上をリセットする必要があるすべてのリサイズで。高さの

width:100px; 
height:100px; 
left:50%; 
top:50%; 
margin-left:-50px; 
margin-top:-50px;

量を（移動）あなたの設計に依存しているが、マージンはオールウェイズdiv要素のサイズの半分でなければなりません：あなたはこれを行うことができます何かの中央に円を維持する

円のサイズを変更するには、範囲入力を使用しました。このjQueryコードを実行しました：

$('input[type="range"]').change(function(){ 
    $('#c') 
     .width($(this).val()) 
     .height($(this).val()) 
     .css('border-radius', $(this).val()/2) 
     .css('margin-left', $(this).val()/-2) 
     .css('margin-top', $(this).val()/-2); 
});

このコードをクリーンアップすることはできますが、動作します。例を見て：

http://jsfiddle.net/mohsen/4PHMj/

アップデート：ここで

は、よりクリーンなコードです：http://jsfiddle.net/mohsen/4PHMj/7/

出典

2011-09-17 10:04:56 Mohsen

これでanimate（）を使用する方法はありますか？ – Tom

はい、可能です。私はちょうどボーダー半径を使用して見つけた：あなたの形のサークルを常に作る50％。 http://jsfiddle.net/4PHMj/27/ – Mohsen

これをチェックしてくださいhttp://raphaeljs.com/

それは何ですか？

Raphaëlは、ウェブ上のベクターグラフィックスを使用して作業を簡素化する小さなJavaScriptライブラリです。たとえば、独自のチャートや画像の切り抜きや回転ウィジェットを作成する場合は、このライブラリを使用して単純かつ簡単に達成できます。

出典

2011-09-17 08:22:50

+1非常に便利なライブラリです。 Thx to Raph and you –

CSSのピボットを中心に円を描く

答えて

関連する問題