告别千篇一律：Yiyin相机LOGO自定义功能全攻略

告别千篇一律：Yiyin相机LOGO自定义功能全攻略

【免费下载链接】yiyin 一款照片水印添加工具 项目地址: https://gitcode.com/gh_mirrors/yi/yiyin

你是否还在为照片水印千篇一律而烦恼？是否希望通过个性化LOGO彰显品牌特色或个人风格？Yiyin相机项目的LOGO自定义功能彻底解决了这一痛点。本文将深入解析该功能的实现原理与使用技巧，读完你将获得：

• 掌握LOGO自定义的完整工作流程
• 学会字体管理与模板配置的高级技巧
• 理解底层实现逻辑并能进行二次开发

功能架构概览

Yiyin相机的LOGO自定义功能采用模块化设计，主要由三大核心模块构成：

核心文件分布

模块	关键文件	功能描述
状态管理	web/store/logo.ts	管理LOGO数据与加载逻辑
字体管理	web/components/font-select/index.svelte	字体选择与管理界面
模板系统	web/main/components/temp-setting/index.svelte	模板配置与管理
工具函数	web/util/util.ts	字体导入、图像处理等工具函数

LOGO管理系统实现

LOGO管理系统负责LOGO资源的加载与状态维护，核心实现位于web/store/logo.ts：

import { writable } from 'svelte/store';

export const logoList = writable([]);

async function getLogoList() {
  const info = await window.api.logoList();
  if (info.code === 0) {
    logoList.set(info.data);
  }
}

getLogoList();

工作流程

系统启动时自动调用getLogoList()从主进程获取LOGO资源信息，并通过Svelte的writable store管理状态，实现数据与UI的响应式绑定。

字体管理系统详解

字体管理是LOGO自定义的核心功能，允许用户添加、删除和切换字体，实现个性化文本渲染。

字体加载机制

web/util/util.ts中的importFont函数实现了字体的动态加载：

export async function importFont(arr: IFontInfo[]) {
  const fontPromise: Promise<any>[] = [];

  for (const i of arr) {
    if (!i.path) continue;
    const fontRecord = arrToObj(loadFonts, 'family');
    if (fontRecord[i.name]) continue;

    console.log('%s 字体加载....', i.name);
    const font = new FontFace(i.name, `url('${i.path}')`);
    const _font = font.load().catch((e) => console.log('%s 字体加载失败', i.name, e));

    fontPromise.push(_font);
    loadFonts.push(font);
  }

  for (const font of fontPromise) {
    const _font = await font;
    if (_font) {
      (document.fonts as any).add(_font);
    }
  }
}

系统支持多种字体格式，默认提供四款内置字体：

字体名称	文件名	风格特点	适用场景
FrederickatheGreat	FrederickatheGreat.ttf	复古手写风格	艺术摄影水印
Neoneon	Neoneon.otf	霓虹效果	现代风格照片
千图小兔体	千图小兔体.ttf	卡通手写	儿童照片、社交媒体
春风楷	春风楷.ttf	楷书风格	中国风、传统题材

字体选择组件

字体选择界面实现于web/components/font-select/index.svelte，提供直观的字体预览与管理功能：

<Select size="mini" bind:value {clearable} class="no-drag grass font-select" style="font-family: {value}">
  <div class="button add-font" on:click={addFont} on:keypress role="button" tabindex="-1">+</div>
  {#each fontList as i}
    <Option value={i.name}>
      <span class="font-name" style:font-family={i.name}>{i.name}</span>
      {#if i.type !== 'default'}
        <span class="font-del" on:click|preventDefault|capture|stopPropagation={() => delFont(i.name)}>x</span>
      {/if}
    </Option>
  {/each}
</Select>

该组件具有以下特性：

• 实时字体预览：选项文本使用对应字体显示
• 自定义字体管理：支持添加(+)和删除(x)自定义字体
• 防冲突设计：通过事件修饰符确保操作互不干扰

模板系统深度解析

模板系统允许用户保存LOGO配置方案，实现一键应用。核心实现位于web/main/components/temp-setting/index.svelte：

模板数据结构

interface ITemp {
  key: string;
  name: string;
  type: 'system' | 'custom';
  use: boolean;
  content: string;
  font: string;
  size: number;
  color: string;
  position: {
    x: number;
    y: number;
  };
  opacity: number;
}

模板管理功能

function addTemp() {
  dialog.data = getDefTemp();
  dialog.visible = true;
}

function onDel(e: CustomEvent<ITemp>) {
  config.update((v) => {
    const index = v.temps.findIndex((i) => i.key === e.detail.key);
    if (index !== -1) {
      v.temps.splice(index, 1);
    }
    return v;
  });
}

系统内置模板与用户自定义模板通过type字段区分，防止误删除系统模板。

高级使用技巧

字体管理进阶

添加自定义字体

1. 点击字体选择器中的"+"按钮打开字体对话框
2. 选择本地字体文件(支持TTF、OTF格式)
3. 输入字体名称(建议使用英文或拼音)
4. 点击"添加"完成安装

字体冲突解决

当添加同名字体时，系统会保留先安装的版本。如需替换，需先删除已安装字体：

async function replaceFont(name, newPath) {
  await delFont(name);
  await addFont({ name, path: newPath });
}

模板设计最佳实践

响应式模板设计

创建适应不同图片尺寸的模板：

字体大小计算公式

根据图片尺寸动态调整字体大小：

function calculateFontSize(imageWidth, baseSize = 12) {
  return Math.max(baseSize, Math.floor(imageWidth / 30));
}

二次开发指南

扩展字体格式支持

当前系统支持TTF和OTF格式，可通过修改web/util/util.ts中的importFont函数添加WOFF支持：

export async function importFont(arr: IFontInfo[]) {
  // 现有代码...
  
  // 添加WOFF支持
  const font = new FontFace(i.name, `url('${i.path}') format('woff')`);
  
  // 现有代码...
}

自定义LOGO渲染逻辑

通过重写calcAverageBrightness函数实现智能亮度适配：

export const calcAverageBrightness = (ctx, width, height) => {
  // 现有代码...
  
  // 根据亮度返回推荐文字颜色
  return {
    brightness: totalBrightness / (width * height),
    recommendedColor: totalBrightness > 127 ? '#000000' : '#FFFFFF'
  };
};

常见问题解决

LOGO不显示问题排查

1. 检查LOGO资源是否正确加载：

   logoList.subscribe(list => {
     console.log('Loaded logos:', list.length);
   });
   

2. 确认字体是否加载成功：

   console.log('Loaded fonts:', document.fonts.size);
   

3. 检查模板配置是否正确应用：

   config.subscribe(cfg => {
     console.log('Active template:', cfg.temps.find(t => t.use));
   });
   

性能优化建议

对于大量LOGO和字体，建议实现懒加载：

function lazyLoadFonts(fonts, priorityList) {
  // 优先加载常用字体
  const criticalFonts = fonts.filter(f => priorityList.includes(f.name));
  const nonCriticalFonts = fonts.filter(f => !priorityList.includes(f.name));
  
  // 先加载关键字体
  importFont(criticalFonts).then(() => {
    // 延迟加载其他字体
    setTimeout(() => importFont(nonCriticalFonts), 2000);
  });
}

总结与展望

Yiyin相机的LOGO自定义功能通过模块化设计实现了高度的灵活性与可扩展性，既满足普通用户的简单操作需求，又为高级用户和开发者提供了充足的定制空间。未来版本可能会加入的功能：

1. LOGO动画效果支持
2. 多语言字体自动适配
3. 社区模板分享功能

掌握这些知识后，你不仅能高效使用该功能，还能根据实际需求进行个性化定制与二次开发，让每一张照片都彰显独特风格。

【免费下载链接】yiyin 一款照片水印添加工具 项目地址: https://gitcode.com/gh_mirrors/yi/yiyin