的底部显示,结果并没有达到预期效果
期望达到的预期: 无论画布是按ctrl+鼠标滚动缩放画布,还是通过最佳效果、25%、50%、75%触缩放等始终将最底部的蓝色拖拽与画布底边保持一致
![image](https://private-user-images.githubusercontent.com/15223927/289490517-8b5ab8b5-3b69-4f64-bff2-0218e30716eb.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMzODg2MzksIm5iZiI6MTcyMzM4ODMzOSwicGF0aCI6Ii8xNTIyMzkyNy8yODk0OTA1MTctOGI1YWI4YjUtM2I2OS00ZjY0LWJmZjItMDIxOGUzMDcxNmViLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODExVDE0NTg1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTZiZmZkNDJjNDI2OWZkY2QyNjM1YWExYjc3YTc3ZjZiNTdjNDRiZDE5ZTQzMTc1MmQ3MDAwMmFjMmNiZTM3MGImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.tpj11cgoqRz0hpEe37gvhjl3r9OByudC0cGkE2yi9qg)
未达预期情况描述:
![image](https://private-user-images.githubusercontent.com/15223927/289492807-28bf612c-b773-4fe3-9263-65fd4e6bc7b4.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMzODg2MzksIm5iZiI6MTcyMzM4ODMzOSwicGF0aCI6Ii8xNTIyMzkyNy8yODk0OTI4MDctMjhiZjYxMmMtYjc3My00ZmUzLTkyNjMtNjVmZDRlNmJjN2I0LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODExVDE0NTg1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWJmY2M0MjZiZjVjY2MyYTBjZmEyMzVkYjEzMzc0ODliYjI4OGQ1NjJkMjRjYWYyNWExM2JhNzFlNGE0ZDU0MWQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ogUHtYnHj3sU_yK8y2tzLeBiYy4PgCVwGn_SQCxTbuc)
![image](https://private-user-images.githubusercontent.com/15223927/289493056-d25d7d20-6fab-4150-aab2-ba0ac0d72c2d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMzODg2MzksIm5iZiI6MTcyMzM4ODMzOSwicGF0aCI6Ii8xNTIyMzkyNy8yODk0OTMwNTYtZDI1ZDdkMjAtNmZhYi00MTUwLWFhYjItYmEwYWMwZDcyYzJkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODExVDE0NTg1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJjNTI2Y2ViMTdhZmE4Y2UyYzI4MzljZDYwMzY2NzNmMjlhY2JjZTVmYTNiNDk1ZGY1ZDk4M2VjNzM1YmE4ZDkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.kUXhS3N2JX-e6s1ePGjMkx0rFKHl1E9XJNs-hGYUozE)
测试的以下两种情况,会达到预期效果:
情况一: 当在画布中,放置一个左侧的素材图片进入画布以后,达到预期显示效果,且没有任何问题(即在vuex的dWidgets中有一个type: w-image类型的素材时)
情况二: 当在画布中拖拽一个文字素材,且select激活这个文字后,缩放时也会达到预期效果(必须激活选中文字在进行画布调整)
现在的功能实现方式:
-
新写了一个文件resizeable.vue
,放在了:src/views/index.vue中,与组件调用放在了一起,为
-
resizeable.vue即为moveable.vue的代码,只是作了一些简化
`
<script lang="ts">
import {defineComponent, nextTick} from 'vue'`
`
import Moveable, {EVENTS} from 'moveable' // PROPERTIES, METHODS,
import MoveableHelper from 'moveable-helper'
import {mapGetters, mapActions} from 'vuex'
// import { setTransformAttribute } from '@/common/methods/handleTransform'
import useSelecto from './Selecto'
import store from "@/store";
export default defineComponent({
setup() {
},
data() {
return {}
},
computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines']),
watch: {
dWidgets: {
handler(val) {
if (store.getters.dWidgets.length > 0) {
if (this.resizeable.target != '.design-canvas') {
this.resizeable.target = '.design-canvas'
}
} else {
if (this.resizeable.target !== '[id="none"]') {
this.resizeable.target = '[id="none"]'
}
}
},
deep: true,
},
updateRect(val) {
this.resizeable.updateRect()
},
},
mounted() {
console.log("resizable....")
// setInterval(() => {
// console.log("setinterval.")
// this.moveable.updateRect()
// }, 3000)
const moveableOptions: any = {
target: document.querySelector('[id="none"]'),
zoom: 0.8,
draggable: false,
clippable: false, // 裁剪
throttleDrag: 0,
resizable: true,
throttleResize: 0,
scalable: false,
throttleScale: 0,
keepRatio: false,
rotatable: false,
throttleRotate: 0,
renderDirections: ['s'], // ['nw', 'ne', 'sw', 'se'] // 'e'
pinchable: true, // ["draggable", "resizable", "scalable", "rotatable"]
origin: false,
defaultGroupOrigin: '0% 0%',
// 样式相关
rotationPosition: 'bottom',
className: 'resize-moveable-style',
// -- 吸附对齐 Start --
snappable: true,
elementGuidelines: [],
verticalGuidelines: [],
horizontalGuidelines: [],
snapThreshold: 4,
isDisplaySnapDigit: true,
snapGap: false,
snapElement: true,
snapVertical: true,
snapHorizontal: true,
snapCenter: false,
snapDigit: 0,
triggerAblesSimultaneously: true,
}
const resizeable = new Moveable(document.body, moveableOptions)
this.resizeable = resizeable
`
`
resizeable
.on('resize', (args: any) => {
const {target, width, height} = args
store.commit('setShowMoveable', false)
// 设置画布
store.dispatch('updatePageData', {
key: 'height',
value: height,
pushHistory: true,
})
store.dispatch('updatePageData', {
key: 'width',
value: width,
pushHistory: true,
})
target.style.width = width + "px";
target.style.height = height + "px";
// const pageElement = document.querySelector("#page-design")
// pageElement?.scrollTo( 0, document.body.scrollHeight)
}).on('resizeEnd', () => {
store.commit('setShowMoveable', true)
})
},
async created() {
await nextTick()
const Ele = document.getElementById('page-design')
Ele?.addEventListener('scroll', () => {
this.resizeable.updateRect()
})
},
methods: {
...mapActions(['updateWidgetData', 'updateWidgetMultiple', 'pushHistory']),
},
})
</script>
<style lang="less">
@import url('./style/index.less');
</style>
`
- 就是通过监听到调整画布以后,执行resizeable.vue中的watch->updateRect()方法,但是moveable里的updateRect并没有效果, 可是当执行鼠标滚动后,会触发代码中的
· Ele?.addEventListener('scroll', () => {
this.moveable.updateRect()
})
`代码,结果就出现了预期的效果
- 测试的时候发现每调用一次 watch->updateRect()方法时,显示在画布最下面的那个底部拖拽所在的位置,就是前一步
的高度, 好像是慢了一步,并没有实时显示在当前的画布高度下方,从而没有希望的效果