152 lines
4.7 KiB
JavaScript
152 lines
4.7 KiB
JavaScript
|
|
function newProfileBall() {
|
|
|
|
var thisObject = {
|
|
|
|
drawBackground: drawBackground,
|
|
drawForeground: drawForeground,
|
|
initialize: initialize
|
|
|
|
};
|
|
|
|
return thisObject;
|
|
|
|
function initialize(callBackFunction) {
|
|
|
|
callBackFunction();
|
|
|
|
}
|
|
|
|
function drawBackground(pFloatingObject) {
|
|
|
|
if (pFloatingObject.currentRadius > 1) {
|
|
|
|
/* Target Line */
|
|
|
|
browserCanvasContext.beginPath();
|
|
browserCanvasContext.moveTo(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y);
|
|
browserCanvasContext.lineTo(pFloatingObject.payload.profile.position.x, pFloatingObject.payload.profile.position.y);
|
|
browserCanvasContext.strokeStyle = 'rgba(204, 204, 204, 0.5)';
|
|
browserCanvasContext.setLineDash([4, 2]);
|
|
browserCanvasContext.lineWidth = 1;
|
|
browserCanvasContext.stroke();
|
|
browserCanvasContext.setLineDash([0, 0]);
|
|
|
|
}
|
|
|
|
if (pFloatingObject.currentRadius > 0.5) {
|
|
|
|
/* Target Spot */
|
|
|
|
var radius = 1;
|
|
|
|
browserCanvasContext.beginPath();
|
|
browserCanvasContext.arc(pFloatingObject.payload.profile.position.x, pFloatingObject.payload.profile.position.y, radius, 0, Math.PI * 2, true);
|
|
browserCanvasContext.closePath();
|
|
browserCanvasContext.fillStyle = 'rgba(30, 30, 30, 1)';
|
|
browserCanvasContext.fill();
|
|
|
|
}
|
|
}
|
|
|
|
function drawForeground(pFloatingObject) {
|
|
|
|
if (pFloatingObject.currentRadius > 5) {
|
|
|
|
/* Contourn */
|
|
|
|
browserCanvasContext.beginPath();
|
|
browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true);
|
|
browserCanvasContext.closePath();
|
|
browserCanvasContext.strokeStyle = 'rgba(30, 30, 30, 0.75)';
|
|
browserCanvasContext.lineWidth = 1;
|
|
browserCanvasContext.stroke();
|
|
|
|
}
|
|
|
|
if (pFloatingObject.currentRadius > 0.5) {
|
|
|
|
/* Main FloatingObject */
|
|
|
|
var alphaA;
|
|
|
|
if (pFloatingObject.currentRadius < 3) {
|
|
alphaA = 1;
|
|
} else {
|
|
alphaA = 0.75;
|
|
}
|
|
|
|
alphaA = 0.75;
|
|
|
|
browserCanvasContext.beginPath();
|
|
browserCanvasContext.arc(pFloatingObject.currentPosition.x, pFloatingObject.currentPosition.y, pFloatingObject.currentRadius, 0, Math.PI * 2, true);
|
|
browserCanvasContext.closePath();
|
|
|
|
browserCanvasContext.fillStyle = pFloatingObject.fillStyle;
|
|
|
|
browserCanvasContext.fill();
|
|
|
|
}
|
|
|
|
/* Image */
|
|
|
|
if (pFloatingObject.payload.profile.imageId !== undefined) {
|
|
|
|
let image = document.getElementById(pFloatingObject.payload.profile.imageId);
|
|
|
|
if (image !== null) {
|
|
|
|
browserCanvasContext.drawImage(image, pFloatingObject.currentPosition.x - pFloatingObject.currentImageSize / 2, pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2, pFloatingObject.currentImageSize, pFloatingObject.currentImageSize);
|
|
|
|
}
|
|
}
|
|
|
|
/* Label Text */
|
|
|
|
if (pFloatingObject.currentRadius > 6) {
|
|
|
|
browserCanvasContext.strokeStyle = pFloatingObject.labelStrokeStyle;
|
|
|
|
let labelPoint;
|
|
let fontSize = 10;
|
|
|
|
browserCanvasContext.font = fontSize + 'px Courier New';
|
|
|
|
let label;
|
|
|
|
label = pFloatingObject.payload.profile.upLabel;
|
|
|
|
if (label !== undefined) {
|
|
|
|
labelPoint = {
|
|
x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * 0.60,
|
|
y: pFloatingObject.currentPosition.y - pFloatingObject.currentImageSize / 2 - fontSize * 0.60 - 5
|
|
};
|
|
|
|
browserCanvasContext.font = fontSize + 'px Courier New';
|
|
browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle;
|
|
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
|
|
|
|
}
|
|
|
|
label = pFloatingObject.payload.profile.downLabel;
|
|
|
|
if (label !== undefined) {
|
|
|
|
labelPoint = {
|
|
x: pFloatingObject.currentPosition.x - label.length / 2 * fontSize * 0.60,
|
|
y: pFloatingObject.currentPosition.y + pFloatingObject.currentImageSize / 2 + fontSize * 0.60 + 10
|
|
};
|
|
|
|
browserCanvasContext.font = fontSize + 'px Courier New';
|
|
browserCanvasContext.fillStyle = pFloatingObject.labelStrokeStyle;
|
|
browserCanvasContext.fillText(label, labelPoint.x, labelPoint.y);
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|