javascript - 将气球放在 Canvas 内的任意位置

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展示它的工作。

另一种更好的方法是使用 position() jQuery UI 中的实用方法为您完成繁重的工作。

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

$('#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' 选项。