aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整detail拉伸sketch但是编辑印花和画布使用的sketch不受影响

Browse Source
This commit is contained in:
X1627315083
2025-09-22 10:29:27 +08:00
parent a1bbc2d166
commit ddcad3c391
24 changed files with 234 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/component/Detail/DesignDetail.vue
View File

@@ -213,6 +213,7 @@ export default defineComponent({
setRevocation()
detailData.loadingShow = false
if(rv.singleOverall == "single"){
console.log(rv.clothes)
store.commit('DesignDetail/setDesignColthes',rv.clothes[0].id)
}
@@ -521,7 +522,7 @@ export default defineComponent({
</script>
<style lang="less" scoped>
:deep(.detailText){
font-size: 1.8rem;
font-size: 1.6rem;
font-weight: 600;
}
@@ -566,6 +567,7 @@ export default defineComponent({
overflow: hidden;
&.detailLeft{
width: 34rem;
// width: 34rem;
display: flex;
flex-direction: column;
}

48
src/component/Detail/canvas/index.vue
View File

@@ -185,12 +185,55 @@ export default defineComponent({
img.src = url
})
}
const resizeImageWithNativeCanvas = async (image1Url, imageBUrl)=>{
try {
// 加载第一张图片获取尺寸
const img1 = await loadImage(image1Url);
const targetWidth = img1.naturalWidth;
const targetHeight = img1.naturalHeight;
// 加载第二张图片
const imgB = await loadImage(imageBUrl);
// 创建canvas元素
const canvas = document.createElement('canvas');
canvas.width = targetWidth;
canvas.height = targetHeight;
const ctx = canvas.getContext('2d');
// 绘制调整尺寸后的图片
ctx.drawImage(imgB, 0, 0, targetWidth, targetHeight);
// 导出base64
const base64 = canvas.toDataURL('image/png', 1);
return base64;
} catch (error) {
console.error('处理图片时出错:', error);
throw error;
}
}
// 图片加载辅助函数
const loadImage = (url)=>{
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'anonymous';
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
});
}
const frontBackChange = (value:any)=>{
let full = detailData.frontBack.front[detailData.imgDomIndex].undividedLayer || detailData.selectDetail.path
let size = {
...detailData.canvasConfig,
}
segmentImage(value,full,size).then((rv)=>{
segmentImage(value,full,size).then(async (rv)=>{
let front = detailData.frontBack.front[detailData.imgDomIndex]
let back = detailData.frontBack.back[detailData.imgDomIndex]
if(!front?.oldImageUrl)front.oldImageUrl = front.imageUrl
@@ -199,7 +242,8 @@ export default defineComponent({
if(!front?.oldMaskUrl)store.commit('DesignDetail/updataDetailItem',{maskUrl:front.oldMaskUrl})
front.imageUrl = rv.targetFrontUrl
front.maskUrl = value
let base64 = await resizeImageWithNativeCanvas(front.oldMaskUrl,value)
front.maskUrl = base64
back.imageUrl = rv.targetBackUrl
store.commit('DesignDetail/updataDetailItem',{maskUrl:value})
})

28
src/component/Detail/detailRight/editPrintElement.vue
View File

@@ -143,7 +143,7 @@ export default defineComponent({
sketchWH:{
width:0,
height:0,
scale:0,
scale:[1,1],
},
loadingShow:false,
printElementList:null as any,
@@ -187,8 +187,8 @@ export default defineComponent({
let scale = [width / editPrintElementData.sketchWH.width,height]
let sketchW = editPrintElementData.sketchWH.width * editPrintElementData.sketchWH.scale
let sketchH = editPrintElementData.sketchWH.height * editPrintElementData.sketchWH.scale
let sketchW = editPrintElementData.sketchWH.width * editPrintElementData.sketchWH.scale[0]
let sketchH = editPrintElementData.sketchWH.height * editPrintElementData.sketchWH.scale[1]
let x = sketchW / 2 - (sketchW * (width / editPrintElementData.sketchWH.width)/2)
let y = sketchH / 2 -(sketchH * height/2)
if(!editPrintElementData.stateOverallSingle == 'single'){
@@ -226,12 +226,12 @@ export default defineComponent({
let style = item.pattern.style
let sketchWH = editPrintElementData.sketchWH.scale
if(item.ifSingle){
scale = [style.width.replace(/px/g,'')/editPrintElementData.sketchWH.width,(style.height.replace(/px/g,'')/editPrintElementData.sketchWH.height)]
location = [style.left.replace(/px/g,'')*sketchWH,style.top.replace(/px/g,'')*sketchWH]
scale = [style.width.replace(/px/g,'')/(editPrintElementData.sketchWH.width),(style.height.replace(/px/g,'')/(editPrintElementData.sketchWH.height))]
location = [style.left.replace(/px/g,'')*sketchWH[0],style.top.replace(/px/g,'')*sketchWH[1]]
}else{
let x = Number(style.left.replace(/px/g,''))
let y = Number(style.top.replace(/px/g,''))
location = [(x*sketchWH) ,(y*sketchWH)]
location = [(x*sketchWH[0]) ,(y*sketchWH[1])]
scale =[ editPrintElementData.systemDesignerPercentage/100, editPrintElementData.systemDesignerPercentage/100]
// scale = [item.pattern.style.width/item.pattern.style.height,item.pattern.style.height/item.pattern.style.width]
// location = [item.pattern.style.left,item.pattern.style.top]
@@ -283,13 +283,13 @@ export default defineComponent({
if(item.ifSingle){
//single
left = item.location[0] / editPrintElementData.sketchWH.scale
top = item.location[1] / editPrintElementData.sketchWH.scale
left = item.location[0] / editPrintElementData.sketchWH.scale[0]
top = item.location[1] / editPrintElementData.sketchWH.scale[1]
}else{
//overall
editPrintElementData.systemDesignerPercentage = item.scale[0]*1000
left = item.location[0] / editPrintElementData.sketchWH.scale
top = item.location[1] / editPrintElementData.sketchWH.scale
left = item.location[0] / editPrintElementData.sketchWH.scale[0]
top = item.location[1] / editPrintElementData.sketchWH.scale[1]
editPrintElementData.systemDesignerPercentage = item.scale?.[0]?item.scale[0]*100:30
}
let pattern = {
@@ -322,11 +322,15 @@ export default defineComponent({
nextTick(()=>{
let img = new Image
img.onload = ()=>{
let scale = img.width / editPrintElementDom.sketchImg.offsetWidth
// let sketchScale = editPrintElementData.selectDetail.layersObject[0].scale
let sketchScale = [1,1]
let scaleX = img.width * sketchScale[0] / editPrintElementDom.sketchImg.offsetWidth
let scaleY = img.height * sketchScale[1] / editPrintElementDom.sketchImg.offsetHeight
editPrintElementData.sketchWH = {
width:editPrintElementDom.sketchImg.offsetWidth,
height:editPrintElementDom.sketchImg.offsetHeight,
scale,
scale:[scaleX,scaleY],
}
if(!editPrintElementData.selectDetail.printObject.prints)return
let state = true

17
src/component/Detail/model/modelNav.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="modelNavBox" :class="{'modelNavBox_active':designDetail.clothes.length == 5}">
<div class="modelNavBox" ref="modelNavBox" :class="{'modelNavBox_active':designDetail.clothes.length == 5}">
<div class="modelNav" ref="modelNav" :style="{height:prentHeight}">
<div class="modelNav_item item"
v-for="item,index in designDetail.clothes"
@@ -45,6 +45,7 @@ export default defineComponent({
singleOveral:inject('singleOveral') as any,
getCanvasIfEdit:inject('getCanvasIfEdit')as any,
modelNav:null as any,
modelNavBox:null as any,
})
const collItemSize = reactive({
collValue:18,
@@ -237,12 +238,18 @@ export default defineComponent({
collItemSize.prentHeight = (collItemSize.padding + remValue) * elArr.length + 'px'
moveItem()
}
let observers = null as any
onMounted(()=>{
observers = new ResizeObserver(entries => {
for (let entry of entries) {
setItemPosition()
}
});
observers.observe(detailData.modelNavBox);
})
onBeforeUnmount(()=>{
observers.disconnect();
})
// onBeforeUnmount(()=>{
// detailData.selectIndex = -1
// })
return{
...toRefs(detailData),
...toRefs(collItemSize),

5
src/component/Detail/model/modelPosition.vue
View File

@@ -83,7 +83,10 @@ export default defineComponent({
if(!detailData.frontBack?.body?.path || !dom)return
img.onload = () => {
if(!detailData.selectDetail?.id){
store.commit('DesignDetail/setDesignColthes',detailData.designDetail.clothes[0].id)
let item = detailData.designDetail.clothes.reduce((max, current) => {
return current.priority > max.priority ? current : max;
});
store.commit('DesignDetail/setDesignColthes',item.id)
}
// resolve(img)
sacle = dom.parentNode.offsetWidth / img.width