Question

所以我基本上试图创建一个座位表，用圆圈标记斑点，然后onMouseover会显示一个工具提示，上面有该人的名字，姓氏，以及其他一些信息。我可能会使用Kinetic.JS进行区域/工具提示支持，因为我似乎经常遇到教程。

我想为每个人创建一个变量，它不仅包含命名信息，还包含有关圆圈的一些细节，这可能很简单，但我一般都是JS的新手。这就是我提出的更多理论，因为它似乎并没有真正起作用：

Function seat(centerX, centerY, radius, fillStyle, firstName, lastName, id) {
    This.centerX=ctx.arc(centerX);
    This.centerY=ctx.arc(centerY);
    This.radius=ctx.arc(radius);
    This.fillStyle=ctx.fillStyle;
    This.firstName=firstName;
    This.lastName=lastName;
    This.id=id;
}
var johnSmith = new seat (100, 120, 10, #999, John, Smith, 123);

                var canvas = document.getElementById("seatingChart");
                var ctx = canvas.getContext("2d");

    ctx.beginPath();
    ctx.arc(johnSmith);
    ctx.moveTo(…);
    ctx.arc(nextPerson);
    ect…

我知道为了使圆圈正常工作我需要将弧形信息的最后一部分放在某处ctx.arc(.., .., .., 0, 2 * Math.PI, false);我只是不确定它应该在哪里所以我不必为每一个重复它变量？

有人愿意帮助我以正确的方式设置此设置吗？我目前正在通过JS书籍，但似乎无法正确地进行此设置..

由于

Answer 1

你不能在这样的javascript中调用函数。您必须使用逗号分隔的参数，例如ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);。无法将对象传递给包含这些属性的弧。

执行：

ctx.beginPath();
ctx.fillStlye = johnSmith.fillStyle;
ctx.arc(johnSmith.centerX, johnSmith.centerY, johnSmith.radius, 0, 2 * Math.PI, false);
ctx.fill();

适用于每个人，比如for循环或其他什么。

Answer 2

正如jcubed所说：“你无法将对象传递给包含这些属性的弧。”

你可以做的是创建自己的功能，如：

context.fillPerson = function(p){
    this.fillStyle = p.fillStyle;
    this.arc(p.centerX,p.centerY,p.radius,0,2*Math.PI,false);
    this.fill();
}

如果你这样做，你也可以轻松改变将来画人的方式。

如果你只想让它更容易画出一般的cricles你可以这样做：

context.circle = function(x,y,r){ this.arc(x,y,r,0,2*Math.PI,false); }

html5 canvas使用额外数据绘制圆形变量

2 个答案: