Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature: 增加单位选择px cm mm，补全modal的国际化文件 #419

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+242 −22
Open

feature: 增加单位选择px cm mm，补全modal的国际化文件 #419

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 129 additions & 13 deletions src/components/common/modalSzie.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,27 @@
-->

<template>
<Modal v-model="modal" :title="props.title" footer-hide>
<Modal v-model="modal" :title="props.title" footer-hide :before-close="resetUnit">
<h3>
{{ $t('importFiles.createDesign.customSize') }}
</h3>
<Form ref="formInline" inline :label-width="40">
<FormItem label="宽度">
<InputNumber v-model="width" :min="1" placeholder="请输入"></InputNumber>
<Form ref="formInline" inline :label-width="46">
<FormItem :label="$t('importFiles.createDesign.width')">
<InputNumber v-model="width" :min="1" placeholder="请输入" :precision="1"></InputNumber>
</FormItem>
<FormItem label="高度">
<InputNumber v-model="height" :min="1" placeholder="请输入"></InputNumber>
<FormItem :label="$t('importFiles.createDesign.height')">
<InputNumber v-model="height" :min="1" placeholder="请输入" :precision="1"></InputNumber>
<Tooltip theme="light">
<template #content>
<UnitMenu v-model="unit" :options="unitList" />
</template>
<div class="unit-select">
<p class="label">
{{ unit }}
</p>
<i class="ivu-icon ivu-icon-ios-arrow-down"></i>
</div>
</Tooltip>
</FormItem>
<FormItem :label-width="0">
<Button type="primary" @click="customSizeCreate">
Expand All @@ -31,10 +42,10 @@
<CellGroup @on-click="setSize">
<Cell
:title="item.name"
:label="`${item.width}x${item.height}${item.unit}`"
:label="`${item._width[unit]}x${item._height[unit]}${unit}`"
:arrow="false"
:key="item.name"
:name="`${item.width}x${item.height}x${item.unit}`"
:name="`${item._width[unit]}x${item._height[unit]}x${unit}`"
v-for="item in sizeList"
>
<template #extra>
Expand All @@ -48,8 +59,12 @@
<script name="ImportJson" setup>
import useSelect from '@/hooks/select';
import { Message } from 'view-ui-plus';
import { useI18n } from 'vue-i18n';
import UnitMenu from '../unitMenu.vue';
import { fabric } from 'fabric';
const { t } = useI18n();
const { canvasEditor } = useSelect();
const emit = defineEmits(['set']);
const emit = defineEmits(['set', 'setUnit']);

const props = defineProps({
title: {
Expand All @@ -62,12 +77,95 @@ const modal = ref(false);
const width = ref(null);
const height = ref(null);
const sizeList = ref([]);
const showSetSize = (w, h) => {
const unit = ref('px');

const unitList = [
{ value: 'px', label: 'px' },
{ value: 'cm', label: 'cm' },
{ value: 'mm', label: 'mm' },
];

/**
* @param value 传入的像素值，{xxx}px
* @param unit 需要转化的单位，默认为mm
* @param fontSize 画布的文字大小，默认fabric.DPI为16
* @returns 返回转化后的值，如果没有匹配到单位则直接去掉原像素的px单位，变成数字
*/
const convertPxToUnit = (value, unit = 'mm', fontSize) => {
const pixels = parseFloat(value);
if (!fontSize) {
fontSize = fabric.Text.DEFAULT_SVG_FONT_SIZE;
}
let convertedValue;
switch (unit) {
case 'mm':
convertedValue = (pixels / fabric.DPI) * 25.4;
break;
case 'cm':
convertedValue = (pixels / fabric.DPI) * 2.54;
break;
case 'in':
convertedValue = pixels / fabric.DPI;
break;
case 'pt':
convertedValue = (pixels / fabric.DPI) * 72;
break;
case 'pc':
convertedValue = ((pixels / fabric.DPI) * 72) / 12;
break;
case 'em':
convertedValue = pixels / fontSize;
break;
default:
convertedValue = pixels;
}
return convertedValue;
};

watch(
() => unit.value,
(newUnit, oldUnit) => {
if (resetTrigger) {
resetTrigger = false;
return;
}
let w = width.value,
h = height.value;
// 先统一转化成px
if (oldUnit !== 'px') {
w = fabric.util.parseUnit(width.value + oldUnit);
h = fabric.util.parseUnit(height.value + oldUnit);
}
width.value = convertPxToUnit(w, newUnit);
height.value = convertPxToUnit(h, newUnit);
}
);

let resetTrigger = false;
const resetUnit = () => {
resetTrigger = true;
unit.value = 'px';
};
const showSetSize = (w, h, u) => {
width.value = w || null;
height.value = h || null;
unit.value = u || 'px';
// 获取素材
canvasEditor.getSizeList().then((res) => {
sizeList.value = res;
sizeList.value = res.map((item) => {
item.unit = unit.value;
item._width = {
px: item.width,
mm: parseInt(convertPxToUnit(item.width, 'mm')),
cm: parseInt(convertPxToUnit(item.width, 'cm')),
};
item._height = {
px: item.height,
mm: parseInt(convertPxToUnit(item.height, 'mm')),
cm: parseInt(convertPxToUnit(item.height, 'cm')),
};
return item;
});
});
modal.value = true;
};
Expand All @@ -79,10 +177,10 @@ const setSize = (itemString) => {

const customSizeCreate = async () => {
if (width.value && height.value) {
emit('set', width.value, height.value);
emit('set', width.value, height.value, unit.value);
modal.value = false;
} else {
Message.warning('请检查尺寸');
Message.warning(t('importFiles.createDesign.checkMsg'));
}
};

Expand All @@ -97,4 +195,22 @@ h3 {
.divider {
margin-top: 0;
}
.unit-select {
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding: 0 8px;
margin-left: 6px;
border-radius: 6px;
border-color: transparent;
background-color: rgba(0, 0, 0, 0);
.label {
min-width: 26px;
text-align: center;
}
&:hover {
background: #0000000a;
}
}
</style>
31 changes: 23 additions & 8 deletions src/components/setSize.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,19 +12,32 @@
<Divider plain orientation="left">
<h4>{{ $t('bgSeting.size') }}</h4>
</Divider>
<Form :label-width="40" inline class="form-wrap">
<Form :label-width="46" inline class="form-wrap">
<FormItem :label="$t('bgSeting.width')" prop="name">
<InputNumber disabled v-model="width" readonly @on-change="setSize"></InputNumber>
<InputNumber
disabled
v-model="width"
readonly
@on-change="setSize"
:precision="1"
></InputNumber>
</FormItem>
<FormItem :label="$t('bgSeting.height')" prop="name">
<InputNumber disabled v-model="height" readonly @on-change="setSize"></InputNumber>
<InputNumber
disabled
v-model="height"
readonly
@on-change="setSize"
:precision="1"
></InputNumber>
</FormItem>
<FormItem :label-width="0">
<Button type="text" @click="showSetSize">
<Icon type="md-create" />
</Button>
{{ unit }}
</FormItem>
</Form>
<Button type="text" @click="showSetSize">
<Icon type="md-create" />
</Button>

<!-- <Divider plain></Divider> -->
<!-- 修改尺寸 -->
Expand All @@ -47,6 +60,7 @@ const modalSizeRef = ref(null);

let width = ref(DefaultSize.width);
let height = ref(DefaultSize.height);
let unit = ref('px');

onMounted(() => {
canvasEditor.setSize(width.value, height.value);
Expand All @@ -61,11 +75,12 @@ const setSize = () => {
};

const showSetSize = () => {
modalSizeRef.value.showSetSize(width.value, height.value);
modalSizeRef.value.showSetSize(width.value, height.value, unit.value);
};
const handleConfirm = (w, h) => {
const handleConfirm = (w, h, u) => {
width.value = w;
height.value = h;
unit.value = u;
setSize();
};
</script>
Expand Down
68 changes: 68 additions & 0 deletions src/components/unitMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!--
* @Author: 余震
* @Date: 2024-06-05 15:03:55
* @LastEditors: 余震
* @LastEditTime: 2024-06-05 15:03:55
* @Description: 单位选择
-->

<template>
<div class="unit-menu-list">
<div
class="unit-menu-item"
:class="{ active: item.value === modelValue }"
v-for="item in options"
:key="item.value"
@click="handleClick(item.value)"
>
<div>{{ item.label }}</div>
<i v-if="item.value === modelValue" class="ivu-icon ivu-icon-ios-checkmark"></i>
</div>
</div>
</template>

<script name="UnitMenu" setup>
defineProps({
modelValue: {
type: String,
default: '',
},
options: {
type: Array,
default: () => [],
},
});

const emits = defineEmits(['update:modelValue']);
const handleClick = (val) => {
emits('update:modelValue', val);
};
</script>
<style scoped lang="less">
.unit-menu-list {
display: flex;
flex-direction: column;
font-size: 16px;
.unit-menu-item {
cursor: pointer;
padding: 10px 6px;
width: 100px;
display: flex;
align-items: center;
justify-content: space-between;
color: #222529;
font-weight: 400;
line-height: 20px;
white-space: nowrap;
position: relative;
cursor: pointer;
border-radius: 8px;
}
.active {
font-weight: 600;
}
.ivu-icon-ios-checkmark {
font-weight: 600;
}
}
</style>
20 changes: 20 additions & 0 deletions src/language/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,29 @@
"please_choose": "Please choose",
"string": "string",
"file": "file",
"importFiles": {
"file": "File",
"createDesign": {
"title": "Create template",
"customSize": "Custom Size",
"systemSize": "Recommend Size",
"width": "Width",
"height": "Height",
"create": "OK",
"checkMsg": "Please, check size"
},
"importFiles": "Import files"
},
"import_files": "Import files",
"select_json": "Select JSON",
"repleaceImg": "repleace Image",
"bgSeting": {
"size": "Size",
"color": "Color",
"colorMacthing": "Background",
"width": "Width",
"height": "Height"
},
"waterMark": {
"text": "WaterMark",
"modalTitle": "WaterMark Setting",
Expand Down
3 changes: 2 additions & 1 deletion src/language/zh.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,8 @@
"systemSize": "系统推荐尺寸",
"width": "宽度",
"height": "高度",
"create": "确定"
"create": "确定",
"checkMsg": "请检查尺寸"
},
"importFiles": "导入文件"
},
Expand Down
Loading