70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<template>
|
|
<div style="z-index:-1" :style="style" />
|
|
</template>
|
|
|
|
<script>
|
|
import { mapState } from 'vuex'
|
|
export default {
|
|
replace: true,
|
|
name: 'MoveInShadow',
|
|
props: {
|
|
w: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
h: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
x: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
y: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
z: {
|
|
type: Number,
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
style() {
|
|
// 当前默认为自适应
|
|
let left = this.x
|
|
let top = this.y
|
|
let width = this.w
|
|
let height = this.h
|
|
if (this.canvasStyleData.auxiliaryMatrix) {
|
|
left = Math.round(left / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
|
|
width = Math.round(width / this.curCanvasScale.matrixStyleWidth) * this.curCanvasScale.matrixStyleWidth
|
|
top = Math.round(top / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
|
|
height = Math.round(height / this.curCanvasScale.matrixStyleHeight) * this.curCanvasScale.matrixStyleHeight
|
|
}
|
|
const style = {
|
|
transform: `translate(${left}px, ${top}px) rotate(0deg)`,
|
|
width: width + 'px',
|
|
height: height + 'px',
|
|
opacity: 0.4,
|
|
background: 'gray',
|
|
position: 'absolute'
|
|
}
|
|
// console.log('style=>' + JSON.stringify(style))
|
|
return style
|
|
},
|
|
...mapState([
|
|
'curComponent',
|
|
'editor',
|
|
'curCanvasScale',
|
|
'canvasStyleData',
|
|
'linkageSettingStatus'
|
|
])
|
|
}
|
|
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
|
|
</style>
|