课堂展示:画布选中物品,移除优化
This commit is contained in:
parent
ccbafea3d4
commit
4bbe89ed31
|
@ -1,12 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="whiteboart-container" :style="{ height: height + 'px' }">
|
<div class="whiteboart-container" :style="{ height: height + 'px' }">
|
||||||
<div class="canvasBox" ref="box"
|
<div class="canvasBox" ref="box" @mouseleave="handleMouseLeave" ></div>
|
||||||
@mousedown="handleMouseDown"
|
|
||||||
@mousemove="handleMouseMove"
|
|
||||||
@mouseup="handleMouseUp"
|
|
||||||
@mouseleave="handleMouseLeave"
|
|
||||||
|
|
||||||
></div>
|
|
||||||
|
|
||||||
<div class="footerLeft" @click.stop
|
<div class="footerLeft" @click.stop
|
||||||
:style="type == 'design' ? ['top: 10px', 'justify-content: space-between'] : ['bottom: 10px', 'justify-content: center']">
|
:style="type == 'design' ? ['top: 10px', 'justify-content: space-between'] : ['bottom: 10px', 'justify-content: center']">
|
||||||
|
@ -358,10 +352,6 @@ const currentType = ref('selection')
|
||||||
|
|
||||||
// dom节点
|
// dom节点
|
||||||
const box = ref(null)
|
const box = ref(null)
|
||||||
const startX= ref(0)
|
|
||||||
const startY= ref(0)
|
|
||||||
const endX= ref(0)
|
|
||||||
const endY= ref(0)
|
|
||||||
|
|
||||||
// 应用实例
|
// 应用实例
|
||||||
let app = null
|
let app = null
|
||||||
|
@ -518,10 +508,6 @@ const backToCenter = () => {
|
||||||
app.scrollToCenter()
|
app.scrollToCenter()
|
||||||
}
|
}
|
||||||
|
|
||||||
const cancelActiveElement = () =>{
|
|
||||||
app.cancelActiveElement()
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 显示全部
|
// 显示全部
|
||||||
const showFit = () => {
|
const showFit = () => {
|
||||||
|
@ -755,7 +741,7 @@ const init = () => {
|
||||||
})
|
})
|
||||||
// 监听元素激活事件
|
// 监听元素激活事件
|
||||||
app.on('activeElementChange', element => {
|
app.on('activeElementChange', element => {
|
||||||
console.log('点击元素 监听 activeElementChange-----------', element)
|
console.log('点击元素 监听 activeElementChange-----------')
|
||||||
if (activeElement.value) {
|
if (activeElement.value) {
|
||||||
activeElement.value.off('elementRotateChange', onElementRotateChange)
|
activeElement.value.off('elementRotateChange', onElementRotateChange)
|
||||||
}
|
}
|
||||||
|
@ -805,7 +791,6 @@ const init = () => {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const isDragging = ref(false);
|
|
||||||
/**
|
/**
|
||||||
* 课堂展示-鼠标离开白板监听事件:该事件是避免,选中状态,在其他地方点击、后退、删除等事件,会删除白板内选中的元素
|
* 课堂展示-鼠标离开白板监听事件:该事件是避免,选中状态,在其他地方点击、后退、删除等事件,会删除白板内选中的元素
|
||||||
*/
|
*/
|
||||||
|
@ -813,27 +798,8 @@ const handleMouseLeave = () => {
|
||||||
console.log('离开白板')
|
console.log('离开白板')
|
||||||
// 清除激活项--点击事件的激活项
|
// 清除激活项--点击事件的激活项
|
||||||
app.cancelActiveElement()
|
app.cancelActiveElement()
|
||||||
|
// TODO 缺失点击拖动范围的取消激活项……
|
||||||
// this.isDragging = false;
|
|
||||||
// this.drawRectangle();
|
|
||||||
};
|
};
|
||||||
const handleMouseDown = (event) =>{
|
|
||||||
// this.isDragging = true;
|
|
||||||
// this.startX = event.clientX;
|
|
||||||
// this.startY = event.clientY;
|
|
||||||
}
|
|
||||||
const handleMouseMove =(event)=> {
|
|
||||||
// if (this.isDragging) {
|
|
||||||
// this.endX = event.clientX;
|
|
||||||
// this.endY = event.clientY;
|
|
||||||
// this.drawRectangle();
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
const handleMouseUp = () =>{
|
|
||||||
// this.isDragging = false;
|
|
||||||
// this.drawRectangle();
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// 暴露方法
|
// 暴露方法
|
||||||
defineExpose({
|
defineExpose({
|
||||||
|
@ -844,7 +810,6 @@ defineExpose({
|
||||||
getCanvasBase64,
|
getCanvasBase64,
|
||||||
setCanvasData,
|
setCanvasData,
|
||||||
getCanvasBlob,
|
getCanvasBlob,
|
||||||
cancelActiveElement
|
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -814,6 +814,7 @@ const editWork = async (cform) =>{
|
||||||
let res = await updateClasswork(cform);
|
let res = await updateClasswork(cform);
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
ElMessage.success('更新成功');
|
ElMessage.success('更新成功');
|
||||||
|
taskList.value = []
|
||||||
// 清空左侧 选中的布置列表 并刷新列表
|
// 清空左侧 选中的布置列表 并刷新列表
|
||||||
if(isShow.value){
|
if(isShow.value){
|
||||||
currentRow.value.id = 1;
|
currentRow.value.id = 1;
|
||||||
|
|
Loading…
Reference in New Issue