Mám funkci, která vypisuje text ve fontu Courier New. Nejdříve má být Courier
New bílý tučně a to se má přepsat Courier New černý normálně. Tím by mělo
vzniknout bílé podbarvení černého textu aby byl lépe vidět na obrazovce pokud se
text pohybuje přes obrázek. Vypíše se ale jen černý text. Nerozumím moc těm
funkcím save() a restore(). restore je úplně dole takže prakticky to probíhá
takto:
ctx.save(); // pushes the current state onto the stack
drawText(3); // VYKRESLI TLUSTÝ BÍLÝ TEXT
ctx.restore();
drawText(4); // VYKRESLI OBYČEJNÝ BÍLÝ TEXT
ctx.restore();
nevím co znamená "pushes the current state onto the stack"
var nodeFont = "16px Courier New, sans-serif";
var nodeFontBg = "bold 16px Courier New, sans-serif";
var nodeFontColor = "#000000";
var nodeFontColorBg = "#FFFFFF";
function drawText(textTypeLocal){
var textTypeLocal;
var text = (node.data.label !== undefined) ? node.data.label : node.id;
if ( textTypeLocal == 1 ){
ctx.textAlign = "left";
ctx.textBaseline = "top";
var x = s.x - contentWidth/2;
var y = s.y - contentHeight/2;
}
else {
ctx.textAlign = "left";
ctx.textBaseline = "top";
var x = s.x - contentWidth/2;
var y = s.y + contentHeight/2 + paddingY;
}
/* Detect Font for background and
try to apply it: */
if (textTypeLocal == 3)
{
ctx.font = (node.data.fontBackground !== undefined) ?
node.data.fontBackground :
(nodeFontBg !== undefined)?nodeFontBg:undefined;
console.log("A");
}
else if (textTypeLocal == 4)
if ( ctx.font !== undefined )
{
ctx.fillText(text, x, y);
ctx.fillStyle = (node.data.color !== undefined) ? node.data.backColor :
nodeFontColorBg;
// Set front font color
ctx.fillStyle = (node.data.color !== undefined) ? node.data.color :
nodeFontColor;
// Apply front font
ctx.font = (node.data.font !== undefined) ? node.data.font : nodeFont;
console.log("B");
}
ctx.fillText(text, x, y);
};
var s = toScreen(p);
ctx.save();
// Pulled out the padding aspect so
// that the size functions could be used
// in multiple places. These should
// probably be settable by the user (and
// scoped higher) but this suffices for now
var paddingX = 6;
var paddingY = 6;
var contentWidth = node.getWidth();
var contentHeight = node.getHeight();
var boxWidth = contentWidth + paddingX;
var boxHeight = contentHeight + paddingY;
// HIGHLIGHTING:
// fill background
if (fillRect)
drawBox();
if ( forceImageCheck && node.data.image == undefined )
throw new TypeError("Image not found. node id: " + node.id );
if ( this.loaded && node.data.image == undefined )
drawText(3);
else {
drawText(3); // VY
