在 SVG 和 canvas 之间,哪个更适合操作/动画多个图像?也许两者都不是,只使用 css3 转换?
问题的第二部分是,哪个 javascript 库更好/更容易操作图像?我实际上不会画任何形状或任何东西。其他信息:我将使用 jQuery,不需要支持所有浏览器,只需支持 webkit。
编辑: 更多信息:当前的设计是在类似网格的布局中布局/绘制几行/几列图像,中心的图像处于“焦点”(稍大一点,有边框或其他东西,旁边有一些文本)它)。棘手的是,我们希望整个图像画布看起来像是在滑动/滑过,以使另一个随机图像成为焦点。显然,该网格中的图像数量需要超过视口中可见的图像数量,以便在发生转换时始终有图像占据画布。除了移动图像之外,我不会模糊它们或以其他方式修改它们。最终,我们将添加用户交互,例如单击/触摸可见图像以使其手动聚焦。
如果这还不清楚或仍然令人困惑,请告诉我。
我遇到了 scripty2 ,它似乎是使用 canvas/SVG 来实现我的目的的替代方案。昨晚我也开始用 EaselJS 放屁,看起来这可能有用,但我想知道它是否会最终比仅使用标准 HTML/CSS 和 Scripty2 等工具来辅助动画和单击/触摸事件更加工作/复杂。只是寻找任何建议。谢谢!
The 2nd part of the question is, which javascript library is better/easier to manipulate images with? I won't be actually drawing any shapes or anything. Other info: I'll be using jQuery and don't need to support all browsers, just webkit.
Edit:
More information: the current design is to layout/draw several rows/columns of images in a grid-like layout, with the image in the center being in "focus" (a little larger, with a border or something and some text next to it). The tricky thing is that we want the whole canvas of images to appear to slide/glide over to bring another random image into focus. So obviously the number of images in this grid needs to exceed what is visible in the viewport so that when the transition occurs there are always images occupying the canvas. Other than moving the images around, I won't be blurring them or otherwise modifying them. Eventually we will add user interactions like clicking/touching on a visible image to bring it to focus manually.
Let me know if this is not clear or still confusing.
I ran across scripty2 which seems like an alternative to using canvas/SVG for my purposes. I also started farting around with EaselJS last night, and it seems like this might work, but I'm wondering if it'll end up being more work/complex than just using standard HTML/CSS and a tool like Scripty2 to aid with animations and click/touch events. Just looking for any suggestions. Thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
答案取决于你的操作和动画。
如果只是翻译,与画布相比,CSS 在速度上胜出。我还没有测试过,但我相信它在同类事情上可以轻松击败 SVG。
如果您要进行非仿射变换或以其他方式弄乱图像(例如模糊它们),那么您显然需要 Canvas。
如果您需要每个对象的事件处理程序,那么您显然需要一个保留模式绘图系统,例如 SVG 或 HTML+CSS。我还没有做足够的 CSS3 转换来说明它们在速度方面与 SVG 的比较,但它们显然没有强大的 SVG 的 DOM 转换。
这是一个相当主观的问题(或一系列问题),您尚未提供足够的信息来获得明确的答案。
The answer depends on your manipulation and animation.
If it's just translations, CSS wins for speed compared to canvas. I haven't tested, but I feel confident it easily beats SVG for the same sort of thing.
If you're going to be doing non-affine transformations or otherwise messing with the images (e.g. blurring them) you clearly want Canvas.
If you need event handlers per object, you clearly want a retained-mode drawing system like SVG or HTML+CSS. I haven't done enough CSS3 transforms to say how they compare in terms of speed to SVG, but they clearly do not have the robust transformation DOM of SVG.
This is a rather subjective question (or suite of questions) and you haven't yet given sufficient information for a clear answer to be possible.