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

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

于 2013-11-04T11:07:33.257 回答