1

私が作成しようとしている関数の正しい方向に導くのを手伝ってくれる人を探しています。

特定の角度で木が成長する矢印を作成する必要があります。きれいな外観にするために、7 つの異なる高さと 7 つの異なる画像を作成しました。

基本的に、画像を取得して回転させる方法を知っています

<script type="text/javascript">
var img = $('.image');
if(img.length > 0){
var offset = img.offset();
function mouse(evt){
    var center_x = (offset.left) + (img.width()/2);
    var center_y = (offset.top) + (img.height()/2);
    var mouse_x = evt.pageX; var mouse_y = evt.pageY;
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    var degree = (radians * (180 / Math.PI) * -1) + 90; 
    img.css('-moz-transform', 'rotate('+degree+'deg)');
    img.css('-webkit-transform', 'rotate('+degree+'deg)');
    img.css('-o-transform', 'rotate('+degree+'deg)');
    img.css('-ms-transform', 'rotate('+degree+'deg)');
}
$(document).mousemove(mouse);
}
</script>

しかし、どうすれば矢印を20度、25度、30度などで停止させることができますか?ホバーすることでこれを行います。

また、新しいイメージを停止してロードするだけでなく、ユーザーが送信をクリックすると、データベース内のツリー テーブルにデータが追加されます。基本的に、それは矢印であり、矢印の先端はある程度設定され、新しい画像をロードし、画像の高さを取得します（推測している個々の画像に高さ変数を割り当てる方法が必要ですか？）次に、クエリを実行しますそれをツリーの高さフィールドの下のツリーテーブルに入れます。

ヘルプ、私を始めるためのリンクは大歓迎です。

また、Canvas または SVG でこれを行う方法はありますか? 矢印の画像を矢印として使用する代わりに？よりクリーンな外観に。

4

1 に答える 1

1

を使用してマウスに追従する矢印をレンダリングする方法の例を次に示しますcanvas。 http://jsbin.com/inufoy/edit

矢印の回転を特定のポイントにロックするのは、描画関数でパラメーターをフィルター処理するのと同じくらい簡単です。例えば：

var segs = 7;
var coefficient = Math.PI / segs;
r -= ((r + coefficient) % (coefficient * 2)) - coefficient;

そこから、各画像に回転を割り当て、矢印がツリーの方を向いていることを確認してから、ツリーの画像をロードするだけです。

編集: これは、説明のような静的矢印ベースを持つそのスクリプトの別のバージョンです: http://jsbin.com/inufoy/5/edit

于 2012-05-13T00:40:50.253 に答える