HTML5 холст рисовать переменные круга с дополнительными данными - PullRequest
Новая
       16

HTML5 холст рисовать переменные круга с дополнительными данными

1 голос
/ 22 июля 2011

Таким образом, я в основном пытаюсь создать схему размещения, которая будет отмечать пятна кружками, а затем onMouseover отображает всплывающую подсказку с именем, фамилией человека и, возможно, некоторой другой информацией. Скорее всего, я буду использовать Kinetic.JS для поддержки регионов / всплывающих подсказок, так как мне кажется, что я чаще всего сталкиваюсь с учебными пособиями.

Я хотел бы создать 1 переменную на человека, которая содержит не только информацию об именах, но также некоторые сведения о круге, это может быть просто, но я новичок в 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, но просто не могу правильно настроить эту установку ...

Спасибо

Ответы [ 2 ]

2 голосов
/ 22 июля 2011

Как говорит jcubed: «Вы не можете передать объект в дугу, содержащую эти свойства».

Что вы можете сделать, это создать свою собственную функцию, например: 

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

Если вы сделаете это таким образом, вы также можете легко изменить способ рисования человека в будущем.

Если вы хотите, чтобы вообще было проще рисовать криклы, вы можете сделать: 

context.circle = function(x,y,r){ this.arc(x,y,r,0,2*Math.PI,false); }
2 голосов
/ 22 июля 2011

Вы не можете вызывать функции в JavaScript таким образом.Вы должны иметь параметры, разделенные запятыми, например ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);.Вы не можете передать объект в дугу, содержащую эти свойства.

Do: 

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

для каждого человека, как в цикле for или что-то в этом роде.

...