How to curve the navtitle along the path using wheelnav js

问题

How can I make the navtitle curve along the path of the slice and wrap the text if it's long.

Image of the wheel above

回答1:

In long text, use '\n' in the title for wrap. wheel.createWheel(["Long\ntext"]);

Currently, the navtitle curve along the path is an RC feature, so please use the source code instead of the last release. You can find the new properties in this CodePen: https://codepen.io/softwaretailoring/pen/RQYzWm

  var piemenu = new wheelnav("wheelDiv");

  // New properties in wheelnav.js v1.8.0
  piemenu.titleCurved = true;
  piemenu.titleCurvedClockwise = false;
  piemenu.titleCurvedByRotateAngle = false;

Unfortunately, the two above properties don't work together. :(

UPDATE: There is a way to achieve your needs. You can use two wheels on each other.

  var piemenu = new wheelnav("wheelDiv");
  setMenu(piemenu); // Set common properties
  piemenu.titleRadiusPercent = 0.65; // Positioning first title
  piemenu.markerEnable = true;
  piemenu.slicePathFunction = slicePath().DonutSlice;
  piemenu.sliceClickablePathFunction = slicePath().DonutSlice;
  piemenu.titleHoverAttr = { fill: "#333" };
  piemenu.createWheel(["Hello", "world!", "-------"]);

  var piemenu2 = new wheelnav("wheelDiv2", piemenu.raphael);
  setMenu(piemenu2); // Set common properties
  piemenu2.wheelRadius = 520; // Positioning second title
  piemenu2.slicePathFunction = slicePath().NullSlice; // There is no slice, only title
  piemenu2.createWheel(["Bello", "space!", "*******"]);

  // Link navigateFunctions to each other
  for (var i = 0; i < piemenu.navItems.length; i++) {
    piemenu.navItems[i].navigateFunction = function () {
      piemenu2.navigateWheel(Math.abs(this.itemIndex));
    }
  }
  for (var i = 0; i < piemenu2.navItems.length; i++) {
    piemenu2.navItems[i].navigateFunction = function () {
      piemenu.navigateWheel(Math.abs(this.itemIndex));
    }
  }

Here is a new CodePen for wrapped and curved text: https://codepen.io/softwaretailoring/pen/eLNBYz

来源：https://stackoverflow.com/questions/51967553/how-to-curve-the-navtitle-along-the-path-using-wheelnav-js

标签

wheelnav.js