将现有的 SVG 或 HTML5 元素添加到 Box2D 世界答案

【问题标题】：Add existing SVG or HTML5 Elements to a Box2D World将现有的 SVG 或 HTML5 元素添加到 Box2D 世界
【发布时间】：2012-07-05 15:04:17
【问题描述】：

我有一个主要由元素组成的 SVG 徽标。我想对此进行动画处理，或者更具体地说，将其放入“重力世界”。我希望使用 Box2D（网络端口）。

我确实是 Box2D 和 Canvas 的菜鸟，但我已经使用 canvg 将我的 SVG 转换为 HTML5 画布，我现在正在阅读 Box2dWeb 的入门教程，我可以了解如何用重力创建一个世界，但我找不到任何行走现有 SVG 或 Canvas 并简单地将形状添加到该世界的示例。

看来您需要使用 Box2D 绘图方法。谁能指点我一个简单的例子，它采用现有组形状（SVG 或 Canvas 上），然后简单地将它们放到 Box2DWeb 重力世界上，这样它们就可以简单地折叠到底部，就像几乎所有的现有的 Box2D 演示和教程？

请注意，使用 CanVG 时，我不是自己将形状添加到 Canvas，而是从 SVG 为我创建 Canvas。

【问题讨论】：

在意识到需要一些工作才能使用 SVG 后，我更改了答案，请在下面查看我的更新答案。

标签： html animation svg box2d gravity

【解决方案1】：

您可以在 box2d 上添加任何您想要的内容。如果你想画跳舞的大象而不是盒子形状，那取决于你。否则游戏会显得很无聊。

没有什么能阻止您将 SVG、canvas、WebGL 甚至 HTML 与 box2d 一起使用，如果您不想使用 box2d 绘图方法，则无需使用。

请参阅this blogpost（和code）以将box2d 与raphaël（SVG）一起使用。 Dmitry Baranovskiy（Raphaël 的作者）还有一个名为 newton.js 的自定义 box2d 端口/包装器 shown some demos。它尚未发布 AFAIK，但它承诺提供更简单且更像 javascript 的 API。

【讨论】：

谢谢，但这并不是我想要的简单介绍。所以它可以做到，但就像我见过的其他例子一样，几乎任何事情都可以做到。我真正需要的是一个简单的例子，说明如何将我现有的元素添加到 Box2D 世界并让它们掉落。

【解决方案2】：

我真的不知道'Box2d'，我不确定这是否是你的意思，但只是为了澄清你是否需要它，在 HTML5 中，它就像拥有背景或样式一样<table>，如果您不知道，这与 MS Word 中的表格几乎相同。

示例画布：

<canvas id="myCanvas" width="200" height="100"></canvas>

更多颜色和样式：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

如果在 'Box2d' 中允许添加一些 javascript：

<script>
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");

    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
</script>

【讨论】：

我有点困惑 - 您是否发布了正确问题的答案？
这就是我在上面的意思，我不确定这是不是你的意思，我对'Box2d'并不完全熟悉

【解决方案3】：

我一直希望有赏金的人能够为我说明“重力演示”的“你好世界”，它可以动画一些任意形状。到目前为止，我已经看到（和找到）的文章和链接比我正在寻找的要复杂得多。

虽然我不想回答我自己的问题，但我只想设置标准。这正是我想要的；

http://mrdoob.com/projects/chromeexperiments/google-gravity/

此代码的此脚本已根据 GPL3 获得许可，我理解并且我已在我的网站上成功尝试过。事实上，它只是导致我页面上的所有 DIV 都被丢弃，所以它只是票，我可以使用它。

然而，这不是一个简单的脚本。如果可能的话，我会更喜欢一个简单的独立样本。如果做不到这一点，希望这个答案能帮助其他寻找类似东西的人。

[更新]

我也发现了这个插件，虽然它有点 CPU 密集型并且对我来说崩溃了 Chrome。

http://tinybigideas.com/plugins/jquery-gravity/

如果有任何更好的答案，我仍然很乐意奖励赏金。

【讨论】：

【解决方案4】：

我很确定这就是你想要的，它使用Gravity Script（文件很大，因为它包含 jQuery 和 Box2d.js）：

演示：http://jsfiddle.net/SO_AMK/Cf7jn/

JavaScript：没有！它在它的默认配置中。

【讨论】：

感谢您的尝试，但正如您所说，这不是你好世界，也不是重力下落的形状。 SVG 真的是锦上添花。 DIV 没问题，SVG 元素并没有那么不同。我几乎可以肯定这可以通过一个适合 SO 帖子的代码示例来完成，但显然它是一个小众市场，也是一个棘手的小众市场。我应该向大家澄清一下，我并不是想知道它是否可以完成。我已经知道这一点并且我已经选择了这项技术，我什至在我的答案中有一个例子。但是对于一个有用的 SO 答案，它需要是一个说明 HTML 元素下降的 hello world 示例。
这是我认为不好的最后一个答案（有点），我正在恢复它。
谢谢。但这与我在自己的答案中已经演示过的脚本相同。我真的需要了解 Box2DWeb 以及包含元素和应用重力所需的骨架代码的人，因为我无法在 Web 上找到这样的教程。我仍然相信这是一个适合 SO 答案的代码片段。
这对记录来说是一个有用的小提琴！
我不确定我是否完全理解您的问题，您想获取页面上已经存在的元素（如 div）并将它们放入 Box2DWeb 世界吗？或者只是对它们施加重力？

【解决方案5】：

请查看这些链接，

1) Box2D orientation for the JavaScript developer
2) Box2dweb Study Notes Series
3)BOX2D JS – PHYSICS IN HTML5 & JAVASCRIPT GUIDE

关于应用 box2d 效果的 html 元素，我也找不到任何其他链接，除了您在答案中提到的那个。

【讨论】：

谢谢。这些链接（尤其是最后一个）看起来很有希望（迄今为止最有用的贡献），但我看不到如何添加现有的 SVG 形状。看起来那个demo又直接使用了poly draw函数。
此链接没有分步说明，但您可以查看：soledadpenades.com/2011/10/31/macabre-pool

【解决方案6】：

好吧，Dmitry 的 newton.js 尚未公开。但就像@cirrus 一样，我需要类似的东西。所以我继续创建了我自己的 newton.js。它没有经过很好的测试，但具有类似于我在 Dmitry 的视频中看到的 API + 我自己的要求（我想在 Raphael 之上创建一个游戏引擎作为渲染器）

请在-https://github.com/dbose/newton.js分叉

@cirrus，它还有一个简单的 test.html，它采用一个简单的 Raphael 元素并将其添加到 Box2D“世界”中

就上下文而言，我需要这个，因为我的应用程序 (Mixow) 的核心是一个 Raphael 编辑器，后来我想用它创建一个游戏制作者。 (http://www.mixow.com)

【讨论】：