@@ -0,0 +1,705 @@
< template >
< div class = "molepositon" :class = "{active:!imgDesignImg}" >
< div class = "designOpenrtion_imgMask" v-if = "frontBack?.body?.path" :style="frontBack?.body?.style" >
< div class = "designOpenrtion_print" v-for = "item,index in frontBack.back" :style="frontBack.front[index].style" >
< img :style = "item.imageUrl?'':'display:none;'" :src = "item.imageUrl" alt = "" >
< / div >
< img class = "perview_img" @load ="setPrintSize()" ref = "detailBody" :key = "designDetail.designItemId" :src = "frontBack?.body?.path" : style = "'width:'+ frontBack?.body?.layersObject?.[0].imageSize?.[0] +';height:' + frontBack?.body?.layersObject?.[0].imageSize?.[0] +';'" >
<!-- < div class = "detail_modal_item_front" ref = "target" v-for = "item,index in frontBack.front" @mousedown.stop="itemMoveMousedown(index,getMousePosition($event,false))" @touchstart.passive="itemMoveMousedown(index,getMousePosition($event,true))" @click="setpitch(item,index)" :style="item.style" >
< img :src = "item.imageUrl" alt = "" >
< / div > -- >
< div class = "detail_modal_item_front" : ref = "el => { setElementRef(el, index) }" v-for = "item,index in frontBack.front" :class="{'active':item.id == selectDetail?.id}" :style="item.style" >
< img :src = "item.imageUrl" alt = "" >
< / div >
< div ref = "moveableContainer" class = "moveableContainer" > < / div >
< / div >
< div class = "designOpenrtion_imgMask" v-if = "!frontBack?.body?.path" >
< div class = "designOpenrtion_print" >
< img v-if = "frontBack.back?.[0].imageUrl" :src="frontBack.back?.[0].imageUrl" style="object-fit: cover;" alt="" >
< / div >
< div class = "detail_modal_item_front" style = "position: relative;" >
< img : src = "frontBack.front?.[0].imageUrl || selectDetail?.path" style = "object-fit: cover;" alt = "" >
< / div >
<!-- < img @load ="setSelectSketch()" : src = "designDetail?.currentFullBodyView || selectDetail?.undividedLayer" style = "object-fit: cover;" alt = "" > -- >
< / div >
< / div >
< div class = "molepositon imgDesignImg" :class = "{active:imgDesignImg}" >
< div class = "designOpenrtion_imgMask" style = "width: 100%;height: 100%;" >
< div class = "detail_modal_item_front" >
< img
style = "object-fit: cover;"
: style = "observerWH.width == '0px'?{width:observerWH.width+'px',height:observerWH.height+'px'}:{'object-fit': 'contain'}"
:src = "designDetail.designItemUrl" alt = "" >
< / div >
< / div >
< / div >
< / template >
< script lang = "ts" >
import { defineComponent , computed , inject , watch , nextTick , createVNode , toRefs , reactive , onUnmounted } from 'vue'
// import setDesignItem from '@/component/Detail/setDesignItem2.vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue' ;
import { Https } from "@/tool/https" ;
import { useStore } from "vuex" ;
import { useI18n } from 'vue-i18n'
import { getMousePosition } from "@/tool/mdEvent" ;
import { KeyValueDB } from "@/tool/indexedDB" ;
import Vue3Moveable from 'vue3-moveable' ;
import Moveable from 'moveable' ;
import { parse } from 'vue/compiler-sfc' ;
import { scale } from 'echarts/types/src/scale/helper.js' ;
export default defineComponent ( {
components : {
} ,
props : {
imgDesignImg : {
default : false ,
type : Boolean ,
}
} ,
emits : [ 'addSketch' ] ,
setup ( props , { emit } ) {
const { t } = useI18n ( )
const store = useStore ( ) ;
const detailData = reactive ( {
frontBack : computed ( ( ) => store . state . DesignDetail . frontBack ) ,
designDetail : computed ( ( ) => store . state . DesignDetail . designDetail ) ,
selectDetail : computed ( ( ) => store . state . DesignDetail . selectDetail ) ,
isEditPattern : inject ( 'isEditPattern' ) as any ,
singleOveral : inject ( 'singleOveral' ) as any ,
detailBody : null as any ,
observer : null as any ,
observerWH : {
width : 0 ,
height : 0 ,
} ,
} )
const selectItem = reactive ( {
selectDetail : computed ( ( ) => store . state . DesignDetail . selectDetail ) ,
imgDomIndex : - 1 ,
printZIndex : store . state . DesignDetail . printZIndex ,
imgDom : null as any ,
direction : '' ,
} )
watch ( ( ) => detailData . frontBack ? . body ? . path , ( newVal ) => {
setPrintSize ( )
} )
const setPrintSize = ( ) => {
nextTick ( ( ) => {
let sacle = 0
const img = new Image ( ) ;
let dom = document . querySelector ( '.molepositon .perview_img' ) as any
if ( ! detailData . frontBack ? . body ? . path || ! dom ) return
img . onload = ( ) => {
//监听模特图片宽度设置整体图片宽度
if ( detailData . observer ) {
detailData . observer . disconnect ( )
}
detailData . observerWH . width = dom . width
detailData . observerWH . height = dom . height
detailData . observer = new ResizeObserver ( ( entries ) => {
if ( entries [ 0 ] . contentRect . width == 0 ) return
detailData . observerWH . width = Math . floor ( entries [ 0 ] . contentRect . width )
detailData . observerWH . height = Math . floor ( entries [ 0 ] . contentRect . height )
} )
detailData . observer . observe ( dom )
if ( detailData . designDetail . clothes . length == 0 ) {
store . commit ( 'DesignDetail/addDesignColthes' )
emit ( 'addSketch' )
return
}
if ( ! detailData . selectDetail ? . 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
detailData . frontBack . front . forEach ( ( item : any , index : number ) => {
for ( const key in item . style ) {
if ( key == 'zIndex' ) return
let value = item . style [ key ]
if ( typeof value !== 'number' ) {
value = value . replace ( 'px' , '' )
item . style [ key ] = value
} else {
item . style [ key ] = value * sacle + 'px'
}
// item.style[key] = value*sacle+'px'
}
for ( const key in detailData . frontBack . back [ index ] . style ) {
if ( key == 'zIndex' ) return
if ( key == 'transform' ) return
let value = detailData . frontBack . back [ index ] . style [ key ]
if ( typeof value !== 'number' ) {
value = value . replace ( 'px' , '' )
detailData . frontBack . back [ index ] . style [ key ] = value
} else {
detailData . frontBack . back [ index ] . style [ key ] = value * sacle + 'px'
}
// detailData.frontBack.back[index].style[key] = value*sacle+'px'
}
} ) ;
setTimeout ( ( ) => {
initMoveableForSelected ( )
} , 500 ) ;
} ;
img . src = detailData . frontBack ? . body ? . path ;
} )
}
const getDetailListDom = reactive ( {
libraryList : null as any ,
moveableContainer : null as any , //控件层
} )
const elementRefs = ref ( [ ] ) as any ;
const moveableInstance = ref ( null ) as any ;
const setElementRef = ( el , index ) => {
elementRefs . value [ index ] = el ;
} ;
const updateRect = ( ) => {
setTimeout ( ( ) => {
if ( moveableInstance . value ) moveableInstance . value . updateRect ( )
} , 200 ) ;
}
const initMoveableForSelected = ( ) => {
// 销毁旧的实例
if ( selectItem . imgDomIndex == - 1 ) return
if ( moveableInstance . value ) {
moveableInstance . value . destroy ( ) ;
}
const selectedEl = elementRefs . value [ selectItem . imgDomIndex ] ;
if ( ! selectedEl ) return ;
if ( ! selectedEl . style . left ) return
moveableInstance . value = new Moveable ( getDetailListDom . moveableContainer , {
target : selectedEl ,
draggable : true ,
scalable : true ,
rotatable : true ,
keepRatio : false , // 等比缩放
snappable : true ,
snapThreshold : 5 ,
edge : false ,
} ) ;
let startPosition = { //记录初始位置
left : 0 ,
top : 0 ,
}
moveableInstance . value . on ( 'scaleStart' , ( { target , direction } ) => {
const frontStyle = detailData . frontBack . front [ selectItem . imgDomIndex ] ;
if ( ! frontStyle . mirror ) {
let scaleX = frontStyle . style . transform . match ( /scaleX\(([-\d.]+)\)/ ) ;
let scaleY = frontStyle . style . transform . match ( /scaleY\(([-\d.]+)\)/ ) ;
frontStyle . mirror = { x : scaleX [ 1 ] == '-1' ? true : false , y : scaleY [ 1 ] == '-1' ? true : false } ;
}
} ) ;
moveableInstance . value . on ( 'rotateStart' , ( { target , direction } ) => {
const frontStyle = detailData . frontBack . front [ selectItem . imgDomIndex ] ;
if ( ! frontStyle . mirror ) {
let scaleX = frontStyle . style . transform . match ( /scaleX\(([-\d.]+)\)/ ) ;
let scaleY = frontStyle . style . transform . match ( /scaleY\(([-\d.]+)\)/ ) ;
frontStyle . mirror = { x : scaleX [ 1 ] == '-1' ? true : false , y : scaleY [ 1 ] == '-1' ? true : false } ;
}
} ) ;
moveableInstance . value . on ( 'dragStart' , ( { target , clientX , clientY } ) => {
startPosition = {
left : parseFloat ( selectedEl . style . left . replace ( 'px' , '' ) ) || 0 ,
top : parseFloat ( selectedEl . style . top . replace ( 'px' , '' ) ) || 0 ,
}
} ) ;
// 拖拽
moveableInstance . value . on ( 'drag' , ( { target , beforeTranslate } ) => {
let x = startPosition . left + beforeTranslate [ 0 ]
let y = startPosition . top + beforeTranslate [ 1 ]
detailData . frontBack . front [ selectItem . imgDomIndex ] . style . left = x + 'px'
detailData . frontBack . front [ selectItem . imgDomIndex ] . style . top = y + 'px'
} ) ;
const updateElementTransform = ( element , rotateDeg = null ) => {
const currentTransform = element . style ? . transform || '' ;
// 1. 提取当前的所有rotate
const currentRotates = ( currentTransform . match ( /rotate[XYZ]?\([^)]+\)/g ) || [ ] ) ;
// 2. 获取除镜像和rotate外的其他所有变换
let otherTransforms = currentTransform
. replace ( /scaleX\(-1\)|scaleY\(-1\)/g , '' ) // 移除镜像
. replace ( /rotate[XYZ]?\([^)]+\)/g , '' ) // 移除rotate
. replace ( /\s+/g , ' ' )
. trim ( ) ;
// 3. 构建新transform
const transforms = [ ] ;
// 镜像部分
if ( element . mirror . x ) transforms . push ( 'scaleX(-1)' ) ;
if ( element . mirror . y ) transforms . push ( 'scaleY(-1)' ) ;
if ( otherTransforms ) transforms . push ( otherTransforms ) ;
if ( rotateDeg !== null ) {
transforms . push ( ` rotate( ${ rotateDeg } deg) ` ) ;
} else if ( currentRotates . length > 0 ) {
transforms . push ( ... currentRotates ) ;
}
element . style . transform = transforms . join ( ' ' ) . trim ( ) ;
} ;
moveableInstance . value . on ( 'scale' , ( { target , delta , direction } ) => {
const frontStyle = detailData . frontBack . front [ selectItem . imgDomIndex ] ;
if ( ! frontStyle . mirror ) frontStyle . mirror = { x : false , y : false } ;
const width = parseFloat ( frontStyle . style . width ) ;
const height = parseFloat ( frontStyle . style . height ) ;
let left = parseFloat ( frontStyle . style . left ) || 0 ;
let top = parseFloat ( frontStyle . style . top ) || 0 ;
let rotation = 0 ;
// 获取原始比例
const originalRatio = width / height ;
if ( frontStyle . style . transform ) {
const transform = frontStyle . style . transform ;
const match = transform . match ( /rotate\(([-\d.]+)deg\)/ ) ;
if ( match ) {
rotation = parseFloat ( match [ 1 ] ) ;
}
}
// 根据旋转角度重新计算控制点的方向
function getAdjustedCorner ( originalCorner , rotationAngle ) {
const angleRad = rotationAngle * ( Math . PI / 180 ) ;
const cosA = Math . cos ( angleRad ) ;
const sinA = Math . sin ( angleRad ) ;
const newX = originalCorner . x * cosA - originalCorner . y * sinA ;
const newY = originalCorner . x * sinA + originalCorner . y * cosA ;
const threshold = 0.5 ;
return {
x : Math . abs ( newX ) > threshold ? ( newX > 0 ? 1 : - 1 ) : 0 ,
y : Math . abs ( newY ) > threshold ? ( newY > 0 ? 1 : - 1 ) : 0
} ;
}
if ( rotation !== 0 ) {
direction = getAdjustedCorner ( { x : direction [ 0 ] , y : direction [ 1 ] } , rotation ) ;
direction = [ direction . x , direction . y ] ;
}
// 判断是否是对角线方向（需要等比缩放）
const isDiagonal = Math . abs ( direction [ 0 ] ) === 1 && Math . abs ( direction [ 1 ] ) === 1 ;
// 处理轴缩放，包含镜像翻转逻辑
const processAxis = ( axis , val , deltaVal , dir , originalPosition , originalSize , keepRatio = false , otherAxisResult = null ) => {
let newVal = val * deltaVal ;
const mirrorKey = axis === 'width' ? 'x' : 'y' ;
const isWidth = axis === 'width' ;
// 检查是否需要镜像翻转（ ）
if ( newVal <= 0 ) {
frontStyle . mirror [ mirrorKey ] = ! frontStyle . mirror [ mirrorKey ] ;
newVal = Math . abs ( newVal ) ;
updateElementTransform ( frontStyle ) ;
// 镜像翻转后，位置需要根据原始锚点调整
if ( dir === - 1 ) {
// 从左上/右上缩放时，位置保持不变
return {
newVal ,
adjustPos : originalPosition ,
shouldFlip : true
} ;
} else {
// 从左下/右下缩放时，位置需要调整
const newPosition = originalPosition + ( originalSize - newVal ) * ( frontStyle . mirror [ mirrorKey ] ? - 1 : 1 ) ;
return {
newVal ,
adjustPos : newPosition ,
shouldFlip : true
} ;
}
}
const shouldMove = ( ! frontStyle . mirror [ mirrorKey ] && dir === - 1 ) ||
( frontStyle . mirror [ mirrorKey ] && dir === 1 ) ;
if ( keepRatio && otherAxisResult ) {
newVal = isWidth ?
otherAxisResult . newVal * originalRatio :
otherAxisResult . newVal / originalRatio ;
}
let adjustPos ;
if ( shouldMove ) {
adjustPos = originalPosition - ( newVal - originalSize ) ;
} else {
adjustPos = originalPosition ;
}
return {
newVal ,
adjustPos ,
shouldFlip : false
} ;
} ;
// 自由缩放
const widthResult = processAxis ( 'width' , width , delta [ 0 ] , direction [ 0 ] , left , width ) ;
const heightResult = processAxis ( 'height' , height , delta [ 1 ] , direction [ 1 ] , top , height ) ;
frontStyle . style . left = widthResult . adjustPos + 'px' ;
frontStyle . style . top = heightResult . adjustPos + 'px' ;
frontStyle . style . width = widthResult . newVal + 'px' ;
frontStyle . style . height = heightResult . newVal + 'px' ;
// }
} ) ;
// 旋转
moveableInstance . value . on ( 'rotate' , ( { target , beforeRotate } ) => {
let frontStyle = detailData . frontBack . front [ selectItem . imgDomIndex ] ;
// 确保镜像状态存在
if ( ! frontStyle . mirror ) frontStyle . mirror = { x : false , y : false } ;
const { x : isMirroredX , y : isMirroredY } = frontStyle . mirror ;
// 计算实际旋转角度
let actualRotate = beforeRotate ;
// 关键逻辑： （ ） ，
if ( isMirroredX !== isMirroredY ) {
actualRotate = - beforeRotate ;
}
// 确保角度在 0-360 度范围内
actualRotate = actualRotate % 360 ;
// 如果角度为负数，转换为正数
if ( actualRotate < 0 ) {
actualRotate += 360 ;
}
// 确保角度在 [0, 360) 范围内
actualRotate = ( ( actualRotate % 360 ) + 360 ) % 360 ;
updateElementTransform ( frontStyle , actualRotate . toFixed ( 2 ) ) ;
} ) ;
// 调整大小
moveableInstance . value . on ( 'resize' , ( { target , width , height } ) => {
// console.log(width, height)
// detailData.frontBack.front[selectItem.imgDomIndex].style.width = width
// detailData.frontBack.front[selectItem.imgDomIndex].style.height = height
} ) ;
moveableInstance . value . on ( 'dragEnd' , ( { target , clientX , clientY } ) => {
startPosition = {
left : 0 ,
top : 0 ,
}
upDataDetail ( )
} ) ;
moveableInstance . value . on ( 'scaleEnd' , ( ) => {
upDataDetail ( )
} ) ;
moveableInstance . value . on ( 'rotateEnd' , ( ) => {
upDataDetail ( )
} ) ;
} ;
watch ( ( ) => selectItem . selectDetail , ( newValue , oldValue ) => {
if ( ! newValue && newValue ? . id == oldValue ? . id ) return
selectItem . imgDomIndex = detailData . frontBack . front . findIndex ( ( item : any ) => item . id == newValue . id )
initMoveableForSelected ( )
} , { immediate : true , } )
const setRevocation = async ( ) => {
let frontBack = JSON . parse ( JSON . stringify ( detailData . frontBack ) )
let revocation : any = JSON . parse ( ( await KeyValueDB . get ( "revocation" ) as any ) || '[]' )
revocation . push ( { designData : null , position : frontBack } )
KeyValueDB . set ( 'revocation' , JSON . stringify ( revocation ) ) ;
}
const upDataDetail = async ( ) => {
//同步到selectDetail数据中，
// getDetailListData.designDetail
let { scale , offset , priority , transpose , rotate , position , imageSize } = await getSubmitData ( selectItem . selectDetail )
selectItem . selectDetail . layersObject [ 0 ] . scale = scale
selectItem . selectDetail . layersObject [ 1 ] . scale = scale
selectItem . selectDetail . layersObject [ 0 ] . offset = offset
selectItem . selectDetail . layersObject [ 1 ] . offset = offset
selectItem . selectDetail . layersObject [ 0 ] . priority = priority
selectItem . selectDetail . layersObject [ 1 ] . priority = priority
selectItem . selectDetail . layersObject [ 0 ] . rotate = rotate
selectItem . selectDetail . layersObject [ 1 ] . rotate = rotate
selectItem . selectDetail . layersObject [ 0 ] . transpose = transpose
selectItem . selectDetail . layersObject [ 1 ] . transpose = transpose
selectItem . selectDetail . layersObject [ 0 ] . position = position
selectItem . selectDetail . layersObject [ 1 ] . position = position
selectItem . selectDetail . layersObject [ 0 ] . imageSize = imageSize
selectItem . selectDetail . layersObject [ 1 ] . imageSize = imageSize
setRevocation ( )
}
const sort = ( arr : any ) => {
arr . sort ( ( a : any , b : any ) => {
var a _num = a . style . zIndex ;
var b _num = b . style . zIndex ;
return a _num - b _num ;
} ) ;
return arr
}
const getSubmitData = async ( value : any ) => {
let parentNode = document . getElementsByClassName ( 'molepositon' ) [ 0 ] . getElementsByClassName ( "designOpenrtion_imgMask" ) [ 0 ] . getBoundingClientRect ( )
if ( ! detailData . frontBack ? . body ? . layersObject ? . [ 0 ] ? . imageSize ) {
return {
scale : value . layersObject [ 0 ] . scale ,
offset : value . layersObject [ 0 ] . offset ,
priority : value . layersObject [ 0 ] . priority ,
}
}
let ratio = detailData . frontBack . body . layersObject [ 0 ] . imageSize [ 0 ] / parentNode . width
let scale = 0
let dom : any = document . querySelector ( '.molepositon .perview_img' )
const img = new Image ( ) ;
img . src = detailData . frontBack ? . body ? . path ;
await new Promise < void > ( ( resolve , reject ) => {
img . onload = ( ) => {
scale = dom . parentNode . offsetWidth / img . width
resolve ( )
} ;
} )
// let arr:any = sort(detailData.frontBack.front)
let arr : any = sort ( JSON . parse ( JSON . stringify ( detailData . frontBack . front ) ) )
let num = 10
arr . forEach ( ( item : any ) => {
item . priority = num ++
} )
let data : any = {
scale : null ,
offset : null ,
priority : '' ,
maskUrl : '' ,
maskMinioUrl : '' ,
position : null ,
imageSize : null ,
}
let state = false
for ( let index = 0 ; index < arr . length ; index ++ ) {
if ( value . id == arr [ index ] . id ) {
state = true
let y = ( ( arr [ index ] ? . style ? . top . replace ( /px/g , '' ) * ratio ) . toFixed ( 0 ) as any - arr [ index ] ? . position [ 0 ] )
let x = ( ( arr [ index ] ? . style ? . left . replace ( /px/g , '' ) * ratio ) . toFixed ( 0 ) as any - arr [ index ] ? . position [ 1 ] )
let positionX = Number ( ( arr [ index ] ? . style ? . left . replace ( /px/g , '' ) / scale ) ) . toFixed ( 2 )
let positionY = Number ( ( arr [ index ] ? . style ? . top . replace ( /px/g , '' ) / scale ) ) . toFixed ( 2 )
let imageSizeW = Number ( ( arr [ index ] ? . style ? . width . replace ( /px/g , '' ) / scale ) ) . toFixed ( 2 )
let imageSizeH = Number ( ( arr [ index ] ? . style ? . height . replace ( /px/g , '' ) / scale ) ) . toFixed ( 2 )
let scaleWidth = arr [ index ] ? . imageSize ? Number ( ( ( arr [ index ] ? . style ? . width . replace ( /px/g , '' ) * ratio ) / ( arr [ index ] ? . imageSize [ 0 ] / arr [ index ] . scale [ 0 ] ) ) . toFixed ( 2 ) ) : 1
let scaleHeight = arr [ index ] ? . imageSize ? Number ( ( ( arr [ index ] ? . style ? . height . replace ( /px/g , '' ) * ratio ) / ( arr [ index ] ? . imageSize [ 1 ] / arr [ index ] . scale [ 1 ] ) ) . toFixed ( 2 ) ) : 1
// let widthScale = (arr[index].style.width.replace(/px/g,'')/arr[index].style.height.replace(/px/g,'')).toFixed(2)
let transformStr = arr [ index ] ? . style ? . transform
let scaleX = transformStr . match ( /scaleX\(([-\d.]+)\)/ )
let scaleY = transformStr . match ( /scaleY\(([-\d.]+)\)/ )
let rotate = transformStr . match ( /rotate\(([-\d.]+)deg\)/ ) ;
data . transpose = [ parseFloat ( scaleX ? . [ 1 ] || 1 ) , parseFloat ( scaleY ? . [ 1 ] || 1 ) ]
data . rotate = parseFloat ( rotate ? . [ 1 ] || 0 )
data . scale = [ scaleWidth , scaleHeight ]
let top = y == 0 ? value . layersObject [ 0 ] . offset [ 1 ] : y + value . layersObject [ 0 ] . offset [ 1 ]
let left = x == 0 ? value . layersObject [ 0 ] . offset [ 0 ] : x + value . layersObject [ 0 ] . offset [ 0 ]
data . offset = [ left ? left : 0 , top ? top : 0 ]
data . position = [ positionY , positionX ]
data . imageSize = [ imageSizeW , imageSizeH ]
// data.offset = [left?left:0,top?top:0]
data . maskUrl = arr [ index ] . maskUrl
data . maskMinioUrl = arr [ index ] . maskMinioUrl
// data.priority = arr[index].style.zIndex
data . priority = arr [ index ] . priority
arr [ index ] . similarity = true
// item.offset = [(arr[index]?.style?.left.replace(/px/g,'')*ratio).toFixed(0),(i?.style?.top.replace(/px/g,'')*ratio).toFixed(0)]
break
}
}
if ( ! state ) {
data . scale = [ 1 , 1 ]
data . offset = [ 0 , 0 ]
data . priority = 10 + arr . length
}
return data
}
const deleteNav = ( ) => {
}
const updataPosition = ( ) => {
let url = detailData . frontBack ? . body ? . path
let sacle = 0
const img = new Image ( ) ;
img . onload = ( ) => {
let dom : any = document . querySelector ( '.molepositon .perview_img' )
// resolve(img)
sacle = dom . parentNode . offsetWidth / img . width
detailData . frontBack . front . forEach ( ( item : any , index : number ) => {
for ( const key in item . style ) {
if ( key == 'zIndex' ) return
if ( key == 'transform' ) return
item . style [ key ] = item . style [ key ] * sacle + 'px'
}
for ( const key in detailData . frontBack . back [ index ] . style ) {
if ( key == 'zIndex' ) return
if ( key == 'transform' ) return
detailData . frontBack . back [ index ] . style [ key ] = detailData . frontBack . back [ index ] . style [ key ] * sacle + 'px'
}
} ) ;
} ;
img . src = url ;
}
onUnmounted ( ( ) => {
if ( detailData . observer ) {
detailData . observer . disconnect ( )
}
if ( moveableInstance . value ) {
moveableInstance . value . destroy ( ) ;
}
} )
return {
... toRefs ( detailData ) ,
... toRefs ( selectItem ) ,
... toRefs ( getDetailListDom ) ,
setElementRef ,
setPrintSize ,
deleteNav ,
getSubmitData ,
getMousePosition ,
updataPosition ,
updateRect ,
}
} ,
directives : {
detailBody : {
mounted ( el , data : any ) {
let sacle = 0
const img = new Image ( ) ;
img . onload = ( ) => {
// resolve(img)
sacle = el . parentNode . offsetWidth / img . width
data . instance . frontBack . front . forEach ( ( item : any , index : number ) => {
for ( const key in item . style ) {
if ( key == 'zIndex' ) return
item . style [ key ] = item . style [ key ] * sacle + 'px'
}
for ( const key in data . instance . frontBack . back [ index ] . style ) {
if ( key == 'zIndex' ) return
data . instance . frontBack . back [ index ] . style [ key ] = data . instance . frontBack . back [ index ] . style [ key ] * sacle + 'px'
}
} ) ;
} ;
img . src = data . value ;
} ,
updated ( el , data : any ) {
let sacle = 0
const img = new Image ( ) ;
img . onload = ( ) => {
// resolve(img)
sacle = el . parentNode . offsetWidth / img . width
data . instance . frontBack . front . forEach ( ( item : any , index : number ) => {
for ( const key in item . style ) {
if ( key == 'zIndex' ) return
item . style [ key ] = item . style [ key ] . replace ( /px/g , '' ) * sacle + 'px'
}
for ( const key in data . instance . frontBack . back [ index ] . style ) {
if ( key == 'zIndex' ) return
data . instance . frontBack . back [ index ] . style [ key ] = data . instance . frontBack . back [ index ] . style [ key ] . replace ( /px/g , '' ) * sacle + 'px'
}
} ) ;
} ;
img . src = data . value ;
}
}
} ,
provide ( ) {
return {
}
} ,
} )
< / script >
< style lang = "less" scoped >
. molepositon {
// width: 30rem;
// width: calc(66 * .470rem);
width : calc ( 66 * .457 rem ) ;
height : 66 rem ;
display : flex ;
flex - direction : column ;
// margin: auto 0;
// padding-top: 3rem;
position : relative ;
display : none ;
& . active {
display : flex ;
z - index : 2 ;
align - items : center ;
justify - content : center ;
}
& . imgDesignImg {
> . designOpenrtion _imgMask {
. detail _modal _item _front {
display : flex ;
align - items : center ;
justify - content : center ;
img {
// height: auto;
}
}
}
}
. moveableContainer {
: deep ( . moveable - origin ) {
opacity : 0 ;
}
: deep ( . moveable - control ) {
border - radius : 0 ;
}
: deep ( . moveable - rotation - control ) {
border - radius : 50 % ;
}
}
> . designOpenrtion _imgMask {
width : auto ;
height : auto ;
position : relative ;
// height: 100%;
display : flex ;
align - items : center ;
justify - content : center ;
> img {
z - index : 2 ;
position : relative ;
width : 100 % ;
height : auto ;
// height: 100%;
// object-fit: contain;
}
> div {
position : absolute ;
top : 0 ;
}
. detail _modal _item _front , . designOpenrtion _print {
z - index : 2 ;
height : 100 % ;
width : 100 % ;
pointer - events : none ;
& . active {
pointer - events : auto ;
}
img {
width : 100 % ;
// height: ;
height : 100 % ;
float : left ;
user - select : none ;
- webkit - user - drag : none ;
}
. modal _imgItem {
position : absolute ;
overflow : hidden ;
top : 0 ;
}
}
. designOpenrtion _print {
z - index : 1 ! important ;
}
}
}
< / style >
X1627315083