深入解读 vue-star-rating 源码：SVG 渐变实现部分填充评分的核心原理

深入解读 vue-star-rating 源码SVG 渐变实现部分填充评分的核心原理【免费下载链接】vue-star-rating:star: A simple, highly customisable star rating component for Vue 2.x. / 3.x项目地址: https://gitcode.com/gh_mirrors/vu/vue-star-ratingvue-star-rating 是一个面向 Vue 2.x / 3.x 的开源评分组件以简单、高度可定制著称支持整星、半星乃至 0.01 精度的流式评分。很多开发者好奇一颗星星是如何做到只亮一半的答案就藏在 SVG 线性渐变linearGradient里。本文将从源码出发完整拆解 vue-star-rating 部分填充评分的核心原理让你一次看懂这个巧妙的渲染思路。为什么需要部分填充从 3.5 星说起传统评分组件常用两张星星图片叠加 外层宽度裁切来模拟半星但裁切会留下锯齿、放大后模糊、圆角处容易穿帮。vue-star-rating 换了一条更聪明的路——SVG 矢量渲染任意缩放不损失质量填充边界由渐变位置精确控制。它的核心思路可以概括为一句话把一颗星星当作一张画布用横向渐变的分界线把星星切成高亮与未高亮两个区域。分界线定在哪里星星就亮到哪里。核心原理SVG 双 stop 渐变的硬切换打开 src/star.vue 的模板部分你会发现每颗星星其实是一个svg内部由linearGradient渐变和若干polygon多边形组成。真正决定填充比例的是渐变里的两个颜色节点linearGradient :idgrad x10 x2100% y10 y20 stop :offsetstarFill :stop-coloractiveColor / stop :offsetstarFill :stop-colorinactiveColor / /linearGradient完整源码见 src/star.vue此处为便于阅读省略了 RTL 与透明度处理这里的妙处在于两个 stop 使用了完全相同的 offset 偏移量。SVG 渐变规范规定当两个颜色节点落在同一位置时颜色之间不做平滑过渡而是硬切换——分界线左边是 activeColor高亮色右边是 inactiveColor未高亮色。于是当starFill 50%时这颗星星左半金色、右半灰色视觉上就是标准的半颗星fill 50% 时的渐变切分示意 ┌──────────────────────────┐ │ ██████████░░░░░░░░░░░░ │ │ 金色(active) 灰色(inactive) │ └──────────────────────────┘而starFill这个百分比正是由星星的fill属性计算而来一行代码搞定顺带兼容了 RTL 从右往左的镜像场景starFill() { return (this.rtl) ? 100 - this.fill % : this.fill % }源码见 src/star.vue从评分到百分比fillLevel 的计算逻辑单颗星星按百分比填充的问题解决了下一个问题是整体评分比如 3.5 分如何分配到每一颗星星答案在 src/star-rating.vue 的createStars方法里createStars(round true, applyFill true) { for (let i 0; i this.maxRating; i) { let level 0 if (i this.currentRating) { level (this.currentRating - i 1) ? 100 : (this.currentRating - i) * 100 } if (applyFill) { this.fillLevel[i] Math.round(level) } } }源码见 src/star-rating.vue逻辑非常直观整数颗的星星直接拿 100剩下的零头落在下一颗星上。以 5 星、评分 3.5 为例星星序号计算过程fillLevel第 1 颗3.5 − 0 1 → 100100第 2 颗3.5 − 1 1 → 100100第 3 颗3.5 − 2 1 → 100100第 4 颗3.5 − 3 0.5 → 0.5 × 10050第 5 颗4 ≥ 3.5不满足 → 00是不是很像逐颗扣减increment属性则负责控制精度设为0.5得到半星设为0.01就是连续流式评分。鼠标滑动评分把像素坐标换算成百分比除了展示vue-star-rating 还支持鼠标滑到哪颗星就亮到哪。关键在于 src/star.vue 的getPosition方法——它把鼠标在星星内部的offsetX像素坐标换算成 0~100 的填充百分比getPosition($event) { let starWidth (92 / 100) * this.size const offset (this.rtl) ? Math.min($event.offsetX, 45) : Math.max($event.offsetX, 1) let position Math.round((100 / starWidth) * offset) return Math.min(position, 100) }这个百分比会随事件抛给父组件由setRating结合星星序号算出实时评分currentRating (starId position / 100) - 1。滑动时触发hover:rating点击时触发update:ratingVue 3 事件名显示、交互、回传整条链路环环相扣。隐藏彩蛋AlphaColor 让半透明颜色正确入渐细心的读者会发现SVG 的stop节点有stop-color和stop-opacity两个独立属性。因此当传入rgba(255,0,0,0.5)、hsla(...)或 8 位十六进制#ffd05580这类带透明度的颜色时必须先拆出颜色值与透明度。这个任务由 src/classes/AlphaColor.js 完成它用正则识别 rgba / hsla / 8 位 hex / transparent 四种格式统一返回{ color, opacity }再由getColor、getOpacity分别绑定到渐变节点上src/star.vue。更多值得把玩的细节多星异色active-color支持传数组配合padColors让每颗星星拥有自己的颜色。RTL 支持rtl模式下starFill取100 - fill渐变方向整体镜像。✨发光效果glow属性基于 SVG 滤镜feGaussianBlur feMerge实现柔和光晕src/star.vue。⭐自定义星形star-points可传入任意多边形坐标把星星换成心形等自定义形状。️圆角与描边rounded-corners通过stroke-linejoinround让边角圆润。♿无障碍支持内置屏幕阅读器文本可通过screen-reader插槽自定义播报内容。总结vue-star-rating 用几百行代码就把部分填充评分这个高频需求实现得既优雅又高性能双 stop 同 offset 的 SVG 渐变解决单星百分比填充fillLevel 逐颗分配解决整体评分换算像素坐标转百分比解决交互评分三者配合天衣无缝。读它的源码你不仅能 get 到一个实用的 SVG 技巧还能学到组件设计中的很多通用模式。想动手验证可以对照 examples/index.html 里的丰富示例直观体验各种 props 效果或者翻阅 spec/star-rating.spec.js 的测试用例理解每个属性的边界行为。【免费下载链接】vue-star-rating:star: A simple, highly customisable star rating component for Vue 2.x. / 3.x项目地址: https://gitcode.com/gh_mirrors/vu/vue-star-rating创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考