PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #5241💬 已回答提出于 2023年7月14日作者 hanzuken0 个反应

在缩放画布中移动时,元素的绝对位置与光标位置不同

快速解答作者 artf

与绝对模式相关的问题在此 https://github.com/GrapesJS/grapesjs/issues/3770

阅读下方完整回答 ↓

问题

GrapesJS 版本

  • 我确认使用最新版本 GrapesJS

你用的是什么浏览器?

Chrome 版本 114.0.5735.199(官方构建)(64 位)

可复制演示链接

https://grapesjs.com/demo.html

描述一下那个虫子

如何复现这个漏洞?

  1. 启用绝对拖拽模式 editor.editor.set('dmode', 'absolute')
  2. 将变焦调至50 editor.Canvas.setZoom(50)
  3. 选择一个组件。
  4. 按下工具栏上的移动按钮

预期的行为是什么? 光标与元素之间的距离与画布缩放为100时相同。

目前的行为是什么? 光标与元素之间的距离相对较远。

行为准则

  • 我同意遵守本项目的行为准则

回答(2)

GJS Helper• 2026年5月17日

你准确指出了GrapesJS中与绝对位置和画布缩放相关的常见问题。这确实是一个bug,拖拽操作的差值计算没有考虑画布当前的缩放水平,导致光标位置和元素实际移动之间存在差异。 根本原因解释 当dmode设置为absolute时,GrapesJS 利用 top 和 left CSS 属性来定位组件。在拖动操作过程中,编辑器根据屏幕像素计算鼠标位置的变化(deltaX, deltaY)。然后尝试将这些差异直接应用于组件的 left 和 top 样式值,这些值以画布像素为单位。 问题出现在画布被放大时(例如,editor.Canvas.setZoom(0.5))。画布的视觉内容被缩小。鼠标在屏幕上的...

相关问答

通过相似的问题讨论继续研究。

问题 #5378

未捕获类型错误:在图层管理器面板拖动组件时无法读取未定义属性(读取“Canvas”)。

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v116.0.5845.97 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?从画布中选择任意组件打开图层...

4 个回答更新于 2023年9月16日

问题 #5563

脚本标签的属性正在画布上被移除。

GrapesJS 版本[X] 我确认使用最新版本 GrapesJS你用的是什么浏览器? 最新版本的Chrome浏览器可复制演示链接 https://grapesjs.com/demo.html描述一下那个虫子 如何复现这个漏洞? 用这个代码把一个html字符串渲染成 grape...

1 个回答更新于 2023年12月20日

问题 #5268

YouTube或Vimeo的自动播放不行

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? Chrome v115 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 如何复现这个漏洞?将视频组件拖放到画布上。选择YouTube或Vi...

3 个回答更新于 2023年8月2日

问题 #3794

当宽度和高度为画布100%时,基本文本组件中的RTE重叠文本

GrapesJS 版本 [X] 我确认使用最新版本 GrapesJS 你用的是什么浏览器? 版本 93.0.4577.82(官方构建)(64位) 可复制演示链接 https://grapesjs.com/demo.html 描述一下那个虫子 ![RTE已澄清](https://...

3 个回答更新于 2021年9月21日

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。