1

実際の円弧の描画については、このjsFiddleの投稿を参照してください。以前の質問を修正してくれたSimon Sarrisに感謝します。

KineticJSプラグインを使用して形状を作成し、イベント ハンドラーを利用しています。円弧のどこかをクリックし、円弧がクリックした場所 ( x、y) を知っていると仮定すると、これら 2 つの座標を使用してパーセンテージを決定するにはどうすればよいでしょうか?

任意の場所をクリックすると、合計パーセンテージは常に 100% になります。

加える

これをより簡単にするために、( x, y) オブジェクトを仮想的に曲げてx0 から最大にするにはどうすればよいxでしょうか?

4

3 に答える 3

2

シンプルな三角法。sin(angle) = opposite / adjacent. oppositeはy値でadjacentあり、x値です。したがってMath.asin((xx - x) / (yy - y))、xx と yy は円弧の中心の座標です。これで角度が得られ、それで割ることができます2 * Math.PI。

頭のてっぺんから、負の数で何が起こるか思い出せません。引数の値を取得してからMath.abs、クリックがどの象限にあるかを調べ ( と を使用して簡単に実行できます<) 、それぞれ>に追加する必要がある場合がありMath.PI / 2ます。

于 2012-01-19T20:27:20.353 に答える
1

これには、マウスが弧の内側にあるかどうかのチェックが含まれます。

// Return range is 0 to Math.PI * 2
function get_mouse_circle_angle(origin_x, origin_y, mouse_x, mouse_y) {
    var mouse_angle = Math.atan2(mouse_y - origin_y, mouse_x - origin_x);
    if (mouse_angle < 0) {
        mouse_angle = (Math.PI * 2) + mouse_angle;
    }
    return mouse_angle;
}

// Return range is [0, 1)
// 0/1 is 3 oclock
function get_mouse_circle_percent(origin_x, origin_y, mouse_x, mouse_y) {
    var mouse_angle = get_mouse_circle_angle(origin_x, origin_y, mouse_x, mouse_y);
    return mouse_angle / (2 * Math.PI);
}

function get_mouse_arc_pos(origin_x, origin_y, mouse_x, mouse_y, radius, thickness) {
    var mouse_angle = Math.atan2(mouse_y - origin_y, mouse_x - origin_x);
    if (mouse_angle < 0) {
        mouse_angle = (Math.PI * 2) + mouse_angle;
    }
    var mouse_percent = mouse_angle / (2 * Math.PI);

    var circle_edge_x = origin_x + (radius + thickness / 2) * Math.cos(mouse_angle);
    var circle_edge_y = origin_y + (radius + thickness / 2) * Math.sin(mouse_angle);

    var arc_inside_x = origin_x + (radius - thickness / 2) * Math.cos(mouse_angle);
    var arc_inside_y = origin_y + (radius - thickness / 2) * Math.sin(mouse_angle);

    var is_in_circle = true;

    if (mouse_angle <= (2 * Math.PI) * 0.25) {
        if (mouse_x > circle_edge_x || mouse_y > circle_edge_y)
            is_in_circle = false;
    }
    else if (mouse_angle <= (2 * Math.PI) * 0.5) {
        if (mouse_x < circle_edge_x || mouse_y > circle_edge_y)
            is_in_circle = false;
    }
    else if (mouse_angle <= (2 * Math.PI) * 0.75) {
        if (mouse_x < circle_edge_x || mouse_y < circle_edge_y)
            is_in_circle = false;
    }
    else {
        if (mouse_x > circle_edge_x || mouse_y < circle_edge_y)
            is_in_circle = false;
    }

    var is_in_arc = is_in_circle;
    if (is_in_circle) {
        if (mouse_angle <= (2 * Math.PI) * 0.25) {
            if (mouse_x < arc_inside_x || mouse_y < arc_inside_y)
                is_in_arc = false;
        }
        else if (mouse_angle <= (2 * Math.PI) * 0.5) {
            if (mouse_x > arc_inside_x || mouse_y < arc_inside_y)
                is_in_arc = false;
        }
        else if (mouse_angle <= (2 * Math.PI) * 0.75) {
            if (mouse_x > arc_inside_x || mouse_y > arc_inside_y)
                is_in_arc = false;
        }
        else {
            if (mouse_x < arc_inside_x || mouse_y > arc_inside_y)
                is_in_arc = false;
        }
    }

    return {
        angle: mouse_angle,
        percent: mouse_percent,
        is_in_circle: is_in_circle,
        is_in_arc: is_in_arc
    };
}
于 2013-09-26T02:07:47.647 に答える
0

実際にはテストしませんでしたが、技術的には動作するはずです:

// Where x1 and y1 should be the coordinates of the arc's center
function angle(x1, y1, x2, y2) {
    // Calculate a · b
    var nominator = x1 * x2 + y1 * y2;

    // Calculate ||a|| ||b||
    var denominator = Math.sqrt(x1*x1 + y1*y1) * Math.sqrt(x2*x2 + y2*y2);
    if (denominator == 0) return 0; // Indifinite angle

    // Return the angle
    return Math.acos(nominator / denominator);
}

// Returns a percent, might be negative
var percent = angle(0, 0, mouseX, mouseY) / (2*Math.PI);

編集

負の数の場合は、[-1, 1] の範囲にあるため、1 を追加してみてください。

if (percent < 0) percent += 1;
于 2012-01-19T20:31:07.213 に答える