在KineticJS滚轮上旋转文本

Question

I'm working on a HTML5 Canvas Wheel and have taken a look at the following link: http://www.html5canvastutorials.com/labs/html5-canvas-wheel-of-fortune/

I have changed the dimensions of the wheel so that one half is completely visible as opposed to one small section being visible.
I'm attepmting to rotate the text on itself so that when an item is at the side of the wheel the text is straight horizontally not vertically.

Everything I've tried thus far has been failure after failure. I've come across a JSFiddle ( http://jsfiddle.net/m1erickson/mqsY3/ ) on Stack Overflow with one solution (something like rotationDeg:textAngle ), however it uses a differnet version of KineticJS so doesn't work. When I change to that version of KineticJS everything else on my wheel breaks.

Can anyone help with rotating the text using the KineticJS 5.0.1?

Answer 1

The more recent versions of KineticJS use objects to define properties so you need to declare the offset using an object instead of an array:

var offset = { x: wedgeRadius - 10, y: 7 };

Here's an updated Demo: http://jsfiddle.net/m1erickson/8Px6C/

Good luck with your project!