Question

这更像是一个建议请求，而不是帮助破坏代码，但请耐心等待......

我使用相当原始的HTML5画布在下面的链接设计了图像。它绘制了一名球员在足球比赛中所做的个人传球，以及球场本身。这完全没问题。

enter image description here
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

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

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

canvas.onclick = function(e) { /// adjust coordinates var rect = canvas.getBoundingClientRect(), x = e.clientX - rect.left, y = e.clientY - rect.top; /// iterate objects ... }

对于简单的线条，你可以使用isPointInStroke()（你可以看到my earlier answer如何使用它）上下文的功能，或者你可以使用其他数学方法来确定点是否在这条线。

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

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

如果不想要手动执行此操作，您可以随时使用众多库中的一个为您完成所有这些操作，但会限制您定义对象的方式。

Answer 2

我有冲突......

一方面，我同意@Ken - Abdias Software的观点，了解编程的最佳方法是采用一个您感兴趣并从头开始编码的示例。从零开始编码的PRO正在利用html canvas的惊人灵活性。 CON是陡峭的学习曲线。

另一方面，人们可能希望创建一个关于你感兴趣的东西的应用程序，并在此过程中获得一些编程知识。在这种情况下，利用画布库似乎是合适的。使用库的PRO易于入门。 CON是你经常受到图书馆能力的限制。

由于肯已经给出了一个从头开始的代码示例，我不情愿地从我冲突的感情的另一面给出一个例子！

这个KineticJS画布库代码示例将在大约20行代码中执行以下操作：

根据需要轻松创建从A点到B点的任意数量的传递线。
将鼠标悬停在该行上时，通过更改颜色突出显示任何行。
当双击任何行的头部时，调用外部函数（可能是一个AJAX调用）。
即使线路旋转，也可以为您处理所有命中测试。
该库允许多个图层，因此futbol字段很容易显示在行下。

以下是小提琴的示例：http://jsfiddle.net/m1erickson/4gcDy/

这是一个20行函数，可以创建有用的行：

// create a new line
function newLine(x1,y1,x2,y2,id){
    var dx=x2-x1;
    var dy=y2-y1;
    var L=Math.sqrt(dx*dx+dy*dy);
    var r=Math.atan2(dy,dx);
    var line = new Kinetic.Polygon({
      id:id, x:x1, y:y1,
      points: [0,0,L-10,0,L-10,-5,L,0,L-10,5,L-10,0],
      stroke: 'blue', strokeWidth: 2, fill:"blue",
      rotation:r,
    });
    line.recolor=function(color){
        this.setStroke(color);
        this.setFill(color);
        layer.draw();
    }
    line.on("click",function(){ajaxCall(this.getId());});
    line.on("mouseover",function(){this.recolor("orange");});
    line.on("mouseleave",function(){this.recolor("blue");});
    layer.add(line);
    layer.draw();
}

我个人的选择是从头开始编写代码并学习疯狂！但那就是我......

选择坐标之间的线

2 个答案: