定制形状的可放置区域？

Question

我有一个三分线，我想将球场分开，这样当一个物体掉落时，它被设置在近距离，中距离或三点内。

由于线条弯曲，我不知道该怎么做。我看着svg和画布不确定这些是否是我需要的。

Answer 1

删除对象后，可以从ui对象获取x / y下拉点：

$('#basketballCourt').droppable( {

    drop: function(event, ui){
        var dropY=ui.position.top;
        var dropX=ui.position.left;
    }

});

然后你可以使用屏幕外的html画布来测试你的球场落点。

演示：http://jsfiddle.net/m1erickson/a4gUH/

特别是，context.isPointInPath(dropX,dropY)可用于测试丢弃点是否位于“内部”，“2点”或“3点”放置区域内。

工作原理：

• 创建与图像大小相同的屏幕外画布。
• 定义3个放置路径（每个放置区域一个）。
• 当使用中断时，使用context.isPointInPath测试丢弃点所在的丢弃路径。

这是用于测试丢弃点是否位于“内部”放置区域内的代码：

function isInside(x,y){
    ctx.beginPath();
    ctx.rect(76,190,125,90);
    return(ctx.isPointInPath(x,y));
}

这是用于测试丢弃点是否在“2点”放置区域内的代码：

function is2Point(x,y){
    ctx.beginPath();
    ctx.moveTo(76,125);
    ctx.bezierCurveTo(300,120,300,355,76,350);
    ctx.closePath();
    return(ctx.isPointInPath(x,y));
}

如果掉落点不在“内部”或“2点”之内，那么它在“3点”内