画布选择图片改为多选
This commit is contained in:
@@ -2106,7 +2106,7 @@ textarea:focus {
|
|||||||
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item .upload_file_item,
|
.generalMenu_printModel_upload .input_border .input_box_btnBox .upload_item .upload_file_item,
|
||||||
.generate .input_border .input_box_btnBox .upload_item .upload_file_item {
|
.generate .input_border .input_box_btnBox .upload_item .upload_file_item {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 1rem;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
height: 4.7rem;
|
height: 4.7rem;
|
||||||
@@ -2207,7 +2207,7 @@ textarea:focus {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 4rem;
|
width: 3rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
min-height: 3rem;
|
min-height: 3rem;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|||||||
@@ -2105,7 +2105,7 @@ textarea:focus{
|
|||||||
width: 4.7rem;
|
width: 4.7rem;
|
||||||
.upload_file_item{
|
.upload_file_item{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 1rem;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
height: 4.7rem;
|
height: 4.7rem;
|
||||||
@@ -2150,7 +2150,7 @@ textarea:focus{
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all .3s;
|
transition: all .3s;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 4rem;
|
width: 3rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
|||||||
@@ -340,7 +340,7 @@ onMounted(async () => {
|
|||||||
props.redGreenImageUrl
|
props.redGreenImageUrl
|
||||||
) {
|
) {
|
||||||
canvasManager.canvas.fill = "#fff"; // 设置画布背景色为白色 // 初始化红绿图模式管理器
|
canvasManager.canvas.fill = "#fff"; // 设置画布背景色为白色 // 初始化红绿图模式管理器
|
||||||
redGreenModeManager = new toolManagerRedGreenModeManager({
|
redGreenModeManager = new RedGreenModeManager({
|
||||||
canvas: canvasManager.canvas,
|
canvas: canvasManager.canvas,
|
||||||
canvasManager,
|
canvasManager,
|
||||||
layerManager,
|
layerManager,
|
||||||
|
|||||||
@@ -56,6 +56,9 @@
|
|||||||
<span class="image-name">{{ item.name || "未命名" }}</span>
|
<span class="image-name">{{ item.name || "未命名" }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="image-select" v-show="selectList.includes(item.url)">
|
||||||
|
<i class="fi fi-sr-check-circle"></i>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -70,6 +73,7 @@
|
|||||||
<div class="image-count">
|
<div class="image-count">
|
||||||
{{ $t("Canvas.general") }} {{ filteredImages.length }} {{ $t("Canvas.PicturesInTotal") }}
|
{{ $t("Canvas.general") }} {{ filteredImages.length }} {{ $t("Canvas.PicturesInTotal") }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="image-submit gallery_btn" @click="confirm">{{ $t("Canvas.confirm") }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -103,6 +107,7 @@ const emits = defineEmits(["select"]);
|
|||||||
// 响应式数据
|
// 响应式数据
|
||||||
const showPanel = ref(false);
|
const showPanel = ref(false);
|
||||||
const selectedCategory = ref(t("Canvas.all"));
|
const selectedCategory = ref(t("Canvas.all"));
|
||||||
|
const selectList = ref([])
|
||||||
|
|
||||||
// 计算属性:获取所有分类
|
// 计算属性:获取所有分类
|
||||||
const categories = computed(() => {
|
const categories = computed(() => {
|
||||||
@@ -152,8 +157,12 @@ const filteredImages = computed(() => {
|
|||||||
|
|
||||||
// 处理图片点击
|
// 处理图片点击
|
||||||
const handleImageClick = (item) => {
|
const handleImageClick = (item) => {
|
||||||
emits("select", item);
|
// 已选中,取消选中
|
||||||
showPanel.value = false;
|
if(selectList.value.includes(item.url)){
|
||||||
|
selectList.value = selectList.value.filter(url => url !== item.url)
|
||||||
|
}else{
|
||||||
|
selectList.value.push(item.url)
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 处理图片加载错误
|
// 处理图片加载错误
|
||||||
@@ -162,6 +171,12 @@ const handleImageError = (event) => {
|
|||||||
"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjVmNWY1Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPuWbvueJh+WKoOi9veWksei0pe+8jOivt+ajgOafpeWbvueJh+i3r+W+hDwvdGV4dD48L3N2Zz4=";
|
"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjVmNWY1Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCwgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPuWbvueJh+WKoOi9veWksei0pe+8jOivt+ajgOafpeWbvueJh+i3r+W+hDwvdGV4dD48L3N2Zz4=";
|
||||||
event.target.alt = "图片加载失败";
|
event.target.alt = "图片加载失败";
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//提交选中的T图片
|
||||||
|
const confirm = ()=>{
|
||||||
|
emits("select", selectList.value);
|
||||||
|
showPanel.value = false;
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
@@ -368,10 +383,11 @@ const handleImageError = (event) => {
|
|||||||
.image-item {
|
.image-item {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
overflow: hidden;
|
// overflow: hidden;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.05);
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
transform: translateY(-4px);
|
transform: translateY(-4px);
|
||||||
@@ -414,6 +430,17 @@ const handleImageError = (event) => {
|
|||||||
transition: opacity 0.2s ease;
|
transition: opacity 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.image-select{
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 2;
|
||||||
|
transform: translate(50%,50%);
|
||||||
|
i{
|
||||||
|
font-size: 2.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.image-name {
|
.image-name {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|||||||
@@ -19,10 +19,6 @@
|
|||||||
|
|
||||||
<template #customToolsBottom="{ toolButtonProps }">
|
<template #customToolsBottom="{ toolButtonProps }">
|
||||||
<!-- 也可以直接使用普通的按钮 -->
|
<!-- 也可以直接使用普通的按钮 -->
|
||||||
<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" @click="editFront('redGreenExample')">
|
|
||||||
<i class="fi fi-sr-layers"></i>
|
|
||||||
<div class="tool-tooltip">{{ $t('Canvas.editFrontBack') }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" style="margin-top: auto;" @click="editFront('redGreenExample')">
|
<div class="custom-tool-btn" :class="{active:currentView === 'redGreenExample'}" style="margin-top: auto;" @click="editFront('redGreenExample')">
|
||||||
<SvgIcon name="CHelp" size="30" />
|
<SvgIcon name="CHelp" size="30" />
|
||||||
<div class="tool-tooltip">{{ $t('Canvas.help') }}</div>
|
<div class="tool-tooltip">{{ $t('Canvas.help') }}</div>
|
||||||
|
|||||||
@@ -50,6 +50,7 @@
|
|||||||
@paste="onPaste"
|
@paste="onPaste"
|
||||||
|
|
||||||
></textarea>
|
></textarea>
|
||||||
|
<i class="fi fi-rr-followcollection"></i>
|
||||||
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
|
<i class="fi fi-br-upload" :class="{ Guide_1_2_6:type_.type2 == 'Printboard'}" :title="$t('Generate.uploadTitle')" v-show="!isTextarea && upload.level1Type !== 'Moodboard' && scene?.value != 'Slogan' && scene?.value != 'Logo'">
|
||||||
<a-upload
|
<a-upload
|
||||||
class="search_upImg"
|
class="search_upImg"
|
||||||
|
|||||||
@@ -295,15 +295,17 @@ export default defineComponent({
|
|||||||
})
|
})
|
||||||
let obj = {
|
let obj = {
|
||||||
value:'mannquin',
|
value:'mannquin',
|
||||||
type:'Mannquin',
|
type:data.locale == "ENGLISH"?'Mannquin':'模特',
|
||||||
imgList:list
|
imgList:list
|
||||||
}
|
}
|
||||||
if(list.length > 0){
|
if(list.length > 0){
|
||||||
data.canvasSelectList.push(obj)
|
data.canvasSelectList.push(obj)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
const handleImageSelect = (value:any)=>{
|
const handleImageSelect = (list:any)=>{
|
||||||
dataDom.editCanvas.addImageToLayer(value.url)
|
list.forEach(item => {
|
||||||
|
dataDom.editCanvas.addImageToLayer(item)
|
||||||
|
});
|
||||||
}
|
}
|
||||||
const saveCanvas = ()=>{
|
const saveCanvas = ()=>{
|
||||||
let canvasJSON = dataDom.editCanvas.getJSON()
|
let canvasJSON = dataDom.editCanvas.getJSON()
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<div class="titleText">{{$t('Habit.generationSetting')}}</div>
|
<div class="titleText">{{$t('Habit.generationSetting')}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="projectName marginBottom" v-if="show.title">
|
<div class="projectName marginBottom" v-if="show.title">
|
||||||
<div class="text">{{$t('Habit.ProjectName')}}: <span style="color: red;">*</span></div>
|
<div class="text">{{$t('Habit.ProjectName')}}: </div>
|
||||||
<div class="input">
|
<div class="input">
|
||||||
<input type="text" v-model="selectObject.name">
|
<input type="text" v-model="selectObject.name">
|
||||||
</div>
|
</div>
|
||||||
@@ -196,10 +196,10 @@ export default defineComponent({
|
|||||||
return `${value}%`;
|
return `${value}%`;
|
||||||
}
|
}
|
||||||
const complete = ()=>{
|
const complete = ()=>{
|
||||||
if(!data.selectObject.name){
|
// if(!data.selectObject.name){
|
||||||
message.info(t('PrintboardUpload.jsContent7'))
|
// message.info(t('PrintboardUpload.jsContent7'))
|
||||||
return
|
// return
|
||||||
}
|
// }
|
||||||
console.log(data.selectObject)
|
console.log(data.selectObject)
|
||||||
let value = {
|
let value = {
|
||||||
name:data.selectObject.name,
|
name:data.selectObject.name,
|
||||||
|
|||||||
@@ -1282,6 +1282,7 @@ export default {
|
|||||||
editFrontBack:'编辑服装前片后片',
|
editFrontBack:'编辑服装前片后片',
|
||||||
help:'帮助',
|
help:'帮助',
|
||||||
back:'返回',
|
back:'返回',
|
||||||
|
confirm:'确定',
|
||||||
},
|
},
|
||||||
speedList:{
|
speedList:{
|
||||||
High:'高级',
|
High:'高级',
|
||||||
|
|||||||
@@ -1284,6 +1284,7 @@ export default {
|
|||||||
editFrontBack:'Edit the front and back sections',
|
editFrontBack:'Edit the front and back sections',
|
||||||
help:'Help',
|
help:'Help',
|
||||||
back:'Back',
|
back:'Back',
|
||||||
|
confirm:'Confirm',
|
||||||
},
|
},
|
||||||
speedList:{
|
speedList:{
|
||||||
High:'High',
|
High:'High',
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<!-- <span>AiDA</span> -->
|
<!-- <span>AiDA</span> -->
|
||||||
<img src="@/assets/images/homePage/aidaIcon.png" alt="">
|
<img src="@/assets/images/homePage/aidaIcon.png" alt="" @click="()=>$router.push('/home')">
|
||||||
<svg @click="()=>leftShow=!leftShow" class="leftShowOrHide" xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 24 24" data-v-1c7326d6=""><path fill-rule="evenodd" d="M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2V5H6Zm4 0v14h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-8ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z" clip-rule="evenodd" data-v-1c7326d6=""></path></svg>
|
<svg @click="()=>leftShow=!leftShow" class="leftShowOrHide" xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" viewBox="0 0 24 24" data-v-1c7326d6=""><path fill-rule="evenodd" d="M6 5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2V5H6Zm4 0v14h8a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-8ZM3 6a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6Z" clip-rule="evenodd" data-v-1c7326d6=""></path></svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="newObj" @click="newProject">
|
<div class="newObj" @click="newProject">
|
||||||
@@ -1437,6 +1437,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
> img{
|
> img{
|
||||||
width: 2.7rem;
|
width: 2.7rem;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
> svg{
|
> svg{
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
Reference in New Issue
Block a user