diff --git a/README.md b/README.md index 9ce0522e..913a8eda 100644 --- a/README.md +++ b/README.md @@ -301,6 +301,7 @@ Title with background #### Layer type 'news-title' - `fontPath` - See `defaults.layer.fontPath` - `text` +- `fontSize` - `textColor` - default `#ffffff` - `backgroundColor` - default `#d02a42` - `position` - See [Position parameter](#position-parameter) diff --git a/sources/fabric/fabricFrameSources.js b/sources/fabric/fabricFrameSources.js index 3c7ed5ca..4ed7c136 100644 --- a/sources/fabric/fabricFrameSources.js +++ b/sources/fabric/fabricFrameSources.js @@ -304,36 +304,40 @@ export async function titleFrameSource({ width, height, params }) { } export async function newsTitleFrameSource({ width, height, params }) { - const { text, textColor = '#ffffff', backgroundColor = '#d02a42', fontFamily = defaultFontFamily, delay = 0, speed = 1 } = params; + const { text, textColor = '#ffffff', backgroundColor = '#d02a42', fontFamily = defaultFontFamily, fontSize = 0.05, position = { x:0, y:0.08 }, delay = 0, speed = 1 } = params; async function onRender(progress, canvas) { const min = Math.min(width, height); - const fontSize = Math.round(min * 0.05); + const { left, top, originX, originY } = getPositionProps({ position, width, height }); + const fromLeft = left / width < 0.5; + const fontSizeAbs = Math.round(min * fontSize); const easedBgProgress = easeOutExpo(Math.max(0, Math.min((progress - delay) * speed * 3, 1))); const easedTextProgress = easeOutExpo(Math.max(0, Math.min((progress - delay - 0.02) * speed * 4, 1))); const easedTextOpacityProgress = easeOutExpo(Math.max(0, Math.min((progress - delay - 0.07) * speed * 4, 1))); - const top = height * 0.08; - const paddingV = 0.07 * min; const paddingH = 0.03 * min; const textBox = new fabric.Text(text, { top, - left: paddingV + (easedTextProgress - 1) * width, fill: textColor, opacity: easedTextOpacityProgress, fontFamily, - fontSize, + fontSize: fontSizeAbs, charSpacing: width * 0.1, }); + if (fromLeft) { + textBox.set('left', left + paddingV + (easedTextProgress - 1) * width); + } else { + textBox.set('left', left - paddingV - easedTextProgress * textBox.width); + } const bgWidth = textBox.width + (paddingV * 2); const rect = new fabric.Rect({ top: top - paddingH, - left: (easedBgProgress - 1) * bgWidth, + left: fromLeft ? (left + (easedBgProgress - 1) * bgWidth) : (left - (easedBgProgress * bgWidth)), width: bgWidth, height: textBox.height + (paddingH * 2), fill: backgroundColor,