【问题标题】:How to using Snap.svg and Snap.js via angular-snap together?如何通过 angular-snap 一起使用 Snap.svg 和 Snap.js?
【发布时间】:2014-07-15 07:57:57
【问题描述】:

我尝试使用两个依赖项:

"snap.svg": "~0.2.0", # snapsvg.io 
"angular-snap": "~1.4.1", # jtrussell.github.io/angular-snap.js/

我猜,似乎 angular-snap 使用全局 Snap 对象作为 snap.svg 并覆盖 Snap.svg 的 Snap 对象。 按照这个顺序,Snap.svg 功能消失了。如果我恢复导入顺序,则会丢失一些 Snap.js 功能。

观看此 plunkr http://plnkr.co/edit/rE4pNDqQnBh2e5wtqGUO?p=preview 并交换包含。

如何同时使用这两个库? 谢谢!

【问题讨论】:

    标签: angularjs src snap.svg


    【解决方案1】:

    我认为你最好的选择是使用像 RequireJS 这样的模块加载器以受控方式将 Snap.js 和 Snap.svg 拉入你的应用程序,看起来它们都支持 AMD 模块加载器。

    不幸的是,这意味着您将无法再依赖 Angular Snap 的 snap-content 指令。您需要自己创建一个新的 Snap.js snapper 实例并使用snapRemote#register

    这是一些伪代码:

    require(['jakiestfu/Snap.js/snap'], function(SnapJS) {
      snapRemote.register(new SnapJS(snapOptions));
    });
    
    require(['adobe-webplatform/Snap.svg/snap.svg'], function(SnapSVG) {
      // Do stuff with SnapSVG...
    });
    

    此外,您需要为初始化 snapper 的元素分配一个 "snap-content" 类名(这通常也由 snap-content 指令处理)。

    编辑

    我不推荐这种方法,但如果您不介意一些黑客攻击,它应该也可以工作:

    在你的脑海中:

    <script src="//cdn.jsdelivr.net/snap.svg/0.2.0/snap.svg.js" type="text/javascript"</script>
    <script>
      // Save Snap.svg before it gets clobbered!
      window.SnapSVG = Snap;
    </script>
    <script src="snap.js" type="text/javascript" charset="utf-8"></script>
    

    之后,您可以继续将 svg Snap 用作 SnapSVG 或任何您想调用的名称。模块加载器方法可以说在几乎任何你想看的方式上都更好......除非你需要明天发货:)。

    编辑 2

    我刚刚发布了 Angular Snap v1.5.0,它使 Snap.js 构造函数成为注入依赖项,而不是我们只是在窗口中寻找的东西。你现在可以提供自己的构造函数,也许在它被破坏之前保存它:

    myApp.config(function(SnapConstructorProvider) {
      SnapConstructorProvider.use(window.Snap);
    });
    

    使用它,即使您使用模块加载器拉入 Snap.js 脚本,您仍然可以利用 snap-content 指令。

    【讨论】:

    • 使用替代方法编辑...可以肯定的是,这是一个 hack,但您可能不太热衷于重新组织所有内容以使用模块加载器。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-02-01
    • 2015-04-20
    • 2023-03-18
    • 1970-01-01
    • 2016-09-21
    • 2014-05-09
    相关资源
    最近更新 更多