jquery - 选择坐标之间的线

Question

这更多的是寻求建议而不是帮助解决代码损坏，但请多多包涵……

我使用相当原始的 HTML5 画布在下面的链接中设计了图像。它绘制了球员在足球比赛中的个人传球以及球场本身。这工作得很好。

http://tinypic.com/r/zj6ydk/5

起初，这就是我希望做的所有事情，但是，我现在想扩展它以便我可以单击每一行，它会通过 AJAX 在元素之外加载有关该传递的特定信息（谁传递了它等） . 我在想 jQuery 可以帮助我，但老实说，我不知道？我已经做了很多谷歌搜索，但我怀疑我正在寻找错误的东西。

有人知道是否有一个 jQuery 脚本可以让我做这样的事情吗？我不是要求你为我写任何代码，我更愿意学习我在做什么。我只需要指出正确的方向。

干杯

Answer 1

如果您想自下而上学习它，我建议任何人避免使用任何库。

您可以为每条线创建一个内部对象，以保存所有重要信息，例如线坐标、源和您要附加的任何其他类型的信息。

然后将画布视为来自这些对象的线条的简单被动视口/渲染。

例子：

function myObject() {
    this.line = [x1, y1, x2, y2]; /// initialize with constructor of manually
    this.source = 'Bob';
    ... any other information ...
    return this;
}

现在你有了一个对象。您可以简单地将它们存储到一个数组中：

var objectStack = [];

var object1 = new myObject();
object1.line = [0, 0, 100, 100];
object1.source = 'Joe';
...

objectStack.push(object1);

/// next

下一个合乎逻辑的步骤当然是将对象渲染到画布上。由于画布只是一个像素池，不适用于对象，因此它只能用作这些数据的视口。

但是，由于您在内部使用对象，您可以从画布中获取坐标并使用它来检查每个对象。如果您愿意，您可以在此阶段使用 jQuery，但实际上没有必要：

canvas.onclick = function(e) {

    /// adjust coordinates   
    var rect = canvas.getBoundingClientRect(),
        x = e.clientX - rect.left,
        y = e.clientY - rect.top;

    /// iterate objects
    ...   
}

对于简单的线条，您可以使用上下文函数isPointInStroke()（例如，您可以看到我之前关于如何使用它的答案）函数，或者您可以使用其他数学方法来确定该点是否在线。

如果它是当前对象将是您需要的对象。

这种方法的另一个优点是您可以合并将对象自我更新到画布等的方法和函数。

如果您不想手动执行此操作，您始终可以使用为您完成所有这些操作的众多库之一，但会限制您如何定义对象。

Answer 2