1 line
7.6 KiB
Plaintext
1 line
7.6 KiB
Plaintext
|
{"version":3,"file":"generateFillStyle.mjs","sources":["../../src/utils/generateFillStyle.ts"],"sourcesContent":["import { TEXT_GRADIENT } from '@pixi/text';\n\nimport type { ICanvas, ICanvasRenderingContext2D } from '@pixi/core';\nimport type { TextMetrics, TextStyle } from '@pixi/text';\n\n// TODO: Prevent code duplication b/w generateFillStyle & Text#generateFillStyle\n\n/**\n * Generates the fill style. Can automatically generate a gradient based on the fill style being an array\n * @private\n * @param canvas\n * @param context\n * @param {object} style - The style.\n * @param resolution\n * @param {string[]} lines - The lines of text.\n * @param metrics\n * @returns {string|number|CanvasGradient} The fill style\n */\nexport function generateFillStyle(\n canvas: ICanvas,\n context: ICanvasRenderingContext2D,\n style: TextStyle,\n resolution: number,\n lines: string[],\n metrics: TextMetrics\n): string | CanvasGradient | CanvasPattern\n{\n // TODO: Can't have different types for getter and setter. The getter shouldn't have the number type as\n // the setter converts to string. See this thread for more details:\n // https://github.com/microsoft/TypeScript/issues/2521\n const fillStyle: string | string[] | CanvasGradient | CanvasPattern = style.fill as any;\n\n if (!Array.isArray(fillStyle))\n {\n return fillStyle;\n }\n else if (fillStyle.length === 1)\n {\n return fillStyle[0];\n }\n\n // the gradient will be evenly spaced out according to how large the array is.\n // ['#FF0000', '#00FF00', '#0000FF'] would created stops at 0.25, 0.5 and 0.75\n let gradient: string[] | CanvasGradient;\n\n // a dropshadow will enlarge the canvas and result in the gradient being\n // generated with the incorrect dimensions\n const dropShadowCorrection = (style.dropShadow) ? style.dropShadowDistance : 0;\n\n // should also take padding into account, padding can offset the gradient\n const padding = style.padding || 0;\n\n const width = (canvas.width / resolution) - dropShadowCorrection - (padding * 2);\n const height = (canvas.height / resolution) - dropShadowCorrection - (padding * 2);\n\n // make a copy of the style settings, so we can manipulate them later\n const fill = fillStyle.slice();\n const fillGradientStops = style.fillGradientStops.slice();\n\n // wanting to evenly distribute the fills. So an array of 4 colours should give fills of 0.25, 0.5 and 0.75\n if (!fillGradientStops.length)\n {\n const lengthPlus1 = fill.length + 1;\n\n for (let i = 1; i < lengthPlus1; ++i)\n {\n fillGradientStops.push(i / lengthPlus1);\n }\n }\n\n // stop the bleeding of the last gradient on the line above to the top gradient of the this line\n // by hard defining the first gradient colour at point 0, and last gradient colour at point 1\n fill.unshift(fillStyle[0]);\n fillGradientStops.unshift(0);\n\n fill.push(fillStyle[fillStyle.length - 1]);\n fillGradientStops.push(1);\n\n if (style.fillGradientType === TEXT_GRADIENT.LINEAR_VERTICAL)\n {\n // start the gradient at the top center of the canvas, and end at the bottom middle of the canvas\n gradient = context.createLinearGradient(width / 2, padding, width / 2, height + padding);\n\n // we need to repeat the gradient so that each individual line of text has the same vertical gradient effect\n // ['#FF0000', '#00FF00', '#0000FF'] over 2 lines would create stops at 0.125, 0.25, 0.375, 0.625, 0.75, 0.875\n\n // There's potential for floating point precision issues at the seams between gradient repeats.\n // The loop below generates the stops in order, so track the last generated one to prevent\n // floating point precision from making us go the teeniest bit backwards, resulting in\n // the first and last colors getting swapped.\n let lastIterationStop = 0;\n\n // Actual height of the text itself, not counting spacing for lineHeight/leading/dropShad
|