refactor: 背景色兜底用 canvas 背景色替代硬编码
This commit is contained in:
+20
-5
@@ -468,7 +468,13 @@ function convert(input) {
|
|||||||
const g = parseInt(tc.slice(2,4), 16);
|
const g = parseInt(tc.slice(2,4), 16);
|
||||||
const b = parseInt(tc.slice(4,6), 16);
|
const b = parseInt(tc.slice(4,6), 16);
|
||||||
const lum = (r * 299 + g * 587 + b * 114) / 1000;
|
const lum = (r * 299 + g * 587 + b * 114) / 1000;
|
||||||
slideBg = lum > 128 ? { color: '1A1A1A' } : { color: 'FAFAFA' };
|
// 浅色文字 → 深色背景(用 canvas 背景色),深色文字 → 浅色背景(取反)
|
||||||
|
if (lum > 128) {
|
||||||
|
const canvasBg = canvas.backgroundColor ? rgbaToHex(canvas.backgroundColor) : null;
|
||||||
|
slideBg = { color: canvasBg || '1A1A1A' };
|
||||||
|
} else {
|
||||||
|
slideBg = { color: 'FAFAFA' };
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -661,9 +667,16 @@ function convert(input) {
|
|||||||
if (n.styles.display === 'none' || n.styles.visibility === 'hidden') { continue; }
|
if (n.styles.display === 'none' || n.styles.visibility === 'hidden') { continue; }
|
||||||
|
|
||||||
let fillColor = null;
|
let fillColor = null;
|
||||||
|
let fillTransparency = null;
|
||||||
const bg = n.styles.backgroundColor;
|
const bg = n.styles.backgroundColor;
|
||||||
if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {
|
if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {
|
||||||
fillColor = rgbaToHex(bg);
|
fillColor = rgbaToHex(bg);
|
||||||
|
// 提取 alpha 通道作为 transparency
|
||||||
|
const alphaMatch = bg.match(/rgba?\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*([\d.]+)\s*\)/);
|
||||||
|
if (alphaMatch) {
|
||||||
|
const alpha = parseFloat(alphaMatch[1]);
|
||||||
|
if (alpha < 1) fillTransparency = Math.round((1 - alpha) * 100);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
if (!fillColor) {
|
if (!fillColor) {
|
||||||
const bgImg = n.styles.backgroundImage;
|
const bgImg = n.styles.backgroundImage;
|
||||||
@@ -674,9 +687,12 @@ function convert(input) {
|
|||||||
}
|
}
|
||||||
if (fillColor) {
|
if (fillColor) {
|
||||||
var shapeOpts = { x: opts.x, y: opts.y, w: opts.w, h: opts.h, fill: { color: fillColor } };
|
var shapeOpts = { x: opts.x, y: opts.y, w: opts.w, h: opts.h, fill: { color: fillColor } };
|
||||||
// 透明度
|
// 透明度(来自 alpha 通道)
|
||||||
|
if (fillTransparency) shapeOpts.fill.transparency = fillTransparency;
|
||||||
|
// 透明度(来自 CSS opacity)
|
||||||
if (n.styles.opacity !== undefined && n.styles.opacity !== '' && parseFloat(n.styles.opacity) < 1) {
|
if (n.styles.opacity !== undefined && n.styles.opacity !== '' && parseFloat(n.styles.opacity) < 1) {
|
||||||
shapeOpts.transparency = Math.round((1 - parseFloat(n.styles.opacity)) * 100);
|
var opTrans = Math.round((1 - parseFloat(n.styles.opacity)) * 100);
|
||||||
|
shapeOpts.fill.transparency = Math.max(shapeOpts.fill.transparency || 0, opTrans);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 圆角
|
// 圆角
|
||||||
@@ -883,13 +899,12 @@ if (require.main === module) {
|
|||||||
const st = { rect: 'rect', roundRect: 'roundRect', ellipse: 'ellipse' }[obj.shapeName] || 'rect';
|
const st = { rect: 'rect', roundRect: 'roundRect', ellipse: 'ellipse' }[obj.shapeName] || 'rect';
|
||||||
const shapeOpts = {
|
const shapeOpts = {
|
||||||
x: o.x, y: o.y, w: o.w, h: o.h,
|
x: o.x, y: o.y, w: o.w, h: o.h,
|
||||||
fill: o.fill ? { color: o.fill.color } : undefined
|
fill: o.fill ? { color: o.fill.color, transparency: o.fill.transparency } : undefined
|
||||||
};
|
};
|
||||||
if (o.line) shapeOpts.line = o.line;
|
if (o.line) shapeOpts.line = o.line;
|
||||||
else shapeOpts.line = { type: 'none' }; // 去掉 pptxgenjs 默认边框
|
else shapeOpts.line = { type: 'none' }; // 去掉 pptxgenjs 默认边框
|
||||||
if (o.shadow) shapeOpts.shadow = o.shadow;
|
if (o.shadow) shapeOpts.shadow = o.shadow;
|
||||||
if (o.rectRadius) shapeOpts.rectRadius = o.rectRadius;
|
if (o.rectRadius) shapeOpts.rectRadius = o.rectRadius;
|
||||||
if (o.transparency !== undefined) shapeOpts.transparency = o.transparency;
|
|
||||||
slide.addShape(pres.ShapeType[st] || pres.ShapeType.rect, shapeOpts);
|
slide.addShape(pres.ShapeType[st] || pres.ShapeType.rect, shapeOpts);
|
||||||
} else if (obj.type === 'image') {
|
} else if (obj.type === 'image') {
|
||||||
slide.addImage({
|
slide.addImage({
|
||||||
|
|||||||
Reference in New Issue
Block a user