0

画像のホット スポット タイプの質問を作成する必要があります。管理者は画像をアップロードし、いくつかの領域をプロットします。ユーザー部分では、プロットなしでユーザーに表示可能な質問画像。ユーザーのクリックに基づいて、同じ場所をクリックしたかどうか。私たちは見つける必要があります

私の要件に適した事前定義されたAPIのいずれか、または私の問題を解決するための提案です。私の要件はhttp://articulate-community.s3.amazonaws.com/jeanette/Hotspot/PublishedSample/quiz.htmlに似ています

このタイプ。

前もって感謝します

位置を取得していますが、問題が発生しています
。

var plotHotspot = function (e) {
    console.debug(e);

        spotCount++;

        var $hotspot = $('<div id="hotspot_' + spotCount + '"></div>').css({
            'position': 'absolute',
            'display': 'block',
            'left': (e.pageX - $(this).offset().left) - (e.data.x / 2),
            'top': (e.pageY - $(this).offset().top) - (e.data.y / 2),
            'height': e.data.y,
            'width': e.data.x,
            'background': 'url(' + config.icon + ')',
            'cursor': 'pointer'
        }).resizable({ handles: "n, e, s, w, se, sw, nw, ne" },{
helper: "ui-resizable-helper"
});
        simulateHandleClick($hotspot, 's', e.pageX, e.pageY);
        $hotspot.draggable();

        $imageContainer.append($hotspot);


        $hotspots = $hotspots.add($hotspot);`enter code here`

        $hotspot.on('click', initSpotConfig);
    }

4

2 に答える 2

1

この状況では、オブジェクトを含む配列を作成する必要があると思います。例:

var positions = [{
    startX: 100,
    startY: 100,
    endX: 150,
    endY: 150,
    type: 'some are 1'
},...];

//そして、この要素に関連するマウスの位置でチェックします

var x = evt.pageX - $('#element').offset().left
var y = evt.pageY - $('#element').offset().top
于 2013-10-28T10:20:18.573 に答える
1

このコードを使用してください

var $hotspot = $('<div id="hotspot_' + spotCount + '"></div>').css({
            'position': 'absolute',
            'display': 'block',
            'left': (e.pageX - $(this).offset().left) - (e.data.x / 2),
            'top': (e.pageY - $(this).offset().top) - (e.data.y / 2),
            'height': e.data.y,
            'width': e.data.x,
            'background': 'url(' + config.icon + ')',
            'cursor': 'pointer'
        }).resizable({ handles: "n, e, s, w, se, sw, nw, ne" },{
helper: "ui-resizable-helper"
});

一度にマウスダウン+ドラッグするためのトリガーイベントを使用します

于 2013-11-04T11:07:33.257 に答える