問題描述
html5畫布繪製帶有額外數據的圓形變量 (html5 canvas draw circle variables with extra data)
So I am basically trying to create a seating chart that will mark spots with circles and then onMouseover displays a tooltip with the person’s first name, last name, and maybe some other information. I will likely be using Kinetic.JS for region/tooltip support as I seem to come across tutorials for it most often.
I would like to create 1 variable per person that contains not only the naming info, but also some details about the circle, this may be simple but I am new to JS in general. This is what I have come up with more as theory since it doesn’t seem to actually work this simply:
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…
I know in order for a circle to work properly I need to have the last part of the arc info somewhere ctx.arc(.., .., .., 0, 2 * Math.PI, false); I am just not sure where it should be so i don't have to repeat it for every variable?
Would someone be willing to help me set this set up in the proper way? I am currently working my way through a JS book, but simply can’t seem to get this setup properly..
Thanks
‑‑‑‑‑
參考解法
方法 1:
You cannot call functions in javascript like that. You have to have comma separated parameters, like ctx.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);. You cannot pass an object to arc containing those properties.
Do:
ctx.beginPath();
ctx.fillStlye = johnSmith.fillStyle;
ctx.arc(johnSmith.centerX, johnSmith.centerY, johnSmith.radius, 0, 2 * Math.PI, false);
ctx.fill();
for every person, like in a for loop or something.
方法 2:
As jcubed says: "You cannot pass an object to arc containing those properties."
What you could do is to create your own function like:
context.fillPerson = function(p){
this.fillStyle = p.fillStyle;
this.arc(p.centerX,p.centerY,p.radius,0,2*Math.PI,false);
this.fill();
}
If you do it this way, you can also easily change how to draw a person in the future.
If you only want it to be easier to draw cricles in general you could do:
context.circle = function(x,y,r){ this.arc(x,y,r,0,2*Math.PI,false); }
(by tehaaron、John Stimac、Rickard)