Question

的 Fiddle

我试图将气球放置在Canvas内部的任何位置。我可以轻松拖动但不能将其放在点击位置

$(document).ready(function() {
    var d_canvas = document.getElementById('canvas');
    var context = d_canvas.getContext('2d');
    var background = document.getElementById('background');
    var ballon = document.getElementById('ballon')
    context.drawImage(background, 0, 0);

    $('#ballon').draggable();

    $('#draw').click(function() {
        var $ballon = $('#ballon'),
            $canvas = $('#canvas');
        var ballon_x = $ballon.offset().left - $canvas.offset().left,
            ballon_y = $ballon.offset().top - $canvas.offset().top;

        context.drawImage(ballon, ballon_x, ballon_y);

        $ballon.hide();
        $(this).attr('disabled', 'disabled');
    });
});

Answer 1

您可以在Canvas上使用click事件来实现快速而肮脏的定位，如下所示：

$('#canvas').click(function ($event) {
        var $ballon = $('#ballon');

        $ballon.offset({
            left: $event.pageX - $ballon.width() / 2,
            top: $event.pageY - $ballon.height() / 2
        });

    });

这是updated fiddle以显示它的工作原理。

另一种更好的方式，就是在jQuery UI中使用position()实用程序方法为您完成艰苦的工作。

然后您的点击方法可能如下所示：

$('#canvas').click(function ($event) {
    var $ballon = $('#ballon');

    $ballon.position({
        of:$event,
        within:'#canvas',
        collision:'fit fit'
    });

});

这是another fiddle来展示这个例子。并非我使用jQuery UI 1.9.2才能利用within: '#canvas'选项。

Answer 2

除了Kalpers提到的内容之外，还需要在#canvas的点击处理程序中的#draw上添加点击处理程序。在单击处理程序中，您需要在单击时计算鼠标的坐标。现在，您不知道是否已单击canvas元素。

将气球放置在Canvas内部的任何位置

的 Fiddle

2 个答案: