如何使用wheelnav js沿路径弯曲导航标题

时间:2018-08-22 13:03:20

标签: wheelnav.js

如何沿着切片的路径制作导航曲线,并在文本较长的情况下包裹文本。

enter image description here

上方车轮的图像

1 个答案:

答案 0 :(得分:2)

长文本中,在标题中使用'\ n'进行换行。 wheel.createWheel([“ Long \ ntext”]);

当前,路径上的导航曲线是RC功能,因此请使用源代码,而不是最新版本。 您可以在此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;

不幸的是,以上两个属性不能一起使用。 :(

更新:有一种方法可以满足您的需求。您可以在两个轮子上互相使用。

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

这是用于包裹和弯曲文本的新CodePen:https://codepen.io/softwaretailoring/pen/eLNBYz