3

我目前正在尝试制作一种在线教练战术板，您可以在其中拖动 div 冒充球员来展示阵容或特定战术。我正在使用Touch Punch进行拖动，它在 PC、平板电脑和智能手机（最后两个是目标平台）上运行良好。

我现在想尝试和实现的是，当您按下按钮时，在拖动玩家之后开始在轨迹中绘制线条，因此特定玩家应该如何运行的模式。这意味着您将首先将玩家置于起始位置，然后使用按钮开始线路轨迹，然后开始在运行模式中拖动他们，以便显示。

我目前在 a 中绘制了线条<canvas>，但这意味着您将线条与拖动玩家分开拖动，这有时会变得拥挤并且很容易开始拖动 div 而不是开始在 div 旁边开始绘制线条，尤其是在触摸屏。

有人知道这是否可能吗？

4

1 回答 1

2

谢谢raam86，没想到会这么简单。

这就是我解决它的方法，以防有人走上这条路：

$( "[id^=home]" ).draggable({
        // options...
        start: function(event,ui){
            context.strokeStyle = 'Blue';
            $( this ).addClass("dragging");
            if (drawWhenDragging){
                context.beginPath();
                context.moveTo(ui.position.left+$(this).width()/2, ui.position.top+$(this).width()/2);
            }
        },
        drag: function(event,ui){
            $( this ).addClass("dragging");
            if (drawWhenDragging){
                context.lineTo(ui.position.left+$(this).width()/2, ui.position.top+$(this).width()/2);
                context.stroke();
            }
        },
        stop: function(event,ui){
            $( this ).removeClass("dragging");
            if (drawWhenDragging){
                context.closePath();
            }
        }
    });
于 2013-12-27T01:01:21.590 回答