0

If for example, I when I drew a circle using SVG.js, is it possible to override the .circle() or .ellipse() function so that it draws a radius line like the image?

I'm wanting something like SVG.Ellipse = SVG.extend(SVG.Ellipse, {...})

(Assume that the current implementation in the project written by someone else is far too complicated and abstracted to try extending stuff, hence why I just want to try and override it).

enter image description here

itcropper
  • 752
  • 1
  • 7
  • 21
  • can you provide a fiddle? why not just create a new svg? – Pixelomo Dec 05 '17 at 05:09
  • @AlanSutherland I wish... Im trying to add this to an existing project. Whoever wrote the code that implements all the SVG wrote abstracted the hell out of it. So at this point, after days of trying to modify what's there already, I'v decided to just try and override SVG.Ellipse – itcropper Dec 05 '17 at 06:21
  • can we see your code? – Pixelomo Dec 05 '17 at 07:24
  • @itcropper No you can't - the code that draws native SVG elements is *native* browser code – nicholaswmin Dec 05 '17 at 07:33

1 Answers1

0

It seems like you are overwhelmed of the beaty of the svg.js project ;)

Jokes aside: It is really not complicated to do what you want. You have a few paths you can choose from:

  • Add a line() method to SVG.Circle
  • Invent a new Object SVG.LinedCircle
  • Extend SVG.Parent() with a new constructor method

Add a line() method to 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)
    }
}

Usage:

draw.circle(20).line()

Invent a new Object 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())
      }
    }
})

Usage

draw.linedCircle()

Extend SVG.Parent() with a new constructor method

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)
    }
})

Usage:

draw.linedCircle(50)

This time I wrapped circle and line into a group. So you get back a group when calling it. Imo thats the best solution. You can achieve what you want in multiple ways. When you read the svg.js source you wil quickly understand how things work.

Fuzzyma
  • 7,619
  • 6
  • 28
  • 60