Skip to content

Commit

Permalink
feat: 抽离字体hooks
Browse files Browse the repository at this point in the history
  • Loading branch information
Qiu-Jun committed Mar 24, 2024
1 parent 4844c94 commit f13eb11
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 62 deletions.
39 changes: 9 additions & 30 deletions src/components/attribute.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<div class="flex-item">
<div class="left font-selector">
<Select v-model="fontAttr.fontFamily" @on-change="changeFontFamily">
<Option v-for="item in fontFamilyList" :value="item.name" :key="`font-${item.name}`">
<Option v-for="item in fontsList" :value="item.name" :key="`font-${item.name}`">
<div class="font-item" v-if="!item.preview">{{ item.name }}</div>
<div class="font-item" v-else :style="`background-image:url('${item.preview}');`">
{{ !item.preview ? item : '' }}
Expand Down Expand Up @@ -299,18 +299,16 @@
</template>

<script setup name="AttrBute">
import fontList from '@/assets/fonts/font';
import useSelect from '@/hooks/select';
import FontFaceObserver from 'fontfaceobserver';
import colorSelector from '@/components/colorSelector.vue';
import axios from 'axios';
import { getPolygonVertices } from '@/utils/math';
import InputNumber from '@/components/inputNumber';
import { Spin } from 'view-ui-plus';
import { useFont } from '@/hooks';
const { fontsList, loadFont } = useFont();
const event = inject('event');
const update = getCurrentInstance();
const repoSrc = import.meta.env.APP_REPO;
const { fabric, mixinState, canvasEditor } = useSelect();
// 通用元素
const baseType = [
Expand Down Expand Up @@ -362,8 +360,6 @@ const fontAttr = reactive({
linethrough: false,
overline: false,
});
// 字体下拉列表
const fontFamilyList = ref([...fontList]);
const strokeDashList = [
{
value: {
Expand Down Expand Up @@ -447,15 +443,6 @@ const textAlignListSvg = [
'<svg t="1650441519862" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3854" width="18" height="18"><path d="M454.4 283.733333v-57.6c0-8.533333 2.133333-14.933333 8.533333-19.2 6.4-6.4 12.8-8.533333 19.2-8.533333h341.333334c8.533333 0 14.933333 2.133333 19.2 8.533333 6.4 6.4 8.533333 12.8 8.533333 19.2v57.6c0 8.533333-2.133333 14.933333-8.533333 19.2-6.4 6.4-12.8 8.533333-19.2 8.533334h-341.333334c-8.533333 0-14.933333-2.133333-19.2-8.533334-4.266667-4.266667-8.533333-10.666667-8.533333-19.2z m-226.133333 170.666667v-57.6c0-8.533333 2.133333-14.933333 8.533333-19.2 6.4-6.4 12.8-8.533333 19.2-8.533333h569.6c8.533333 0 14.933333 2.133333 19.2 8.533333 6.4 6.4 8.533333 12.8 8.533333 19.2v57.6c0 8.533333-2.133333 14.933333-8.533333 19.2-6.4 6.4-12.8 8.533333-19.2 8.533333H256c-8.533333 0-14.933333-2.133333-19.2-8.533333-6.4-4.266667-8.533333-10.666667-8.533333-19.2z m113.066666 170.666667v-57.6c0-8.533333 2.133333-14.933333 8.533334-19.2 6.4-6.4 12.8-8.533333 19.2-8.533334h454.4c8.533333 0 14.933333 2.133333 19.2 8.533334 6.4 6.4 8.533333 12.8 8.533333 19.2v57.6c0 8.533333-2.133333 14.933333-8.533333 19.2-6.4 6.4-12.8 8.533333-19.2 8.533333h-454.4c-8.533333 0-14.933333-2.133333-19.2-8.533333-6.4-4.266667-8.533333-10.666667-8.533334-19.2z m-170.666666 170.666666v-57.6c0-8.533333 2.133333-14.933333 8.533333-19.2 6.4-6.4 12.8-8.533333 19.2-8.533333h625.066667c8.533333 0 14.933333 2.133333 19.2 8.533333 6.4 6.4 8.533333 12.8 8.533333 19.2v57.6c0 8.533333-2.133333 14.933333-8.533333 19.2-6.4 6.4-12.8 8.533333-19.2 8.533334h-625.066667c-8.533333 0-14.933333-2.133333-19.2-8.533334-6.4-4.266667-8.533333-10.666667-8.533333-19.2z" p-id="3855"></path></svg>',
];
const getFreeFontList = () => {
axios.get(`${repoSrc}/font/free-font.json`).then((res) => {
fontFamilyList.value = [
...fontFamilyList.value,
...Object.entries(res.data).map(([, value]) => value),
];
});
};
const getObjectAttr = (e) => {
const activeObject = canvasEditor.canvas.getActiveObject();
// 不是当前obj,跳过
Expand Down Expand Up @@ -498,15 +485,14 @@ const selectCancel = () => {
const init = () => {
// 获取字体数据
getFreeFontList();
event.on('selectCancel', selectCancel);
event.on('selectOne', getObjectAttr);
canvasEditor.canvas.on('object:modified', getObjectAttr);
};
// 修改字体
const changeFontFamily = (fontName) => {
const changeFontFamily = async (fontName) => {
if (!fontName) return;
// 跳过加载的属性;
const skipFonts = ['arial', 'Microsoft YaHei'];
Expand All @@ -518,18 +504,11 @@ const changeFontFamily = (fontName) => {
}
Spin.show();
// 字体加载
const font = new FontFaceObserver(fontName);
font
.load(null, 150000)
.then(() => {
const activeObject = canvasEditor.canvas.getActiveObjects()[0];
activeObject && activeObject.set('fontFamily', fontName);
canvasEditor.canvas.renderAll();
Spin.hide();
})
.catch(() => {
Spin.hide();
});
if (await loadFont(fontName)) {
const activeObject = canvasEditor.canvas.getActiveObjects()[0];
activeObject && activeObject.set('fontFamily', fontName);
canvasEditor.canvas.renderAll();
}
};
// 通用属性改变
Expand Down
38 changes: 6 additions & 32 deletions src/components/waterMark.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* @Description:
* @Date: 2023-11-01 11:54:10
* @LastEditors: June
* @LastEditTime: 2024-03-17 12:41:08
* @LastEditTime: 2024-03-24 11:01:30
-->
<template>
<Button type="text" @click="addWaterMark">
Expand All @@ -29,7 +29,7 @@
<div class="setting-item font-selector">
<span class="mr-10px">选择字体</span>
<Select class="w-320" v-model="waterMarkState.fontFamily" @on-change="changeFontFamily">
<Option v-for="item in fontFamilyList" :value="item.name" :key="`font-${item.name}`">
<Option v-for="item in fontsList" :value="item.name" :key="`font-${item.name}`">
<div class="font-item" v-if="!item.preview">{{ item.name }}</div>
<div class="font-item" v-else :style="`background-image:url('${item.preview}');`">
{{ !item.preview ? item : '' }}
Expand Down Expand Up @@ -70,15 +70,12 @@

<script name="WaterMark" lang="ts" setup>
import { debounce } from 'lodash-es';
import FontFaceObserver from 'fontfaceobserver';
import useSelect from '@/hooks/select';
import fontList from '@/assets/fonts/font';
import axios from 'axios';
import { Spin, Message } from 'view-ui-plus';
import { useFont } from '@/hooks';
import { Message } from 'view-ui-plus';
const repoSrc = import.meta.env.APP_REPO;
const { fontsList, loadFont } = useFont();
const { canvasEditor }: any = useSelect();
const fontFamilyList = ref([...fontList]);
const waterMarkState = reactive({
text: '',
size: 24,
Expand Down Expand Up @@ -215,37 +212,14 @@ const onModalOk = () => {
onMadalCancel();
};
// 修改字体
const getFreeFontList = () => {
axios.get(`${repoSrc}/font/free-font.json`).then((res) => {
fontFamilyList.value = [
...fontFamilyList.value,
...Object.entries(res.data).map(([, value]) => value),
];
});
};
const changeFontFamily = (fontName: string) => {
if (!fontName) return;
Spin.show();
const font = new FontFaceObserver(fontName);
font
.load(null, 150000)
.then(() => {
Message.success('字体加载成功');
Spin.hide();
console.log('字体加载成功');
})
.catch(() => {
Message.error('字体加载失败');
Spin.hide();
});
loadFont(fontName);
};
const addWaterMark = debounce(function () {
showWaterMadal.value = true;
}, 250);
onMounted(getFreeFontList);
</script>

<style lang="less" scoped>
Expand Down
8 changes: 8 additions & 0 deletions src/hooks/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/*
* @Author: June
* @Description: hooks manage
* @Date: 2024-03-24 10:42:31
* @LastEditors: June
* @LastEditTime: 2024-03-24 10:53:24
*/
export * from './useFont/index';
53 changes: 53 additions & 0 deletions src/hooks/useFont/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/*
* @Author: June
* @Description: 获取免费字体
* @Date: 2024-03-24 10:19:05
* @LastEditors: June
* @LastEditTime: 2024-03-24 11:00:31
*/
import FontFaceObserver from 'fontfaceobserver';
import fontList from '@/assets/fonts/font';
import axios from 'axios';
import { Spin, Message } from 'view-ui-plus';

const repoSrc = import.meta.env.APP_REPO;

const _fontList = ref<any[]>([]);

export function useFont() {
const initFont = () => {
if (unref(_fontList).length > 0) return;
axios.get(`${repoSrc}/font/free-font.json`).then((res) => {
_fontList.value = [...Object.entries(res.data).map(([, value]) => value)];
});
};

const fontsList = computed(() => [...fontList, ...unref(_fontList)]);

const loadFont = (fontName: string) => {
if (!fontName) return false;
return new Promise((resolve: any) => {
Spin.show();
const font = new FontFaceObserver(fontName);
font
.load(null, 150000)
.then(() => {
Message.success('字体加载成功');
Spin.hide();
resolve(true);
})
.catch(() => {
Message.error('字体加载失败');
Spin.hide();
resolve(false);
});
});
};

onMounted(initFont);
return {
initFont,
fontsList,
loadFont,
};
}

0 comments on commit f13eb11

Please sign in to comment.