Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Avoid automatic centering? #1

Open
thejsn opened this issue Feb 2, 2014 · 7 comments
Open

Avoid automatic centering? #1

thejsn opened this issue Feb 2, 2014 · 7 comments

Comments

@thejsn
Copy link

thejsn commented Feb 2, 2014

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
Copy link
Member

wout commented Feb 2, 2014

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

@thejsn
Copy link
Author

thejsn commented Feb 2, 2014

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
Copy link
Member

wout commented Feb 2, 2014

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
Copy link
Member

wout commented Feb 2, 2014

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
Copy link
Author

thejsn commented Feb 2, 2014

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
Copy link
Member

wout commented Feb 2, 2014

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
Copy link
Member

wout commented Feb 3, 2014

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants