将 SVG 从文件加载到画布并取消分组

2024-04-19

我使用 FabricJS 和函数将 SVG 文件上传到画布

fabric.loadSVGFromURL (url, function(objects, options){
    group = fabric.util.groupSVGElements(objects, options);
    canvas.add(group).centerObject(group).renderAll();
});

这非常有效。然而,我想做的下一步是取消最近添加的组的分组。我需要取消分组的原因是我希望能够通过单击组的子元素来选择它们,因为如果它们被分组,则无法访问这些元素。

我找到了一个snippet https://gist.github.com/msievers/6069778但是,当我使用组创建的宽度执行取消分组时groupSVGElements元素失去了原来的位置,扰乱了我加载的整个 svg。

有谁知道如何取消加载的 SVG 分组并仍然保留元素的原始位置?


您仍然可以使用以下方式访问每个元素perPixelTargetFind

当设置为true,对象是在画布上“找到”每个像素的,而不是根据

边界框。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 SVG 从文件加载到画布并取消分组 的相关文章

随机推荐

  • 为什么 HTML 5 音频忽略移动设备音频设置(例如静音或音量)?

    我有一个针对移动 Android 用户的网站 我正在使用 HTML5 音频来播放背景音乐 即使设备处于静音状态也会播放音频 无论设备音量设置如何 音频都会以最高音量播放 有谁知道为什么会发生这些事情或如何获取设备当前的音频设置 我更喜欢客户
  • 在 Azure 服务总线命名空间上启用 CORS

    我想在 JavaScript 中使用 Azure 服务总线 REST API 不幸的是 我遇到了跨源问题 因为我的服务总线命名空间与我的站点不在同一域中 我知道您可以使用许多 Azure 服务启用 CORS 但我在 Azure 文档或其他地
  • 从 data.frame 中删除 NA 超过列长度 15% 的列 [重复]

    这个问题在这里已经有答案了 我有一个data frame10 个不同的列 每列的长度相同 我想消除任何具有 NA 大于柱长的 15 我首先需要制作一个函数来计算百分比NA对于每一列 然后再制作另一列data frame我在哪里应用该函数 最
  • 在 Spring MVC 中管理 HTML 资源(CSS、JS 文件)

    是否可以像grails resources那样在Spring MVC中管理HTML资源 与此类似 http www anyware co uk 2005 2011 09 12 optimising your application with
  • 二维的 Scipy curve_fit 不起作用 - 对象太深?

    我有一个 2400 x 2400 的数据数组 如下所示 data 2 302670298082603040e 01 2 304885241061924717e 01 2 305029774024092148e 01 2 3048071008
  • 如何在 tkinter 中找到当前小部件的大小?

    我在用着Python and Tkinter 并且我需要知道小部件的当前尺寸 宽度 高度 我试过了somewidget width 但它仅返回一个固定值 并且每当小部件大小发生变化时 例如 当调整窗口大小时 它都不会更新 somewidge
  • 如何使 array.forEach(async fn) 同步?

    假设我有一个数组 我想对数组的每个元素执行异步函数 let a x1 x2 x3 I want to await a forEach async x gt which equals to let fn async x gt await fn
  • 防止没有 GL 扩展的设备从 Google Play 下载应用程序

    是否可以使应用程序在 Google Play 商店中没有特定 OpenGL ES 扩展的设备上不可用 Since
  • 如何使用 迭代嵌套列表?

    使用 JSF 2 0 我需要显示一个表 其中每一行都包含一个可打开弹出窗口的链接 我有两个模型 A其中有id and List b 属性和B其中有id and name特性 在我的支持豆中 我有一个List a 财产 在我看来 我正在使用
  • 特征内的常量表达式?

    我有一个特点 看起来像这样 pub trait Buf
  • Node JS 和 Webpack 意外令牌 <

    我已经开始学习了Node JS 这是我的文件 索引 html div h1 Hello h1 h1 h1 div app js var http require http path require path fs require fs co
  • 替换 Pandas 系列给定条件中的值

    这是一个微不足道的问题 我只是无法找到明确的答案 我有一个系列对象 random pd Series np random randint 10 10 我想将所有大于 1 的值替换为 0 我该如何执行此操作 我试过了 Random repla
  • iOS 捏合缩放和两指同时旋转

    这是我的代码 视图加载 UIPinchGestureRecognizer pinch UIPinchGestureRecognizer alloc initWithTarget self action selector pinch self
  • Applescript 从同一目录运行 bash 脚本

    我正在尝试构建一个 AppleScript 来启动我的 shell 脚本 路径结构如下 Users ryan myscript applescript scpt bash sh 我的AppleScript如下 tell applicatio
  • glDrawElements 在 PyOpenGL 中绘制立方体

    我最近开始通过 Python 学习 OpenGL 这要归功于几个教程 尤其是 Nicolas P Rougier 的教程 http www labri fr perso nrougier teaching opengl http www l
  • Inno Setup 选择一个目录来安装预定义集中的文件

    在这种情况下 我需要将文件安装到特定目录 但在不同的计算机上它可能位于不同的文件夹中 所以我需要检查哪个是正确的 例如 我有一个文件 需要将其安装在A文件夹或B文件夹或C文件夹 取决于计算机有A or B or C 所以我需要先检查一下计算
  • TFS 重新成为孙子

    几天来我一直在尝试一切我能想到的方法来让它发挥作用 无基础的合并 重新设置父级 分支然后重新设置父级 我想重新设置一个分支的父级 使其成为其中一个子级的子级 并打破该分支与其父级之间的关系 在下图中 我想将 Cassidy Main 和 B
  • Android 获取日期并插入到文件名

    我有一个非常烦人的问题 我想获取当前日期 时间并将其插入文件名中 但我一生都无法让它工作 我想获取 2011 11 18 12 13 57 的时间 然后将其插入到我的文件名中 文件名 2011 11 18 12 13 57 tar gz 我
  • 如何通过单击超链接打开文件

    我有这张桌子 我想单击链接 文件 无论什么文件 将在新的弹出窗口中打开 这是我的代码
  • 将 SVG 从文件加载到画布并取消分组

    我使用 FabricJS 和函数将 SVG 文件上传到画布 fabric loadSVGFromURL url function objects options group fabric util groupSVGElements obje