Comments (25)
你这高中毕业学历实在是太屌了
from front-end-articles.
点组合按钮报错
图裂了
from front-end-articles.
点组合按钮报错
图裂了
我试了一下,点组合按钮没问题。你是不是改代码了?
from front-end-articles.
点组合按钮报错
图裂了
我试了一下,点组合按钮没问题。你是不是改代码了?
我就是把这个项目嵌在我这个项目中
那只能打断点找报错原因了。
from front-end-articles.
from front-end-articles.
按照代码逻辑,只要你把多个组件选在一起就可以组合了。除非你改代码了。
from front-end-articles.
按照代码逻辑,只要你把多个组件选在一起就可以组合了。除非你改代码了。
from front-end-articles.
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
from front-end-articles.
mark 学习
from front-end-articles.
您好,请问下我本地跑起来的项目,已经拖拽搭建好了一个表单页面,那我怎么拿到这个表单页面代码呢,望指教~
from front-end-articles.
您好,请问下我本地跑起来的项目,已经拖拽搭建好了一个表单页面,那我怎么拿到这个表单页面代码呢,望指教~
你得把组件数据保存起来,用一个渲染器项目渲染。可以参考一下预览部分的代码,那相当于一个渲染器。
from front-end-articles.
您好,请问下我本地跑起来的项目,已经拖拽搭建好了一个表单页面,那我怎么拿到这个表单页面代码呢,望指教~
你得把组件数据保存起来,用一个渲染器项目渲染。可以参考一下预览部分的代码,那相当于一个渲染器。
感谢指教
from front-end-articles.
楼主教程帮助很大,理清了许多的思路,希望后面有关于底层画布缩放的分享
from front-end-articles.
如果我现在有一个自己的vue项目,怎么把你这个项目作为一个功能引入到已有项目中使用呢?谢谢!
from front-end-articles.
如果我现在有一个自己的vue项目,怎么把你这个项目作为一个功能引入到已有项目中使用呢?谢谢!
可以考虑一下 iframe
from front-end-articles.
请问没有出现旋转的那个图标是怎么回事呀,具体是在哪里操作的呢
from front-end-articles.
如果我现在有一个自己的vue项目,怎么把你这个项目作为一个功能引入到已有项目中使用呢?谢谢!
用qiankun等微服务也可以
from front-end-articles.
请教一下,为什么文字组件的删除快捷键不起作用呢?是在哪里有限制吗
from front-end-articles.
请教一下,为什么文字组件的删除快捷键不起作用呢?是在哪里有限制吗
你说的快捷键是哪个?目前可以全选然后按 delete 键删除
from front-end-articles.
请教一下,为什么文字组件的删除快捷键不起作用呢?是在哪里有限制吗
你说的快捷键是哪个?目前可以全选然后按 delete 键删除
Vtext那个组件,选中之后,delete删除不起作用
from front-end-articles.
是在 demo 里试的吗?什么系统、浏览器?
from front-end-articles.
是在 demo 里试的吗?什么系统、浏览器?
也有在demo里面试过,Windows,然后用的edge浏览器
from front-end-articles.
是在 demo 里试的吗?什么系统、浏览器?
也有在demo里面试过,Windows,然后用的edge浏览器
你用 chrome 试试看
from front-end-articles.
是在 demo 里试的吗?什么系统、浏览器?
也有在demo里面试过,Windows,然后用的edge浏览器
你用 chrome 试试看
也有试了,好像也不行
from front-end-articles.
你这组合不完美,要多个组件要完全在选框内才行,当有个组件的宽度或高度大于等于画布时,就永远不能框选中了
改一下这个函数就行
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
},
from front-end-articles.
Related Issues (20)
- 套件问题 HOT 2
- 如何适配呢? HOT 1
- 页面上不是经常容易出现顶部的swiper组件嘛 HOT 1
- 2021 年终总结:奔向北京,迎接 996! HOT 20
- 手把手教你写一个简易的微前端框架 HOT 5
- 点击画布中的组件没有选中的8个点 HOT 1
- 可视化拖拽组件库一些技术要点原理分析(四) HOT 16
- markdown 编辑器实现双屏同步滚动 HOT 1
- 组合功能只有在画布上操作才可以实现,在其他组件上操作会拖动组件,可以在其他逐渐锁定的情况下进行拖拽组合吗 HOT 1
- 有个疑惑点,画布上拖拽的数据是根据componentData变化的还是curComponent,没发现两者的关联之处,求指导
- qwq HOT 1
- 协同文档 HOT 1
- > > > > 你好,关于发布的部分可以详细说明下吗? HOT 2
- 【开源自荐】每日更新的前端面试题库
- Vue 加载远程组件的解决方案 HOT 2
- 一个 git 仓库下拥有多个项目的 git hooks 配置方案
- 从零开始实现一个玩具版浏览器渲染引擎
- 低代码与大语言模型的探索实践 HOT 3
- 如何为 Nestjs 编写单元测试和 E2E 测试
- 前端性能优化:从系统分析到实践策略
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from front-end-articles.