【问题标题】:Svg.js Duplicate, Arrays, MergeSvg.js 复制、数组、合并
【发布时间】:2019-04-18 12:56:10
【问题描述】:

我是 SVG.js 和一般概念的新手,虽然我有矢量图形背景。所以我要找的是对这个概念的理解。

复制,发现只有数组复制功能,如何复制一个对象? 举个例子:

element.rotate(45, 50, 50)

如果我想保持副本完整,这会旋转元素怎么办?

数组本身。它是什么?看起来不像图形设计程序中的数组。如果我只想拥有一个包含五列元素的三个原始数组怎么办?

合并。如果我有弧线和线,我可以将它们合并到路径吗?然后围绕一个端点旋转它们的副本并再次合并以获得漂亮的角落?

也许我要求太多,但作为一个新人,我需要一些推动力。

【问题讨论】:

标签: arrays merge copy svg.js


【解决方案1】:

如果您想复制形状,clone() 方法是您的朋友。 您可以阅读 svgjs.com 上的文档以了解更多信息。

对于合并:不,这对于 svg.js 是不可能的,尽管一般来说并非不可能。 只是直到现在没有人要求这个功能,或者没有人有时间投入他们的大脑能力来解决它。 当您打开一个新问题并请求该功能时,有可能会考虑它。 不过你的想法有一个问题

// a line
canvas.line(0, 0, 200, 0)
<line x1="0" y1="0" x2="200", y2="0">

// an arc
canvas.path('M 200 0 A 100 100 0 0 200 200')
<path d="M 200 0 A 100 100 0 0 200 200">

// resulting path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200')
<path d="M0 0 200 0 A 100 100 0 0 200 200">

// rotating the path
canvas.path('M0 0 200 0 A 100 100 0 0 200 200').rotate(90, 200, 200)
<path d="M0 0 200 0 A 100 100 0 0 200 200" transform="matrix(....)">

如您所见,旋转路径不会改变 d-attr 的值。旋转是使用transform 属性完成的转换。所以你不能轻易地将这两条路径合并在一起。相反,您首先必须摆脱转换并将其直接应用于每个点。然后就可以合并了。 这个 ofc 再次是可能的,但可能不是有人已经实施的东西。 不过,它会是一个很酷的插件......

【讨论】:

  • 谢谢,转型对我来说是一个全新的概念。不明白为什么它在引擎盖下无论如何都有绝对坐标。
  • 转换是每个图形环境中最强大的工具。您肯定从每个图像编辑程序中都知道它。仅形成一个形状并将其重用于多个转换或撤消转换、堆栈转换等要容易得多。相反,更改所有(可能数百个)坐标是浪费资源
  • 说到克隆也有“使用”,看起来更好,但我不知道在这种情况下如何应用多重转换codesandbox.io/s/pmqv6vxvw0
  • 您将转换 use 元素本身。在使用 svg 之前,您可能需要考虑阅读有关 svg 的信息。 js。这会让很多事情变得更清楚
  • 你现在,我以前用过蚱蜢。你总是可以在那里得到实际的坐标,我期望 js 框架具有相同的抽象级别。对于我的幼稚观点,在引擎盖下使用纯几何引擎比在内存中保存奇怪描述的图形的相同副本更好。无论如何,你当然是对的,我必须先学习,但你知道当有人没有得到一些基本的阅读文档无用的时候。这就是我想要做的,以获得基础知识。
【解决方案2】:

如果有一天有人需要,回答我自己的问题。

首先,SVG.js 及其种类不适用于几何图形,它们适用于 SVG。先学习 SVG,然后再决定是否需要它们。就我而言,Vue 会更简单。

至于其他:

复制 - 在我的例子中,SVG 提供的所有内容主要是 &lt;use&gt;,但要小心它们不可更改的样式。

数组 - 在 CG 图形编辑器中没有这样的东西,你应该自己编程。我很伤心 SVG.js 只能帮助你处理 SVG 而不是几何

合并 - 理论上可行,但没有现成的解决方案。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-07-16
    • 1970-01-01
    • 2014-02-06
    • 2022-08-07
    • 1970-01-01
    • 1970-01-01
    • 2018-12-05
    • 2018-09-13
    相关资源
    最近更新 更多