Question

我需要创建图像热点类型问题。管理员上传图片并绘制一些区域。在用户部分中，问题图像可以显示给没有图的用户。根据用户点击他点击了相同的位置。我们需要找出

是任何适合我要求的预定义api。或任何要解决的建议我的问题。我的要求类似于 http://articulate-community.s3.amazonaws.com/jeanette/Hotspot/PublishedSample/quiz.html

这种类型。

提前致谢

我正在获得职位，但我遇到了鼠标问题并且一次重新调整大小。可以任何人帮助我，请检查链接
Demo



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);
    }

Answer 1

我认为在这种情况下你应该使用ex。：

对象创建数组

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

Answer 2

使用此代码

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"
});

并使用触发事件进行mousedown +一次拖动

使用onclick验证绘制图像Hotpot

2 个答案: