标签: vector-graphics

我需要在我正在处理的网站上显示一些交互式(附带DOM侦听器等和事件处理)矢量图形.有一个针对SVG的W3C建议,虽然这种格式仍然无法被Internet Explorer支持认可(对于公共网站而言).IE处理VML,甚至还有javascript库根据浏览器(SVG与VML)做一些类似画布的绘图 - excanvas,Dojo Toolkit的GFX等等.虽然它们都不能显示给定标记的SVG图像,但这样会很好并且可以接受.

所以问题实际上包括几个部分:

1. 是否有任何跨浏览器的Javascript库显示来自给定标记(非强制性SVG)的矢量图形并提供附加到DOM事件的可用性？
2. 如果没有,哪种最狡猾的浏览器嵌入式技术最适合做这样的任务？我可以选择Flex/Flash,Java applet.由于Windows锁定,Silverlight不是一个选项.

[ 编辑 ]谢谢大家的意见/建议.以下是关于此事的随机笔记/结论:

• 我需要的交互水平是能够检测正在显示的矢量图像上的DOM事件 - 鼠标悬停,鼠标移动,点击等 - 以及对它们做出反应的能力,如改变背景颜色,显示对话框等.
• 坚持使用SVG格式的想法非常好,因为除了最受欢迎的IE浏览器之外,它在许多浏览器中都是原生的.经过一些实验显示动态SVG后,我意识到IE 7版本最成问题.由于浏览器不兼容,有太多的麻烦.
• Cake似乎是一个很棒的Javascript框架,虽然我无法在IE7上运行这些示例.
• Java Applets - 我最喜欢这个想法,因为我可以使用Apache Batik库,一个高质量的SVG渲染器.但是,Batik是一个非常大的库,我不能负担部署一个重量只有兆字节的applet.
• 我决定坚持使用Flex选项.我发现了一个漂亮的矢量图形库Degrafa.它使用自己的标记格式,但它识别SVG路径表示法,所以在我的情况下,使用XSLT转换我的SVG或者只是解析它们将非常容易.

[ 编辑2 ]出现了更多评论.我想澄清一下,"Windows锁定"是指Silverlight通常在Windows上运行的情况,更具体地说是IE.我怀疑它是其他系统上可接受的解决方案(例如Flash或Java Applet).是的,我毫不怀疑一个人能够在任何系统上启动Silverlight应用程序,但我担心这对普通用户来说太费劲了.

@Akira:你对IE7上的那些"SVG渲染器"有任何问题吗？我总是抛出Javascript错误.

我想弄清楚如何在使用python的turtle模块创建绘图后保存位图或矢量图形图像.经过一番谷歌搜索后,我找不到一个简单的答案.我找到了一个名为canvas2svg的模块,但我对python很新,我不知道如何安装模块.是否有一些内置的方法来保存龟帆布的图像？如果不是我在哪里将自定义模块放在Ubuntu机器上？

是否有任何简单(可编写脚本)的方法将带有矢量图像的PDF转换为带有光栅图像的PDF？换句话说,我想用完全相同(非光栅化)的文本生成PDF,但每个矢量图像都用光栅化版本替换.

我偶尔会在我的Kindle上阅读有关技术文章的PDF文件,并且发现直接阅读PDF文件令人沮丧.值得庆幸的是,亚马逊将PDF 自动转换为Kindle格式,可以很好地回收我尝试过的大多数PDF文本部分.然而,虽然光栅图像似乎使转换过程变得很好,但矢量图像却被严重损坏.如果我可以轻松转换PDF以便所有矢量图像都被光栅化,那将会很棒.

我对任何可能的解决方案感兴趣,但基于Linux或Windows的解决方案更可取.

我需要使用raphael.js绘制各种大小的同心弧.我试图理解http://raphaeljs.com/polar-clock.html背后的代码,这与我想要的非常相似,但是,如果没有评论,就很难理解.

理想情况下,我需要一个函数来创建一条距离某个中心点给定距离的路径,从某个角度开始,以某个其他角度结束.

我想创建一个可以在某个平面图上显示位置的应用程序.导航正以某种方式通过WiFi实现,我已经完成了,所以现在我有显示楼层平面图的问题.

它可能是某种矢量格式,在浏览互联网一段时间之后我已经确定它必须是svg文件.我找到了一些解决方案,但它对我不起作用!

1. 库svg-android

   有机会显示.svg文件,但只显示"简单"文件.它仅适用于教程中的文件,但不适用于任何其他.svg文件(例如,您将使用Inkscape创建的其他文件).

   所以,我决定,我将解析.svg文件,从中创建DOM,以某种方式获取对象和属性,并通过OpenGL ES绘制它.

2. Apache Batik

   乍一看,非常好的解决方案,但有一个问题.Android有一些"原生"apache库,当我尝试用蜡染做某事时,它会抛出NoClassDefFoundError,因为它不是在蜡染库中搜索,而是在"本机"库中搜索.

   当然,我们可以在我们的项目中添加源代码,只接受.svg文件的蜡染解析器并以某种方式编辑它,但是有很多工作,同样的成功我们可以编写自己的解析器.

3. 小线

   没有试用版,但是如果我们看到它对svg文件和android的工作原理的描述,我们会看到只有这些文件的光栅化而且都是.

有没有比编写自己的解析器更好的解决方案？有人遇到过这个问题吗？

如果你像我一样,在阅读本书结束时,你的眼睛会抽搐.我不怪你.

我们的客户要求我们开发响应式HTML电子邮件模板,其中包含两个规范:

1. 使用尽可能少的图像
2. 使用尽可能多的"花哨的css功能".大多数情况下,这只意味着盒子上的圆角.

这个问题具体是关于执行圆角.Gmail和Apple支持CSS圆角,Outlook需要矢量图形.对于其余平台,他们可以使用方形边缘.

以下是我们如何检测和执行outlook:

<!--[if mso]><v:shape>...</v:shape><![endif]-->

像魅力一样工作,甚至回到Outlook 2000.问题是,我无法弄清楚如何创建一个后备.直觉说:

<!--[if !mso]>...<![endif]-->

但它只是被大多数其他电子邮件客户端的评论完全忽略,然后完全没有从框中丢失角落.我问你,SO社区的优秀成员:是否可以为除 MSO 之外的所有平台部署标记？也许有一种更聪明的方法可以实现这一点,我没有考虑过？或者,电子邮件HTML仍然太过年轻,无法尝试这样的事情？

我最近开始自学游戏编程.有人建议我从Python开始,我得到了"用Python和Pygame开始游戏开发:从新手到专业"的书.我得到了一个他们教导Vector和创建Vector2类的部分.一切顺利,直到我试图超过除法运算符.我的代码是这样的:

class Vector2(object):

  def __init__(self, x=0.0, y=0.0):
    self.x = x
    self.y = y

  def __str__(self):
    return "(%s, %s)"%(self.x, self.y)

  @classmethod
  def from_points(cls, P1, P2):
    return cls(P2[0] - P1[0], P2[1] - P1[1])

  def __add__(self,rhs):
    return Vector2(self.x + rhs.x, self.y + rhs.y)

  def __sub__(self,rhs):
    return Vector2(self.x - rhs.x, self.y - rhs.y)

  def __mul__(self, scalar):
    return Vector2( self.x*scalar, self.y*scalar)

  def __div__(self, scalar):
    return Vector2( self.x/scalar, self.y/scalar)

现在,当我尝试调用"/"运算符时,会显示:

AB = Vector2(10.0,25.0)
print(AB)   # <<<<(10.0, 25.0)
v1 = AB + Vector2(20.,10.)
print(v1)   # <<<<(30.0, 35.0) …

使用行结束选项在inkscape中添加箭头非常有限.

我正在寻找一种解决方案,允许使用OpenStreetMap数据在iOS中渲染基于2D顶视图矢量的地图,而不是使用来自服务器的预渲染切片.与iOS6 +中的Apple和Google Maps类似.

我对这个问题进行了广泛的研究,但没有找到太多的信息.
有许多iOS应用程序可以执行此操作,但没有关于它们如何实现它的信息.其中几个应用程序是:

• 由skobbler创建的ForeverMap 2
• 伽利略离线地图
• OffMaps 2

前两个应用程序的工作方式类似于Apple和Google Maps.每当缩放变化时,地图都会实时绘制.
最后一个似乎使用了略有不同的方法.它以特定缩放级别呈现矢量数据并创建切片,然后将切片用作从切片服务器下载的普通切片.因此渲染引擎实际上可以是Route-Me库的tile源,但是不是下载tile而是动态渲染它们.

第一种方法是优选的.

[问]我猜一旦OpenGL ES渲染器到位,就可以在方法之间切换.我的意思是你可以使用渲染器作为Route-Me的源来创建磁贴,或者你可以将它用作实时抽屉,类似于游戏.我对吗？

我找到的最接近的解决方案是OpenStreetPad.但是,它使用的是Core Graphics而不是OpenGL ES,因此渲染不是硬件加速的.

Mapbox表示他们正在研究矢量图块,他们可能会提供一个iOS渲染解决方案,但是它可能会使用Mapnik,因此我不确定它的效率如何.自2013年中期以来,没有ETA.

[问]您是否了解其他任何图书馆,论文,指南,示例或其他有关如何处理此问题的有用信息？基本上如何处理OSM数据以及如何实际使用OpenGL ES/GLKit在设备上绘制数据.也许一些做过它的人可以分享一些东西？

我正在创建一个严重依赖图节点树的工具.当前的实现是用Java完成的,我将它移植到C#上的通用代码库中,因此它可以被各种渲染实现使用,也因为我想使用WPF的强大功能来实现用户友好的界面.

浏览了一天之后,我遇到了各种方法来通过WPF绘制矢量图形.

这个人讲的是WPF开发人员可以选择的不同层.因为我想首先使用WPF PURELY进行渲染,所以我想开发"Visual Layer".

然后我遇到了类似的东西: DrawingVisual, GeometryDrawing, FrameworkElement/UIElement/Shapes

所以,我对所有不同的实现有点不知所措,这些实现最终以完全不同的方式完成相同的操作.

Graph-Node库已经用它的所有逻辑(包括碰撞检测和用鼠标拖动)移植到C#.因为它是用图形渲染器(如XNA,SlimDX,OpenTK等)制作的,所以在性能方面实现WPF渲染器的最佳方式(如同,它将绘制图形库告诉它的任何东西)画画？

基本上,生成的WPF控件充当画布,但它必须是SUPER轻量级,除了为我提供绘制我的圆圈,线条和其他形状的方法之外,没有任何简洁的WPF功能:)

编辑:

我基本上想知道:要走的路是什么？我是否将Canvas扩展为我的图形的"主机",然后添加我的UIElement的自定义实现？或者我可以拥有一个可以绘制一切的课程(例如,一个超级超级超级图形).就像在GDI中覆盖OnPaint或在Java中覆盖Paint-method(它使Graphics对象可以完成所有操作).