514 lines
14 KiB
Vue
514 lines
14 KiB
Vue
<template>
|
||
<div
|
||
id="wrapper"
|
||
class="wrapper vue-ruler-wrapper"
|
||
:style="{
|
||
width: width + thick + 'px',
|
||
height: height + thick + 'px'
|
||
}"
|
||
>
|
||
<i
|
||
:class="{
|
||
'iconfont-bigscreen': true,
|
||
'icon-eye': isShowReferLine,
|
||
'icon-eye-close': !isShowReferLine
|
||
}"
|
||
@click="handleCornerClick"
|
||
/>
|
||
<SketchRule
|
||
:key="scale"
|
||
:lang="lang"
|
||
:thick="thick"
|
||
:scale="scale"
|
||
:width="width"
|
||
:height="height"
|
||
:start-x="startX"
|
||
:start-y="startY"
|
||
:shadow="shadow"
|
||
:hor-line-arr="[...lines.h, ...presetLines.h]"
|
||
:ver-line-arr="[...lines.v, ...presetLines.v]"
|
||
:palette="Palette"
|
||
:is-show-refer-line="isShowReferLine"
|
||
:corner-active="cornerActive"
|
||
@handleLine="handleLine"
|
||
@onCornerClick="handleCornerClick"
|
||
/>
|
||
<div
|
||
id="screens"
|
||
ref="screensRef"
|
||
:style="{
|
||
width: innerWidth + 'px',
|
||
height: innerHeight + 'px'
|
||
}"
|
||
@scroll="throttleScroll"
|
||
>
|
||
<div
|
||
id="screen-container"
|
||
ref="containerRef"
|
||
class="screen-container grid-bg"
|
||
:style="containerRefStyle"
|
||
>
|
||
<div
|
||
id="canvas"
|
||
:style="canvasStyle"
|
||
>
|
||
<slot />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import SketchRule from 'vue-sketch-ruler'
|
||
import { mapState, mapMutations } from 'vuex'
|
||
import throttle from 'lodash/throttle'
|
||
export default {
|
||
components: {
|
||
SketchRule
|
||
},
|
||
props: {
|
||
width: {
|
||
type: Number,
|
||
default: 500
|
||
},
|
||
height: {
|
||
type: Number,
|
||
default: 400
|
||
},
|
||
pageWidth: {
|
||
type: Number,
|
||
default: 1920
|
||
},
|
||
pageHeight: {
|
||
type: Number,
|
||
default: 1080
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
canvasLeft: 0, // 存储画布到视口的left距离
|
||
canvasTop: 0, // 存储画布到视口的top距离
|
||
isDrag: false, // 小地图白块是否拖拽
|
||
startX: 0,
|
||
startY: 0,
|
||
lines: {
|
||
h: [],
|
||
v: []
|
||
},
|
||
thick: 20,
|
||
lang: 'zh-CN', // 中英文
|
||
isShowRuler: true, // 显示标尺
|
||
isShowReferLine: true, // 显示参考线
|
||
cornerActive: true, // 左上角激活状态
|
||
Palette: {
|
||
bgColor: 'rgba(225,225,225, 0)',
|
||
longfgColor: '#BABBBC',
|
||
shortfgColor: '#C8CDD0',
|
||
fontColor: '#7D8694',
|
||
shadowColor: 'transparent',
|
||
lineColor: '#0089d0',
|
||
borderColor: '#transparent',
|
||
cornerActiveColor: 'rgb(235, 86, 72, 0.6)'
|
||
},
|
||
|
||
containerRefStyle: {
|
||
width: this.width + 'px',
|
||
height: this.height + 'px'
|
||
},
|
||
innerHeight: 0,
|
||
innerWidth: 0
|
||
}
|
||
},
|
||
watch: {
|
||
// 缩放改变的时候，改变startX，startY
|
||
scale (scale) {
|
||
// 防抖调用方法
|
||
this.throttleScroll()
|
||
},
|
||
pageWidth (pageWidth) {
|
||
if (this.fitZoom === this.zoom) {
|
||
this.initZoom()
|
||
}
|
||
},
|
||
pageHeight (pageHeight) {
|
||
if (this.fitZoom === this.zoom) {
|
||
this.initZoom()
|
||
}
|
||
}
|
||
},
|
||
computed: {
|
||
...mapState('bigScreen', {
|
||
scale: state => state.zoom / 100,
|
||
fitZoom: state => state.fitZoom,
|
||
zoom: state => state.zoom
|
||
}),
|
||
presetLines () {
|
||
const presetLine = this.$store.state.bigScreen.presetLine
|
||
// { type: 'h', site: y || 0 },
|
||
const v = presetLine?.filter(p => p.type === 'h')?.map(p => p.site)
|
||
const h = presetLine?.filter(p => p.type === 'v')?.map(p => p.site)
|
||
return {
|
||
h,
|
||
v
|
||
}
|
||
},
|
||
shadow () {
|
||
return {
|
||
x: 0,
|
||
y: 0,
|
||
width: this.width,
|
||
height: this.height
|
||
}
|
||
},
|
||
canvasStyle () {
|
||
return {
|
||
width: this.width + 'px',
|
||
height: this.height + 'px',
|
||
transform: `scale(${this.scale})`,
|
||
transformOrigin: '0 0 0'
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
// 初始化canvasLeft canvasTop
|
||
const canvasRect = document.querySelector('#canvas').getBoundingClientRect()
|
||
this.canvasLeft = canvasRect.left
|
||
this.canvasTop = canvasRect.top
|
||
// 监听屏幕改变
|
||
this.listenSize()
|
||
this.initRuleHeight()
|
||
this.throttleScroll()
|
||
this.throttleDrag()
|
||
},
|
||
methods: {
|
||
...mapMutations('bigScreen', [
|
||
'changeZoom',
|
||
'changeFitZoom'
|
||
]),
|
||
throttleDrag () {
|
||
throttle(() => {
|
||
this.dragSelection()
|
||
this.viewMapDrag()
|
||
}, 100)()
|
||
},
|
||
// 绑定滑块拖拽效果
|
||
dragSelection () {
|
||
const that = this
|
||
const draggableElement = document.getElementById('selectionWin')
|
||
const dragContainer = document.getElementById('selectWin')
|
||
const screenElement = document.getElementById('screens')
|
||
const screenContainer = document.getElementById('screen-container')
|
||
const maxContainer = document.querySelector('.bs-page-design-wrap')
|
||
// 鼠标按下的位置
|
||
let posX, posY
|
||
// 白色拖拽块相对于父盒子初始位置
|
||
let initialX, initialY
|
||
// 滚动条初始位置
|
||
let scrollTop, scrollLeft
|
||
draggableElement.addEventListener('mousedown', function (event) {
|
||
that.isDrag = true
|
||
posX = event.clientX
|
||
posY = event.clientY
|
||
initialX = draggableElement.getBoundingClientRect().left - dragContainer.getBoundingClientRect().left
|
||
initialY = draggableElement.getBoundingClientRect().top - dragContainer.getBoundingClientRect().top
|
||
scrollLeft = screenElement.scrollLeft
|
||
scrollTop = screenElement.scrollTop
|
||
maxContainer.addEventListener('mousemove', function (event) {
|
||
// 在鼠标移动过程中判断出鼠标左键未点击，则停止拖拽
|
||
if (event.buttons !== 1) {
|
||
that.isDrag = false
|
||
}
|
||
if (that.isDrag) {
|
||
event.preventDefault()
|
||
// 鼠标移动距离
|
||
let moveX = event.clientX - posX
|
||
let moveY = event.clientY - posY
|
||
// 避免白色拖拽移出边框
|
||
if (moveX < -initialX) {
|
||
moveX = -initialX
|
||
} else if (moveX > dragContainer.getBoundingClientRect().width - draggableElement.getBoundingClientRect().width - initialX) {
|
||
moveX = dragContainer.getBoundingClientRect().width - draggableElement.getBoundingClientRect().width - initialX
|
||
}
|
||
if (moveY < -initialY) {
|
||
moveY = -initialY
|
||
} else if (moveY > dragContainer.getBoundingClientRect().height - draggableElement.getBoundingClientRect().height - initialY) {
|
||
moveY = dragContainer.getBoundingClientRect().height - draggableElement.getBoundingClientRect().height - initialY
|
||
}
|
||
const newX = moveX + initialX
|
||
const newY = moveY + initialY
|
||
// 移动拖拽白块
|
||
draggableElement.style.left = newX + 'px'
|
||
draggableElement.style.top = newY + 'px'
|
||
// 移动比例
|
||
const percentageX = moveX / (dragContainer.getBoundingClientRect().width - draggableElement.getBoundingClientRect().width)
|
||
const percentageY = moveY / (dragContainer.getBoundingClientRect().height - draggableElement.getBoundingClientRect().height)
|
||
// 进度条需要滚动的距离
|
||
const scrollTopLength = percentageY * (screenContainer.getBoundingClientRect().height - screenElement.getBoundingClientRect().height)
|
||
const scrollLeftLength = percentageX * (screenContainer.getBoundingClientRect().width - screenElement.getBoundingClientRect().width)
|
||
screenElement.scrollLeft = scrollLeft + scrollLeftLength
|
||
screenElement.scrollTop = scrollTop + scrollTopLength
|
||
}
|
||
})
|
||
})
|
||
maxContainer.addEventListener('mouseup', function (event) {
|
||
that.isDrag = false
|
||
})
|
||
draggableElement.addEventListener('mouseup', function () {
|
||
that.isDrag = false
|
||
})
|
||
// 禁止H5自带的拖拽事件
|
||
draggableElement.ondragstart = function (ev) {
|
||
ev.preventDefault()
|
||
}
|
||
draggableElement.ondragend = function (ev) {
|
||
ev.preventDefault()
|
||
}
|
||
screenElement.ondragstart = function (ev) {
|
||
ev.preventDefault()
|
||
}
|
||
screenElement.ondragend = function (ev) {
|
||
ev.preventDefault()
|
||
}
|
||
},
|
||
// 小地图拖拽
|
||
viewMapDrag () {
|
||
const mapElement = document.getElementById('minimap')
|
||
const mapDragElement = document.getElementById('mapHeader')
|
||
const pageElement = document.querySelector('.bs-page-design-wrap')
|
||
let mapDrag = false
|
||
let curX, curY
|
||
let curBottom, curRight
|
||
mapDragElement.addEventListener('mousedown', function (event) {
|
||
mapDrag = true
|
||
curX = event.clientX
|
||
curY = event.clientY
|
||
curBottom = window.getComputedStyle(mapElement).bottom
|
||
curRight = window.getComputedStyle(mapElement).right
|
||
pageElement.addEventListener('mousemove', function (event) {
|
||
if (mapDrag) {
|
||
event.preventDefault()
|
||
const dragX = event.clientX - curX
|
||
const dragY = event.clientY - curY
|
||
mapElement.style.bottom = parseInt(curBottom) - dragY + 'px'
|
||
mapElement.style.right = parseInt(curRight) - dragX + 'px'
|
||
}
|
||
})
|
||
})
|
||
pageElement.addEventListener('mouseup', function () {
|
||
mapDrag = false
|
||
})
|
||
mapDragElement.addEventListener('mouseup', function () {
|
||
mapDrag = false
|
||
})
|
||
},
|
||
listenSize () {
|
||
window.onresize = throttle(() => {
|
||
this.initRuleHeight()
|
||
}, 100)
|
||
},
|
||
initRuleHeight () {
|
||
setTimeout(() => {
|
||
const screensRect = document
|
||
.querySelector('.grid-wrap-box')
|
||
?.getBoundingClientRect()
|
||
if (!screensRect) {
|
||
return
|
||
}
|
||
|
||
// 30是grid-wrap-box的底部工具栏高度
|
||
this.innerHeight = screensRect.height
|
||
this.innerWidth = screensRect.width
|
||
this.diffX = this.width - screensRect.width
|
||
this.diffY = this.height - screensRect.height
|
||
|
||
this.containerRefStyle = {
|
||
width: this.diffX > 0 ? ((this.width + this.diffX + this.thick + 30) + 'px') : (this.width + 'px'),
|
||
height: this.diffY > 0 ? ((this.height + this.diffY + this.thick + 30) + 'px') : (this.height + 'px')
|
||
}
|
||
if (this.fitZoom === this.zoom) {
|
||
this.initZoom()
|
||
}
|
||
})
|
||
},
|
||
handleLine (lines) {
|
||
this.lines = lines
|
||
},
|
||
handleCornerClick () {
|
||
this.isShowReferLine = !this.isShowReferLine
|
||
this.cornerActive = !this.cornerActive
|
||
},
|
||
throttleScroll () {
|
||
throttle(() => {
|
||
this.handleScroll()
|
||
}, 100)()
|
||
},
|
||
handleScroll () {
|
||
const screensRect = document
|
||
.querySelector('#screens')
|
||
.getBoundingClientRect()
|
||
const canvasRect = document
|
||
.querySelector('#canvas')
|
||
.getBoundingClientRect()
|
||
// const container = document.querySelector('#selectWin').getBoundingClientRect()
|
||
const screenContainer = document.querySelector('#screen-container').getBoundingClientRect()
|
||
const draggableElement = document.getElementById('selectionWin')
|
||
// 标尺开始的刻度
|
||
const startX = (screensRect.left + this.thick - canvasRect.left) / this.scale
|
||
const startY = (screensRect.top + this.thick - canvasRect.top) / this.scale
|
||
|
||
this.startX = startX >> 0
|
||
this.startY = startY >> 0
|
||
|
||
this.$emit('changeStart', {
|
||
x: this.startX * this.scale + 50 - this.thick,
|
||
y: this.startY * this.scale + 50 - this.thick
|
||
})
|
||
// 拖动进度条移动小地图
|
||
if (!this.isDrag) {
|
||
const leftDrag = canvasRect.left - this.canvasLeft
|
||
const topDrag = canvasRect.top - this.canvasTop
|
||
// 小方块需要移动的距离
|
||
const leftLength = leftDrag / (screenContainer.width - screensRect.width - 9) * (150 - 30)
|
||
const topLength = topDrag / (screenContainer.height - screensRect.height - 9) * (150 - 30)
|
||
draggableElement.style.left = -leftLength + 'px'
|
||
draggableElement.style.top = -topLength + 'px'
|
||
}
|
||
},
|
||
// 保证画布能完整展示大屏
|
||
initZoom () {
|
||
// 横向比例
|
||
const xRadio = this.innerWidth / (this.pageWidth + 120)
|
||
// 纵向比例
|
||
const yRadio = this.innerHeight / (this.pageHeight + 120)
|
||
// 取最小的适应比例
|
||
const scale = Math.floor(Math.min(xRadio * 100, yRadio * 100))
|
||
if (scale < 100) {
|
||
this.changeZoom(scale)
|
||
this.changeFitZoom(scale)
|
||
} else {
|
||
this.changeZoom(100)
|
||
this.changeFitZoom(100)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
@import '../../BigScreenDesign/fonts/iconfont.css';
|
||
.wrapper {
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
|
||
.iconfont-bigscreen {
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
font-size: 16px;
|
||
color: #fff;
|
||
z-index: 999;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
#screens {
|
||
position: absolute;
|
||
overflow: scroll;
|
||
|
||
// 滚动条美化，始终在最下方和最右方
|
||
&::-webkit-scrollbar {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
&::-webkit-scrollbar-thumb {
|
||
border-radius: 10px;
|
||
background-color: #232832 !important;
|
||
}
|
||
&::-webkit-scrollbar-track {
|
||
border-radius: 10px;
|
||
background-color: transparent !important;
|
||
}
|
||
}
|
||
|
||
.screen-container {
|
||
position: absolute;
|
||
overflow:hidden;
|
||
width: 6000px;
|
||
height: 6000px;
|
||
}
|
||
|
||
.scale-value {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 100%;
|
||
}
|
||
|
||
.button {
|
||
position: absolute;
|
||
left: 100px;
|
||
bottom: 100%;
|
||
}
|
||
|
||
.button-ch {
|
||
position: absolute;
|
||
left: 200px;
|
||
bottom: 100%;
|
||
}
|
||
.button-en {
|
||
position: absolute;
|
||
left: 230px;
|
||
bottom: 100%;
|
||
}
|
||
|
||
#canvas {
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 50px;
|
||
}
|
||
::v-deep .line {
|
||
border-left: 1px dashed #0089d0 !important;
|
||
border-top: 1px dashed #0089d0 !important;
|
||
}
|
||
::v-deep .action {
|
||
.value {
|
||
background: #409EFF;
|
||
padding: 4px;
|
||
color: #fff;
|
||
}
|
||
|
||
.del {
|
||
color: #409EFF;
|
||
}
|
||
}
|
||
::v-deep .ruler, ::v-deep .corner {
|
||
background: #151a26;
|
||
}
|
||
::v-deep .corner {
|
||
z-index: 999;
|
||
background: #151a26 !important;
|
||
}
|
||
|
||
::v-deep .mb-ruler {
|
||
z-index: 998
|
||
}
|
||
.grid-bg {
|
||
background-color: #2a2e33 !important;
|
||
background-image: url(./images/canvas-bg.png);
|
||
background-repeat: repeat;
|
||
word-spacing: 10px;
|
||
}
|
||
|
||
::v-deep .lines {
|
||
.line {
|
||
.action {
|
||
.del {
|
||
color: #ffffff;
|
||
}
|
||
|
||
.value {
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|