Avoid automatic centering?

[thejsn]

Is it possible to avoid the automatic centering when creating a new shape? I'm creating a wedge shape and want the center of the shape to be based on the radius value rather than the actual shape. You can see the issue i'm having here: http://jsfiddle.net/Y73un/1/

[wout]

Do you mean like this? http://jsfiddle.net/wout/Y73un/3/

[thejsn]

Well yeah, but then the move() function stops working. I guess the x and y position could be set in the settings object, but that wouldn't follow the style of the rest of the library. Do you think it would be possible to override the centering at all, without messing with the core svg.js?

[wout]

Well, the logic is correct because the move() method moves the points of the path element by their upper left corner. So while svg.js is recalculating the points individually, you are redrawing them as well. You could use the translate() methods like in this:

http://jsfiddle.net/wout/Y73un/4/

Or you could put the path in a group:

http://jsfiddle.net/wout/Y73un/5/

Or you could create the wedge() method on SVG.PathArray instead and use the move method there to move the points as well.

Many options :)

[wout]

Just thinking, why don't you create a separate class here?

SVG.Wedge = function() {
  this.constructor.call(this, SVG.create('path'))
}

// Inherit from SVG.Path
SVG.Wedge.prototype = new SVG.Path

SVG.extend(SVG.Wedge, {
  move: function(x, y) {
    return this.translate(x, y)
  }
})

SVG.extend(SVG.Container, {
  wedge: function(options) {
    return this.put(new SVG.Wedge).plot(SVG.shapes.wedge(options))
  }
})

This way you don't break the api while giving yourself a very flexible environment.

Usage would be:

var wedge = draw.wedge({ ... options ... })

[thejsn]

Ah yes, that's a great idea! I guess i thought it would be nice to have all the shapes in one place, but the wedge might be a bit too different. Thanks for the help!

[wout]

I am thinking of completely rebuilding the svg.shapes.js plugin anyway. It's old and has a rather strange api. Making classes for every shape is the way to go.

[wout]

I implemented a new function in svg.js to make it easier to create your own shapes:

https://github.com/wout/svg.js#svginvent