我可以覆盖 SVG.js 中的绘图函数吗？

Question

例如，如果我在使用 SVG.js 绘制圆时，是否可以覆盖 .circle() 或 .ellipse() 函数，以便绘制像图像一样的半径线？

我想要类似 SVG.Ellipse = SVG.extend(SVG.Ellipse, {...})

（假设当前由其他人编写的项目中的实现过于复杂和抽象，无法尝试扩展内容，因此我只想尝试覆盖它）。

Answer 1

您似乎对 svg.js 项目的节拍感到不知所措；）

玩笑不谈：做自己想做的事其实并不复杂。您可以选择以下几种路径：

• 将line() 方法添加到SVG.Circle
• 发明一个新对象SVG.LinedCircle
• 用新的构造方法扩展SVG.Parent()

将line() 方法添加到SVG.Circle

SVG.extend(SVG.Circle, {
    line: function() {
        var r = this.radius()
          , cx = this.cx() 
          , cy = this.cy()

        this.parent().line(cx, cy, cx + r)
    }
}

用法：

draw.circle(20).line()

发明一个新对象SVG.LinedCircle

SVG.LinedCircle = SVG.invent({
    create: function() { SVG.Circle.call(this) },
    inherit: SVG.Circle,
    line: function() {
        var r = this.radius()
          , cx = this.cx() 
          , cy = this.cy()

        this.parent().line(cx, cy, cx + r)
    },
    construct: {
      linedCircle: function(size) {
          return this.put(new SVG.LinedCircle().size(size).line())
      }
    }
})

用法

draw.linedCircle()

用新的构造方法扩展SVG.Parent()

SVG.extend(SVG.Parent, {
    linedCircle: function(size) {
        var g = this.group()
          , c = g.circle(size)
          , r = c.radius()
          , cx = c.cx() 
          , cy = c.cy()

        g.line(cx, cy, cx + r
        return this.put(g)
    }
})

用法：

draw.linedCircle(50)

这次我将圆和线包裹成一个组。因此，您在调用它时会返回一个组。海事组织那是最好的解决方案。 您可以通过多种方式实现您想要的。当您阅读 svg.js 源代码时，您将很快了解事情是如何工作的。