我可以覆盖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)

这次我把圆圈和线条包裹成一个组。所以你在回电话时回来了。 Imo是最好的解决方案。 您可以通过多种方式实现您想要的目标。当您阅读svg.js源代码时，您将很快了解其工作原理。