Added Style set methods and moved shadow sync.

This commit is contained in:
Richard Davey 2017-03-16 21:59:50 +00:00
parent b5258b55b1
commit 08d9e55066
2 changed files with 125 additions and 37 deletions

View file

@ -25,8 +25,7 @@ var TextStyle = new Class({
function TextStyle (text, style) function TextStyle (text, style)
{ {
// Needed? this.parent = text;
this.text = text;
this.font = propertyMap.font[1]; this.font = propertyMap.font[1];
this.backgroundColor = propertyMap.backgroundColor[1]; this.backgroundColor = propertyMap.backgroundColor[1];
@ -48,17 +47,7 @@ var TextStyle = new Class({
} }
}, },
setStyle: function (style) syncFont: function (canvas, context)
{
for (var key in propertyMap)
{
this[key] = GetObjectValue(style, propertyMap[key][0], this[key]);
}
return this;
},
syncToCanvas: function (canvas, context)
{ {
context.font = this.font; context.font = this.font;
context.textBaseline = 'alphabetic'; context.textBaseline = 'alphabetic';
@ -71,13 +60,132 @@ var TextStyle = new Class({
context.lineJoin = 'round'; context.lineJoin = 'round';
}, },
syncShadow: function (canvas, context, visible)
{
var style = this.style;
if (visible)
{
context.shadowOffsetX = style.shadowOffsetX;
context.shadowOffsetY = style.shadowOffsetY;
context.shadowColor = style.shadowColor;
context.shadowBlur = style.shadowBlur;
}
else
{
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowColor = 0;
context.shadowBlur = 0;
}
},
setStyle: function (style)
{
for (var key in propertyMap)
{
this[key] = GetObjectValue(style, propertyMap[key][0], this[key]);
}
return this;
},
setFont: function (font) setFont: function (font)
{ {
this.font = font; this.font = font;
// Tell Text it changed this.parent.updateText();
return this;
}, },
setBackgroundColor: function (color)
{
this.backgroundColor = color;
this.parent.updateText();
return this;
},
setFill: function (color)
{
this.fill = color;
this.parent.updateText();
return this;
},
setStroke: function (color, thickness)
{
if (color === undefined)
{
// Reset the stroke to zero (disabling it)
this.strokeThickness = 0;
}
else
{
if (thickness === undefined) { thickness = this.strokeThickness; }
this.stroke = color;
this.strokeThickness = thickness;
}
this.parent.updateText();
return this;
},
setShadow: function (x, y, color, blur, shadowStroke, shadowFill)
{
if (x === undefined) { x = 0; }
if (y === undefined) { y = 0; }
if (color === undefined) { color = '#000'; }
if (blur === undefined) { blur = 0; }
if (shadowStroke === undefined) { shadowStroke = false; }
if (shadowFill === undefined) { shadowFill = false; }
this.shadowOffsetX = x;
this.shadowOffsetY = y;
this.shadowColor = color;
this.shadowBlur = blur;
this.shadowStroke = shadowStroke;
this.shadowFill = shadowFill;
this.parent.updateText();
return this;
},
setAlign: function (align)
{
if (align === undefined) { align = 'left'; }
this.align = align;
this.parent.updateText();
return this;
},
setMaxLines: function (max)
{
if (max === undefined) { max = 0; }
this.maxLines = max;
this.parent.updateText();
return this;
},
destroy: function ()
{
this.parent = undefined;
}
}); });
module.exports = TextStyle; module.exports = TextStyle;

View file

@ -153,42 +153,22 @@ var Text = new Class({
if (style.strokeThickness) if (style.strokeThickness)
{ {
this.updateShadow(style.shadowStroke); this.style.syncShadow(style.shadowStroke);
context.strokeText(lines[i], linePositionX, linePositionY); context.strokeText(lines[i], linePositionX, linePositionY);
} }
if (style.fill) if (style.fill)
{ {
this.updateShadow(style.shadowFill); this.style.syncShadow(style.shadowFill);
context.fillText(lines[i], linePositionX, linePositionY); context.fillText(lines[i], linePositionX, linePositionY);
} }
} }
}, }
// Add style callback so we can chain filter effects // Add style callback so we can chain filter effects
updateShadow: function (visible)
{
var context = this.context;
var style = this.style;
if (visible)
{
context.shadowOffsetX = style.shadowOffsetX;
context.shadowOffsetY = style.shadowOffsetY;
context.shadowColor = style.shadowColor;
context.shadowBlur = style.shadowBlur;
}
else
{
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowColor = 0;
context.shadowBlur = 0;
}
}
}); });