Question

我正在尝试Sproutcore，并尝试在sproutcore应用程序中使用SVG（标准矢量图形）。我需要能够＆＃34;画＆＃34;在某种画布上，显示线条，方框，图像等元素。 SVG拥有一切。我的想法是使用StaticContentView包含SVG-Image：

＆＃13;

svg: SC.StaticContentView.design({
  classNames: ['my-static-content-view'],
  content: "<svg version='1.1' width='970' height='219'> \
				<image id='someimage' x='410.5' y='122' width='25' height='25' xlink:href='"+static_url('/resources/layout/someimage.png')+"'></image> \
			</svg>",
  tagName: 'section' 
})

＆＃13;

到目前为止效果很好，svg-image显示在app中，子图像也被加载了。现在我的问题是：我希望能够在运行时操作svg-image，添加新节点和将sproutcore-events绑定到不同的节点。例如：当单击codesnippet中的someimage时，我想要触发一个事件。我想我可以使用

绑定事件

＆＃13;

SC.Event.add(someelement, "click", someHandler);

＆＃13;

但我需要能够访问svg-DOM节点，＆＃34; someimage＆＃34;，以便将事件绑定到它。我用Google搜索并尝试使用$（＆＃39; someimage＆＃39;）。get（0）和许多其他方法，但似乎没有任何工作。

任何人都可以给我一个关于如何访问该元素的提示吗？我可能在第一时间使用StaticContentView做错了吗？我可以将SVG构建为本机Sproutcore-Element或View以使事情变得更容易吗？

Answer 1

您的解决方案可能有效，但不正确。您应该使用鼠标*事件来实现更改。默认情况下，SproutCore会将所有事件附加到您的视图中，并在事件发生时检查您是否在视图上实现了事件功能。

从鼠标*事件处理程序中，您可以使用此函数通过CoreQuery引用当前视图。$并通过类似jQuery的方法处理svg元素/ canvas元素。

你的方法不正确的原因是现在很难将内容的任何更改传递到应用程序的其余部分而不必编写粘合代码，这是SproutCore编写的主要元素之一取代

前一段时间我写了一篇博文，介绍了如何制作自定义SC.View。虽然它并没有完全触及你想要做的事情，但基本要素或多或少都是一样的。

https://mauritslamers.wordpress.com/2013/01/22/how-to-make-a-custom-view-in-sproutcore-html-style/

修改：忘记了博文的链接

Answer 2

实际上很容易，我有点惭愧我为此开了一个新线程，因为这通常意味着我完全迷失了。

解决方案：如上所述，很容易在运行时将sproutcore事件绑定到对象（例如，在运行时添加新的DOM元素以使它们触发sproutcore事件）

SC.Event.add(elem, "click", someHandler);

我的问题是如何访问DOM元素。事实证明，常见的jQuery函数$（）也适用于视图。我只需要在StaticContentView上直接调用它，而且我忘记了＃（duh）。因此，在上面的示例中，可以使用以下代码获取someimage-DOM元素：

elem = svg.$('#someimage')[0];

请注意，上面的代码中的svg是StaticContentView中的静态内容，而不是静态内容中的svg-HTML元素。我刚刚意识到回溯可能有点棘手。

所以完整的代码在sproutcore应用程序“App”中的某处执行，mainPane只包含StaticContentView“svg”，如下所示：

elem = App.mainPane.svg.$('#someimage')[0];
SC.Event.add(
  elem,
  "click", 
  function(){alert('clicked!');}
);

希望有人遇到同样的问题并节省一些时间阅读。

其他：当svg-view不是你窗格的最顶层视图时，使用SC.outlet方法真的很方便。看看here。

Sproutcore中的SVG，使用Sproutcore访问DOM节点，将sproutcore-events绑定到DOM

2 个答案: