wheelnav.js开发者指南：自定义spreader与marker打造独特导航体验

wheelnav.js开发者指南：自定义spreader与marker打造独特导航体验

【免费下载链接】wheelnavAnimated wheel navigation JavaScript library based on Raphaël.js (SVG/VML). It can be a pie menu (radial menu, circular menu) and many more.项目地址: https://gitcode.com/gh_mirrors/wh/wheelnav

wheelnav.js是一款基于Raphaël.js的动画轮式导航JavaScript库，能够创建饼图菜单（径向菜单、圆形菜单）等多种交互式导航效果。本文将详细介绍如何通过自定义spreader和marker组件，为你的web项目打造独特的导航体验。

了解spreader与marker核心概念

在wheelnav.js中，spreader和marker是构建交互式导航的两个核心组件：

  • spreader：用于创建导航项之间的连接区域，支持多种路径样式，如饼图、星形、线条等
  • marker：作为导航指示器，用于突出当前选中的菜单项，提供视觉反馈

内置spreader与marker样式展示

wheelnav.js提供了丰富的预设样式，满足不同场景需求：

图1：wheelnav.js提供的交互式轮式导航组件示例，展示了多色分区和图标集成

图2：环形导航样式展示，包含中心空白区域和多色分区设计

快速开始：基础配置与引入

安装与引入

通过以下命令克隆仓库并引入核心文件：

git clone https://gitcode.com/gh_mirrors/wh/wheelnav

在HTML中引入必要的脚本文件：

<script src="js/required/raphael.js"></script> <script src="js/source/wheelnav.core.js"></script> <script src="js/source/spreader/wheelnav.spreader.js"></script> <script src="js/source/marker/wheelnav.marker.js"></script>

基础初始化代码

// 创建基本轮式导航 var myWheelnav = new wheelnav("wheelDiv"); myWheelnav.slicePathFunction = slicePath().Pie; myWheelnav.spreaderPathFunction = spreaderPath().PieSpreader; // 默认spreader myWheelnav.markerPathFunction = markerPath().TriangleMarker; // 默认marker myWheelnav.createWheel(["首页", "产品", "服务", "关于我们"]);

自定义spreader：打造独特导航布局

内置spreader类型与应用

wheelnav.js提供多种预设spreader样式，定义在js/source/spreader/目录下：

  • PieSpreader：饼图样式，适合创建完整圆形导航
  • StarSpreader：星形样式，为导航添加动感效果
  • LineSpreader：线条样式，简约现代的设计选择
  • FlowerSpreader：花朵样式，适合创意类网站

实现自定义StarSpreader

以下是星形spreader的核心实现代码（来自js/source/spreader/wheelnav.spreaderPath.Star.js）：

this.StarSpreader = function (helper, percent, custom) { if (custom === null) { custom = StarSpreaderCustomization(); } helper.setBaseValue(custom.spreaderPercent * percent, custom); rbase = helper.wheelRadius * custom.spreaderPercent * custom.minRadiusPercent * percent; r = helper.sliceRadius; spreaderPathString = []; sliceAngle = helper.sliceAngle / helper.navItemCount; baseAngle = helper.navAngle; helper.StartSpreader(spreaderPathString, baseAngle, r); for (var i = 0; i < helper.navItemCount; i++) { startAngle = i * sliceAngle + (baseAngle + sliceAngle / 2); middleAngle = startAngle + (sliceAngle / 2); endAngle = startAngle + sliceAngle; spreaderPathString.push(helper.LineTo(startAngle, rbase)); spreaderPathString.push(helper.LineTo(middleAngle, r)); spreaderPathString.push(helper.LineTo(endAngle, rbase)); } spreaderPathString.push(helper.Close()); return { spreaderPathString: spreaderPathString, titlePosX: helper.titlePosX, titlePosY: helper.titlePosY }; };

应用自定义spreader

// 使用星形spreader myWheelnav.spreaderPathFunction = spreaderPath().StarSpreader; // 自定义spreader属性 myWheelnav.spreaderPathCustom = { minRadiusPercent: 0.3, // 调整星形内圈大小 spreaderPercent: 0.8 // 调整spreader占比 }; myWheelnav.createWheel(["首页", "产品", "服务", "关于我们"]);

自定义marker：增强交互体验

内置marker类型

marker定义在js/source/marker/目录下，主要类型包括：

  • TriangleMarker：三角形标记，默认选项
  • PieLineMarker：饼图线条标记
  • LineMarker：直线标记
  • DropMarker：水滴形标记
  • MenuMarker：菜单样式标记

自定义marker样式与动画

通过修改marker路径和属性实现自定义效果：

// 自定义三角形marker myWheelnav.markerPathFunction = function(helper, percent, custom) { var arcBaseRadius = helper.wheelRadius * percent; var markerPathString = [ helper.MoveTo(helper.navAngle, arcBaseRadius), helper.LineTo(helper.navAngle - 5, arcBaseRadius * 0.8), helper.LineTo(helper.navAngle + 5, arcBaseRadius * 0.8), helper.Close() ]; return { markerPathString: markerPathString }; }; // 设置marker动画效果 myWheelnav.markerAnimation = true; myWheelnav.animatetime = 500; // 动画时长 myWheelnav.animateeffect = "elastic"; // 动画效果

高级技巧：spreader与marker协同设计

样式统一与主题定制

通过CSS类统一控制spreader和marker样式：

/* 在css/index.css中定义样式 */ .wheelnav-spreader-in { fill: #3498db; stroke: #2980b9; stroke-width: 2; } .wheelnav-marker { fill: #e74c3c; stroke: #c0392b; stroke-width: 1; }

在JavaScript中应用：

myWheelnav.spreaderPathInAttr = { "class": "wheelnav-spreader-in" }; myWheelnav.markerAttr = { "class": "wheelnav-marker" };

响应式设计实现

// 监听窗口大小变化，调整导航尺寸 window.addEventListener('resize', function() { var newSize = Math.min(window.innerWidth, window.innerHeight) * 0.8; myWheelnav.wheelRadius = newSize / 2; myWheelnav.redraw(); });

常见问题与解决方案

性能优化

  • 减少导航项数量，建议不超过8个
  • 禁用不必要的动画效果
  • 使用minified版本：js/required/raphael.min.js和js/dist/wheelnav.min.js

浏览器兼容性

确保在老旧浏览器中正常工作：

// 检测并回退到简单模式 if (!Raphael.svg) { myWheelnav.spreaderEnable = false; myWheelnav.markerEnable = false; }

总结与扩展学习

通过自定义spreader和marker，wheelnav.js可以创建出各种独特的轮式导航效果。关键文件路径总结：

  • 核心功能：js/source/wheelnav.core.js
  • Spreader实现：js/source/spreader/
  • Marker实现：js/source/marker/

探索更多可能性，尝试结合js/source/slicePath/中的切片路径功能，创造出更加丰富多样的导航效果！

【免费下载链接】wheelnavAnimated wheel navigation JavaScript library based on Raphaël.js (SVG/VML). It can be a pie menu (radial menu, circular menu) and many more.项目地址: https://gitcode.com/gh_mirrors/wh/wheelnav

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考