|
效果
使用的一款软件将视频转gif有水印，将就着看看吧,通过上面的控制，可以获取到二维码相对于区域的位置，及二维码大小的参数，这其中用的的一个js库interactjs
具体实现代码
Interact.vue组件
![]()
import interact from 'interactjs'
// 引入二维码图片
import qrCodeImg from '../assets/img/qrCode.png'
import { computed } from 'vue'
const props = defineProps()
const bgImageUrl = computed(() => props.bgImage)
const emits = defineEmits()
// 定义一个 Interact.js 事件监听器
interact('#payconfig-drag-element')
.draggable({
modifiers: [
interact.modifiers.restrictRect({
restriction: 'parent',
endOnly: true,
}),
],
listeners: {
move(event) {
const target = event.target
const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
target.style.transform = `translate(${x}px, ${y}px)`
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
},
end() {
getPositionAndSize()
},
},
})
.resizable({
edges: { left: true, right: true, bottom: true, top: true },
listeners: {
move(event) {
const target = event.target
const x = parseFloat(target.getAttribute('data-x')) || 0
const y = parseFloat(target.getAttribute('data-y')) || 0
target.style.width = `${event.rect.width}px`
target.style.height = `${event.rect.height}px`
target.style.transform = `translate(${x}px, ${y}px)`
},
end() {
getPositionAndSize()
},
},
modifiers: [
interact.modifiers.restrictSize({
min: { width: 50, height: 50 },
}),
],
})
function getPositionAndSize() {
const target = document.getElementById('payconfig-drag-element')
// 获取目标元素的rect属性
const targetRect = target?.getBoundingClientRect()
// 获取目标元素父元素的rect属性
const parentRect = target?.parentNode?.getBoundingClientRect()
const x = targetRect && targetRect.left - parentRect.left
const y = targetRect && targetRect.top - parentRect.top
const width = targetRect?.width || 50
const height = targetRect?.height || 50
emits('getPositionAndSize', { x, y, width, height })
}
#payconfig-drag-area {
width: 500px;
height: 300px;
border: 1px solid #ccc;
background-repeat: no-repeat;
background-size: contain;
}
使用的地方
interactjs里面还有好多拖拽相关的操作的使用，有兴趣可以了解一下，不过都是英文的文档，暂时没找到中文文档，看得我头皮发麻
|