javascript - RaphaelJS——矢量还是非矢量？

Question

我正在尝试使用 RaphaelJS 在纸张宽度的 50% 处放置一个圆圈，这是否可能不先进行数学运算(.5 * 像素宽度)？我想简单地将一个元素放置在其容器宽度的 50% 处，这在当前的 Raphael API 中是否可行？

Raphael 声称能够绘制矢量图形，但似乎 API 中的所有内容都是基于像素的。如何使用像素绘制矢量图？这似乎 100% 自相矛盾。

同样，据我了解矢量艺术，无论实际大小如何，它都保持相同的尺寸。这不是使用矢量图形的主要原因之一吗，无论是用于屏幕、打印还是其他什么，它总是具有相同的比例？这样，我进一步对类似 ScaleRaphael 的需求感到困惑;似乎这样的功能是创建矢量图形的重要组成部分。但是，也许我只是不懂矢量图形？

用绝对像素尺寸创建且无法原生调整大小的图像似乎不符合矢量图像的条件。那，或者我在这里遗漏了很大一部分 API。

在此先感谢您的帮助。我已经尝试将此帖子两次发布到 RaphaelJS Google Group，但我猜他们出于某种原因正在审查它，因为自上周以来我一直在等待它出现并且仍然没有我帖子的迹象(尽管其他新帖子正在出现)。

Answer 1

使用像素值来定义形状位置/尺寸不会使其成为非矢量形状。以 Adob​​e Illustrator 为例 - 这是一个矢量产品，但您仍然可以看到每个对象的属性显示位置和尺寸是像素。

矢量图的基本解释是这样的，以矩形为例:

A vector rectangle will have a number of properties such as x, y, width and height. These properties can be specified in pixels. The difference with vector (as opposed to raster) is that these pixel properties are only used to determine how the shape is drawn. So when the display is rendered (refreshed) the "system" can redrawn the shape using the same properties without effecting the quality of the resize.

A raster image however will hold a lot more information (i.e. the exact value of each pixel used to form the shape/rectangle)

如果“像素”这个词让您觉得自相矛盾，请记住计算机屏幕上的所有内容都是以像素为单位呈现的。作为图形管道中的某个点，甚至矢量图形也必须转换为“光栅”。

如果您担心必须使用计算(0.5 * 宽度)，那么请记住必须要进行计算，就我个人而言，我很乐意自己处理这个简单的步骤。

毕竟，您应该只根据“纸”元素的大小计算大小和位置(以像素为单位)，并将这些值输入 Raphael 以创建形状。