From de1a4b7ff92d08a9d93fab8ee72e272acb36e445 Mon Sep 17 00:00:00 2001 From: Mikael Finstad Date: Wed, 23 Sep 2020 13:01:15 +0200 Subject: [PATCH] add position parameter to slide-in-text too also add more position convenience strings --- README.md | 11 +++++----- examples/position.json5 | 23 +++++++++++++++++++++ examples/slideInText.json5 | 2 +- sources/fabric/fabricFrameSources.js | 8 +++++--- util.js | 30 ++++++++++++++++++++++++++++ 5 files changed, 64 insertions(+), 10 deletions(-) create mode 100644 examples/position.json5 diff --git a/README.md b/README.md index fac1bb9..1b4d450 100644 --- a/README.md +++ b/README.md @@ -258,12 +258,9 @@ Title with background #### Layer type 'slide-in-text' - `fontPath` - See `defaults.layer.fontPath` - `text` -- `top` -- `left` -- `originX` -- `originY` - `fontSize` - `color` +- `position` - See [Position parameter](#position-parameter) #### Layer type 'fill-color', 'pause' - `color` - Color to fill background, default: randomize @@ -302,8 +299,10 @@ Loads a GLSL shader. See [gl.json5](https://github.com/mifi/editly/blob/master/e Certain layers support the position parameter `position` can be one of either: - - `top`, `bottom` or `center` - vertical position (horizontally centered) - - An object `{ x, y, originX = 'left', originY = 'top' }`, where `{ x: 0, y: 0 }` is the upper left corner of the screen, and `{ x: 1, y: 1 }` is the lower right corner, `x` is relative to video width, `y` to height. `originX` and `originY` are optional, and specify the position's origin (anchor position) of the object. + - `top`, `bottom` `center`, `top-left`, `top-right`, `center-left`, `center-right`, `bottom-left`, `bottom-right` + - An object `{ x, y, originX = 'left', originY = 'top' }`, where `{ x: 0, y: 0 }` is the upper left corner of the screen, and `{ x: 1, y: 1 }` is the lower right corner, `x` is relative to video width, `y` to video height. `originX` and `originY` are optional, and specify the position's origin (anchor position) of the object. + +See [position.json5](https://github.com/mifi/editly/blob/master/examples/position.json5) ### Ken Burns parameters diff --git a/examples/position.json5 b/examples/position.json5 new file mode 100644 index 0000000..3151905 --- /dev/null +++ b/examples/position.json5 @@ -0,0 +1,23 @@ +{ + outPath: './position.mp4', + defaults: { + layerType: { + 'image-overlay': { width: 0.1 }, + }, + }, + clips: [ + { layers: [ + { type: 'rainbow-colors' }, + { type: 'image-overlay', path: './assets/emoji2.svg', position: 'top' }, + { type: 'image-overlay', path: './assets/emoji2.svg', position: 'center' }, + { type: 'image-overlay', path: './assets/emoji2.svg', position: 'bottom' }, + { type: 'image-overlay', path: './assets/emoji2.svg', position: 'top-left' }, + { type: 'image-overlay', path: './assets/emoji2.svg', position: 'top-right' }, + { type: 'image-overlay', path: './assets/emoji2.svg', position: 'center-left' }, + { type: 'image-overlay', path: './assets/emoji2.svg', position: 'center-right' }, + { type: 'image-overlay', path: './assets/emoji2.svg', position: 'bottom-left' }, + { type: 'image-overlay', path: './assets/emoji2.svg', position: 'bottom-right' }, + { type: 'image-overlay', path: './assets/emoji.png', width: 0.06, position: { originX: 'center', originY: 'center', x: 0.75, y: 0.75 } }, + ] }, + ], +} diff --git a/examples/slideInText.json5 b/examples/slideInText.json5 index 60085ee..bd954e2 100644 --- a/examples/slideInText.json5 +++ b/examples/slideInText.json5 @@ -3,7 +3,7 @@ clips: [ { duration: 3, layers: [ { type: 'image', path: 'assets/img2.jpg' }, - { type: 'slide-in-text', text: 'Text that slides in', top: 0.93, left: 0.04, color: '#fff', originY: 'bottom', fontSize: 0.05 }, + { type: 'slide-in-text', text: 'Text that slides in', color: '#fff', position: { x: 0.04, y: 0.93, originY: 'bottom', originX: 'left' }, fontSize: 0.05 }, ] }, ], } diff --git a/sources/fabric/fabricFrameSources.js b/sources/fabric/fabricFrameSources.js index 33afb7a..11a2d3d 100644 --- a/sources/fabric/fabricFrameSources.js +++ b/sources/fabric/fabricFrameSources.js @@ -344,10 +344,12 @@ async function getFadedObject({ object, progress }) { return fadedImage; } -async function slideInTextFrameSource({ width, height, params: { text, top = 0.05, left = 0.05, originX = 'left', originY = 'top', fontSize = 0.05, color = '#ffffff', fontFamily = defaultFontFamily } = {} }) { +async function slideInTextFrameSource({ width, height, params: { position, text, fontSize = 0.05, color = '#ffffff', fontFamily = defaultFontFamily } = {} }) { async function onRender(progress, canvas) { const fontSizeAbs = Math.round(width * fontSize); + const { left, top, originX, originY } = getPositionProps({ position, width, height }); + const textBox = new fabric.Text(text, { fill: color, fontFamily, @@ -366,8 +368,8 @@ async function slideInTextFrameSource({ width, height, params: { text, top = 0.0 fadedObject.setOptions({ originX, originY, - top: top * height, - left: left * width, + top, + left, opacity, }); diff --git a/util.js b/util.js index 4e4abc4..ef08103 100644 --- a/util.js +++ b/util.js @@ -80,6 +80,36 @@ function getPositionProps({ position, width, height }) { } else if (position === 'center') { originY = 'center'; top = height / 2; + } else if (position === 'top-left') { + originX = 'left'; + originY = 'top'; + left = width * margin; + top = height * margin; + } else if (position === 'top-right') { + originX = 'right'; + originY = 'top'; + left = width * (1 - margin); + top = height * margin; + } else if (position === 'center-left') { + originX = 'left'; + originY = 'center'; + left = width * margin; + top = height / 2; + } else if (position === 'center-right') { + originX = 'right'; + originY = 'center'; + left = width * (1 - margin); + top = height / 2; + } else if (position === 'bottom-left') { + originX = 'left'; + originY = 'bottom'; + left = width * margin; + top = height * (1 - margin); + } else if (position === 'bottom-right') { + originX = 'right'; + originY = 'bottom'; + left = width * (1 - margin); + top = height * (1 - margin); } if (position && position.x != null) {