可视化拖拽组件库一些技术要点原理分析（三） about front-end-articles

[Developer27149]

你这高中毕业学历实在是太屌了

[woai3c]

点组合按钮报错

图裂了

[woai3c]

点组合按钮报错

图裂了

我试了一下，点组合按钮没问题。你是不是改代码了？

[woai3c]

点组合按钮报错

图裂了

我试了一下，点组合按钮没问题。你是不是改代码了？

我把代码复制过去也一直报错

我就是把这个项目嵌在我这个项目中

那只能打断点找报错原因了。

[wyf521-sudo]

为什么有些组件不能组合

[woai3c]

为什么有些组件不能组合

按照代码逻辑，只要你把多个组件选在一起就可以组合了。除非你改代码了。

[woai3c]

为什么有些组件不能组合

按照代码逻辑，只要你把多个组件选在一起就可以组合了。除非你改代码了。

[lgh06]

Awsome works!
I found another similar project: https://github.com/daybrush/moveable , and it supports both vue, vue3, react, angular, and lit-html (web components), see packages folder

[uktaine-win]

mark 学习

[jaycheng0]

您好，请问下我本地跑起来的项目，已经拖拽搭建好了一个表单页面，那我怎么拿到这个表单页面代码呢，望指教~

[woai3c]

您好，请问下我本地跑起来的项目，已经拖拽搭建好了一个表单页面，那我怎么拿到这个表单页面代码呢，望指教~

你得把组件数据保存起来，用一个渲染器项目渲染。可以参考一下预览部分的代码，那相当于一个渲染器。

[jaycheng0]

您好，请问下我本地跑起来的项目，已经拖拽搭建好了一个表单页面，那我怎么拿到这个表单页面代码呢，望指教~

你得把组件数据保存起来，用一个渲染器项目渲染。可以参考一下预览部分的代码，那相当于一个渲染器。

感谢指教

[reducm]

楼主教程帮助很大，理清了许多的思路，希望后面有关于底层画布缩放的分享

[ldjWillow]

如果我现在有一个自己的vue项目，怎么把你这个项目作为一个功能引入到已有项目中使用呢？谢谢!

[woai3c]

如果我现在有一个自己的vue项目，怎么把你这个项目作为一个功能引入到已有项目中使用呢？谢谢!

可以考虑一下 iframe

[lydAndtry]

请问没有出现旋转的那个图标是怎么回事呀，具体是在哪里操作的呢

[mingyangbj]

如果我现在有一个自己的vue项目，怎么把你这个项目作为一个功能引入到已有项目中使用呢？谢谢!

用qiankun等微服务也可以

[sherlockyh]

请教一下，为什么文字组件的删除快捷键不起作用呢？是在哪里有限制吗

[woai3c]

请教一下，为什么文字组件的删除快捷键不起作用呢？是在哪里有限制吗

你说的快捷键是哪个？目前可以全选然后按 delete 键删除

[sherlockyh]

请教一下，为什么文字组件的删除快捷键不起作用呢？是在哪里有限制吗

你说的快捷键是哪个？目前可以全选然后按 delete 键删除

Vtext那个组件，选中之后，delete删除不起作用

[woai3c]

是在 demo 里试的吗？什么系统、浏览器？

[sherlockyh]

是在 demo 里试的吗？什么系统、浏览器？

也有在demo里面试过，Windows，然后用的edge浏览器

[woai3c]

是在 demo 里试的吗？什么系统、浏览器？

也有在demo里面试过，Windows，然后用的edge浏览器

你用 chrome 试试看

[sherlockyh]

是在 demo 里试的吗？什么系统、浏览器？

也有在demo里面试过，Windows，然后用的edge浏览器

你用 chrome 试试看
也有试了，好像也不行

[zhang-fafa]

你这组合不完美，要多个组件要完全在选框内才行，当有个组件的宽度或高度大于等于画布时，就永远不能框选中了

改一下这个函数就行
getSelectArea() {
const result = []
// 区域起点坐标
const { x, y } = this.start

        // 定义需要覆盖的比例
        const requiredCoverageRatio = 0.2

        // 计算所有的组件数据，判断是否在选中区域内
        this.componentData.forEach(component => {
            if (component.isLock) return
            const { left, top, width, height } = getComponentRotatedStyle(component.style)
            
            // 选区矩形
            const selectRight = x + this.width
            const selectBottom = y + this.height
            // 组件矩形
            const compRight = left + width
            const compBottom = top + height
            // 计算相交区域的宽度和高度
            const overlapWidth = Math.max(0, Math.min(selectRight, compRight) - Math.max(x, left))
            const overlapHeight = Math.max(0, Math.min(selectBottom, compBottom) - Math.max(y, top))
            
            // 计算组件的总面积和相交区域的面积
            const componentArea = width * height
            const overlapArea = overlapWidth * overlapHeight

            // 如果相交面积超过设定比例，将该组件加入结果
            if ((overlapArea / componentArea) >= requiredCoverageRatio) {
                result.push(component)
            }
        })
        // 返回在选中区域内的所有组件
        return result
    },