0

背景として三角形の画像を持つdiv（もちろん長方形です）があります。三角形の内側に円の画像を移動したい。

JQuery UI のドラッグ可能なものを使用することを選択しましたが、ドラッグ可能な画像を三角形内に制限することができませんでした。

配列で包含オプションを使用する必要があると思いましたが、2 つの座標で三角形を定義できません。

次に、このトピックを見つけました:三角形内に制約する

答えはかなり良いですが、正弦曲線を使用しており、使用するパスとして三角形を定義する方法がわかりません。

円の動きを三角形に制限する方法を教えてください。

4

2 に答える 2

0

私の友人の 1 人が、本当にシンプルで素晴らしい解決策を思いつきました。

$( "#circle" ).draggable({
drag: function(e, ui) {

    var width = $('#triangle').width();
    var height = $('#triangle').height();

    var x = ui.position.left + $(this).width() / 2;
    var y = ui.position.top + $(this).height() / 2;

    var difference = Math.abs( x - width / 2 );
    var min_y = height * ( difference / (width / 2) );
    if ( y < min_y ) y = min_y;

    if ( x < 0 ) x = 0;
    if ( y < 0 ) y = 0;
    if ( x > width ) x = width;
    if ( y > height ) y = height;

    ui.position.top = y - $(this).height() / 2;
    ui.position.left = x - $(this).width() / 2;

}
});
于 2013-07-26T07:33:39.087 に答える