Skip to content

Commit

Permalink
fix: 修复元素拖拽上图没有判断画布区域的问题 (#391)
Browse files Browse the repository at this point in the history
wuchenguang1998 authored May 20, 2024
1 parent 929df04 commit 0a8fb97
Showing 4 changed files with 47 additions and 11 deletions.
4 changes: 4 additions & 0 deletions src/components/fontStyle.vue
Original file line number Diff line number Diff line change
@@ -59,6 +59,7 @@

<script setup name="ImportSvg">
import useSelect from '@/hooks/select';
import useCalculate from '@/hooks/useCalculate';
import usePageList from '@/hooks/pageList';
import { fabric } from 'fabric';
import { v4 as uuid } from 'uuid';
@@ -90,8 +91,11 @@ const {

const { canvasEditor } = useSelect();

const { isOutsideCanvas } = useCalculate();

// 按照类型渲染
const dragItem = async (e, item) => {
if (isOutsideCanvas(e.clientX, e.clientY)) return;
Spin.show({
render: (h) => h('div', t('alert.loading_data')),
});
4 changes: 4 additions & 0 deletions src/components/importSvgEl.vue
Original file line number Diff line number Diff line change
@@ -66,6 +66,7 @@

<script setup name="ImportSvg">
import useSelect from '@/hooks/select';
import useCalculate from '@/hooks/useCalculate';
import usePageList from '@/hooks/pageList';
import { fabric } from 'fabric';
import { v4 as uuid } from 'uuid';
@@ -96,8 +97,11 @@ const {

const { canvasEditor } = useSelect();

const { isOutsideCanvas } = useCalculate();

// 按照类型渲染
const dragItem = (e) => {
if (isOutsideCanvas(e.clientX, e.clientY)) return;
const target = e.target;
const imgType = canvasEditor.getImageExtension(target.src);
if (imgType === 'svg') {
24 changes: 13 additions & 11 deletions src/components/tools.vue
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
<div>
<Divider plain orientation="left">{{ $t('common_elements') }}</Divider>
<div class="tool-box">
<span @click="() => addText()" :draggable="true" @dragend="onDragend('text')">
<span @click="() => addText()" :draggable="true" @dragend="onDragend('text', $event)">
<svg
t="1650875455324"
class="icon"
@@ -19,7 +19,7 @@
></path>
</svg>
</span>
<span @click="() => addTextBox()" :draggable="true" @dragend="onDragend('textBox')">
<span @click="() => addTextBox()" :draggable="true" @dragend="onDragend('textBox', $event)">
<svg
t="1650854954008"
class="icon"
@@ -36,7 +36,7 @@
></path>
</svg>
</span>
<span @click="() => addRect()" :draggable="true" @dragend="onDragend('rect')">
<span @click="() => addRect()" :draggable="true" @dragend="onDragend('rect', $event)">
<svg
t="1650855811131"
class="icon"
@@ -53,7 +53,7 @@
></path>
</svg>
</span>
<span @click="() => addCircle()" :draggable="true" @dragend="onDragend('circle')">
<span @click="() => addCircle()" :draggable="true" @dragend="onDragend('circle', $event)">
<svg
t="1650855860236"
class="icon"
@@ -70,7 +70,7 @@
></path>
</svg>
</span>
<span @click="() => addTriangle()" :draggable="true" @dragend="onDragend('triangle')">
<span @click="() => addTriangle()" :draggable="true" @dragend="onDragend('triangle', $event)">
<svg
t="1650874633978"
class="icon"
@@ -88,7 +88,7 @@
</svg>
</span>
<!-- 多边形按钮 -->
<span @click="() => addPolygon()" :draggable="true" @dragend="onDragend('polygon')">
<span @click="() => addPolygon()" :draggable="true" @dragend="onDragend('polygon', $event)">
<svg
t="1650874633978"
class="icon"
@@ -186,6 +186,7 @@ import { v4 as uuid } from 'uuid';
// import initializeLineDrawing from '@/core/remove/initializeLineDrawing';
import { getPolygonVertices } from '@/utils/math';
import useSelect from '@/hooks/select';
import useCalculate from '@/hooks/useCalculate';
import { useI18n } from 'vue-i18n';
// 默认属性
@@ -197,6 +198,7 @@ const dragOption = {
};
const { t } = useI18n();
const { fabric, canvasEditor } = useSelect();
const { getCanvasBound, isOutsideCanvas } = useCalculate();
const state = reactive({
isDrawingLineMode: false,
lineType: false,
@@ -335,7 +337,9 @@ const drawingLineModeSwitch = (type) => {
};
// 拖拽开始时就记录当前打算创建的元素类型
const onDragend = (type) => {
const onDragend = (type, e) => {
// 若拖拽结束点在画布外,则不进行绘制
if (isOutsideCanvas(e.clientX, e.clientY)) return;
// todo 拖拽优化 this.canvas.editor.dragAddItem(event, item);
switch (type) {
case 'text':
@@ -367,10 +371,8 @@ onMounted(() => {
canvasEditor.canvas.on('drop', (opt) => {
// 画布元素距离浏览器左侧和顶部的距离
const offset = {
left: canvasEditor.canvas.getSelectionElement().getBoundingClientRect().left,
top: canvasEditor.canvas.getSelectionElement().getBoundingClientRect().top,
};
const { left, top } = getCanvasBound();
const offset = { left, top };
// 鼠标坐标转换成画布的坐标(未经过缩放和平移的坐标)
const point = {
26 changes: 26 additions & 0 deletions src/hooks/useCalculate.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/*
* @Descripttion: useCalculate
* @version:
* @Author: wuchenguang1998
* @Date: 2024-05-18 15:42:17
* @LastEditors: wuchenguang1998
* @LastEditTime: 2024-05-18 17:28:34
*/

export default function useCalculate() {
const canvasEditor = inject('canvasEditor');

// 获取画布的DOMRect对象
const getCanvasBound = () => canvasEditor.canvas.getSelectionElement().getBoundingClientRect();

// 判断拖拽结束的坐标是否在画布外
const isOutsideCanvas = (x, y) => {
const { left, right, top, bottom } = getCanvasBound();
return x < left || x > right || y < top || y > bottom;
};

return {
getCanvasBound,
isOutsideCanvas,
};
}

0 comments on commit 0a8fb97

Please sign in to comment.